Obtain current img src from a slider

Question

Obtain current img src from a slider

Navigation

#1 by (1 votes)

3

I am developing a gallery as a slider, I have achieved the transition function, but I want to make a fullscreen but I can not capture the src of the current img, I always capture the first one.

var interval = undefined;
$(document).ready(function() 
{
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
    $('#zoom1').on('click', imagenact);
    $('#full').on('click', imagenfull);
    $('#Fullscreen').click(function() {
    $(this).fadeOut(); //this will hide the fullscreen div if you click away from the image. 
    $('.slideshow').fadeIn();
    $('#Menuopimg').fadeIn();
  });
});

function imagenact() 
{
  var $imgsrc = $('.slideshow img').attr('src');
  alert($imgsrc);
}

function imagenfull() 
{
  var $imgsrc = $('.slideshow img').attr('src');
  $('#Fullscreen img').attr('src', $imgsrc); //assign it to the tag for your fullscreen div
  $('#Fullscreen').fadeIn();
  $('.slideshow').fadeOut();
  $('#Menuopimg').fadeOut();
}

function getNext() 
{
  var $curr = $('.slideshow img:visible'),
  $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

  transition($curr, $next);
}

function getPrev() 
{
  var $curr = $('.slideshow img:visible'),
  $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
  transition($curr, $next);
}

function transition($curr, $next) 
{
  clearInterval(interval);

  $next.css('z-index', 2).fadeIn('slow', function() 
  {
    $curr.hide().css('z-index', 0);
    $next.css('z-index', 1);
  });
}

.slideshow 
{
    position: relative;
    /* necessary to absolutely position the images inside */
    width: 100%;
    /* same as the images inside */
    height: 700px;
    background-color:#FFF;
}
.slideshow img 
{
    position: absolute;
    display: none;
	padding-left:10%;
}

#Fullscreen 
{
    height: 100%;
    display: none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;

    /* I made a 50% opacity black tile background for this div so it would seem more... modal-y*/
   background: transparent url('http://asherman1986-001-site2.smarterasp.net/Images/SiteImages/bgTile_black25.png') repeat;
}

#Fullscreen img
{
    height: 100%;
    display: block;
    margin: 0 auto;
}

.fullCerrar
{
    float:right; 
    background-color:#4A8AC9;
    position:absolute;
    color:#FFF;
    padding:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="slideshow">
  <img src="http://lorempixel.com/150/150/abstract/" width="150px" height="150px" alt="first image">
  <img src="http://lorempixel.com/150/150/sports" width="150px" height="150px" alt="second image">
  <img src="http://lorempixel.com/150/150/cats" width="150px" height="150px" alt="third image">
  <img src="http://lorempixel.com/150/150/nature" width="150px" height="150px" alt="fourth image">
</div>
  </div>
 <div id="Fullscreen">
   <h5 align="center" class="fullCerrar" >Cerrar</h5>
   <img src="" style="z-index:auto" />
</div>
<div class="clearfix"></div>
<div class="row" style="padding-top:13px; padding-bottom:10px; background-color:#4A8AC9">
           <div class="col-md-12" id="Menuopimg">
           <div class="col-md-3"></div>
      <div class="col-md-1" id="prev" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-prev.png" width="40" height="32" alt=""/></a></div>
      		<div class="col-md-1" id="full" style="background-color:#1B1464; padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btnFullScreen.png" width="40" height="32" alt=""/></a></div>
            
            <div class="col-md-1" id="zoom1" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-zoomin.png" width="40" height="32" alt=""/></a></div>
            <div class="col-md-1" id="zoom-out" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-zoomout.png" width="40" height="32" alt=""/></a></div>
        
        <div class="col-md-1"  id="next" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-next.png" width="40" height="32" alt=""/></a></div>
    </div>
</div>

javascript

asked by Alldesign Web 01.07.2016 в 23:05

source

1 answer

CheckBox Angular 4 ngfor problem when selecting Redirect url in htacces with tilde

score 1 · Answer 1

The problem is in how you select the image that you will put in full screen:

function imagenfull() 
{
  var $imgsrc = $('.slideshow img').attr('src');
  $('#Fullscreen img').attr('src', $imgsrc); //assign it to the tag for your fullscreen div
  $('#Fullscreen').fadeIn();
  $('.slideshow').fadeOut();
  $('#Menuopimg').fadeOut();
}

In that code, when you do:

var $imgsrc = $('.slideshow img').attr('src');

You are selecting all the images within the slideshow ( $('.slideshow img') ) and you stay with the src of the first one. What interests you is to stay with the image that is active at that moment and that can be done by selecting the image that is visible (because those that are not active will be hidden).

Then you would just have to change the selector to something like this:

var $imgsrc = $('.slideshow img:visible').attr('src');

Making that change, the code would look like this:

var interval = undefined;
$(document).ready(function() 
{
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
    $('#zoom1').on('click', imageShrink);
    $('#zoom-out').on('click', imageGrow);
    $('#full').on('click', imagenfull);
    $('#Fullscreen').click(function() {
    $(this).fadeOut(); //this will hide the fullscreen div if you click away from the image. 
    $('.slideshow').fadeIn();
    $('#Menuopimg').fadeIn();
  });
});

function imageShrink() 
{
  var zoom = $(".slideshow img").css("zoom") || 1;
  $('.slideshow img').css("zoom", zoom - 0.1);
}

function imageGrow() 
{
  var zoom = $(".slideshow img").css("zoom") || 1;
  $('.slideshow img').css("zoom", (0.1 + parseFloat(zoom)));
}

function imagenfull() 
{
  // única línea cambiada!
  var $imgsrc = $('.slideshow img:visible').attr('src');
  $('#Fullscreen img').attr('src', $imgsrc); //assign it to the tag for your fullscreen div
  $('#Fullscreen').fadeIn();
  $('.slideshow').fadeOut();
  $('#Menuopimg').fadeOut();
}

function getNext() 
{
  var $curr = $('.slideshow img:visible'),
  $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

  transition($curr, $next);
}

function getPrev() 
{
  var $curr = $('.slideshow img:visible'),
  $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
  transition($curr, $next);
}

function transition($curr, $next) 
{
  clearInterval(interval);

  $next.css('z-index', 2).fadeIn('slow', function() 
  {
    $curr.hide().css('z-index', 0);
    $next.css('z-index', 1);
  });
}

.slideshow 
{
    position: relative;
    /* necessary to absolutely position the images inside */
    width: 100%;
    /* same as the images inside */
    height: 700px;
    background-color:#FFF;
}
.slideshow img 
{
    position: absolute;
    display: none;
	padding-left:10%;
}

#Fullscreen 
{
    height: 100%;
    display: none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;

    /* I made a 50% opacity black tile background for this div so it would seem more... modal-y*/
   background: transparent url('http://asherman1986-001-site2.smarterasp.net/Images/SiteImages/bgTile_black25.png') repeat;
}

#Fullscreen img
{
    height: 100%;
    display: block;
    margin: 0 auto;
}

.fullCerrar
{
    float:right; 
    background-color:#4A8AC9;
    position:absolute;
    color:#FFF;
    padding:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="slideshow">
  <img src="http://lorempixel.com/150/150/abstract/" width="150px" height="150px" alt="first image">
  <img src="http://lorempixel.com/150/150/sports" width="150px" height="150px" alt="second image">
  <img src="http://lorempixel.com/150/150/cats" width="150px" height="150px" alt="third image">
  <img src="http://lorempixel.com/150/150/nature" width="150px" height="150px" alt="fourth image">
</div>
  </div>
 <div id="Fullscreen">
   <h5 align="center" class="fullCerrar" >Cerrar</h5>
   <img src="" style="z-index:auto" />
</div>
<div class="clearfix"></div>
<div class="row" style="padding-top:13px; padding-bottom:10px; background-color:#4A8AC9">
           <div class="col-md-12" id="Menuopimg">
           <div class="col-md-3"></div>
      <div class="col-md-1" id="prev" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-prev.png" width="40" height="32" alt=""/></a></div>
      		<div class="col-md-1" id="full" style="background-color:#1B1464; padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btnFullScreen.png" width="40" height="32" alt=""/></a></div>
            
            <div class="col-md-1" id="zoom1" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-zoomin.png" width="40" height="32" alt=""/></a></div>
            <div class="col-md-1" id="zoom-out" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-zoomout.png" width="40" height="32" alt=""/></a></div>
        
        <div class="col-md-1"  id="next" style="background-color:#1B1464;padding:15px"><a href="#"><img src="http://lineadetiempoups.ec/img/btn-next.png" width="40" height="32" alt=""/></a></div>
    </div>
</div>