3

estoy desarrollando una galería a modo de slider, he logrado la funcionada de transición, pero quiero hacer un fullscreen pero no puedo capturar el src del img actual, siempre me captura el primero.

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>

3
  • Porque no pones el código completo en Snippet, no se puede llevar a cabo la programación imaginando donde puedes tener el Fullscreen y como funciona en productivo el slider. Yo imagino que las imágenes están pasando una después de otra y después cuando haces en algún botón Fullscreen es ahí donde tu quieres que la misma imagen se siga viendo, pero no, en lugar aparece tu imagen llamada 4.jpg el 1 jul. 2016 a las 22:11
  • Hola convertí el código a stack sinppet , al parecer faltaría el css escencial, si puedes agregarlo será más fácil ayudarte. Saludos! el 2 jul. 2016 a las 15:32
  • Ya lo agregé, esta lista, espero me ayudes. el 2 jul. 2016 a las 16:43

1 respuesta 1

1

El problema está en cómo seleccionas la imagen que vas a poner a pantalla completa:

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();
}

En ese código, cuando haces:

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

estás seleccionando todas las imágenes dentro del slideshow ($('.slideshow img')) y te quedas con el src de la primera. Lo que te interesa es quedarte con la imagen que está activa en ese momento y eso lo puedes hacer seleccionando la imagen que esté visible (porque las que no estén activas estarán escondidas).

Entonces sólo tendrías que cambiar el selector a algo como esto:

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

Haciendo ese cambio, el código quedaría así:

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>

7
  • Perfecto, algo tan simple.. Pero quiero hacer una consulta adicional, como puedo hacer el zoom in y zoom out de las images.. he intentando algunas cosas pero no logro hacerlo, alguna idea que me puedas ayudar? el 3 jul. 2016 a las 1:14
  • @AlldesignWeb lo del zoom in y out va a depender de cómo quieras hacerlo. Podrías aplicarlo directamente a la imagen cambiando el valor del atributo zoom en CSS (sencillo pero sólo se aplica a imagen activa); o podrías aplicar una clase al slideshow y que ese zoom se aplique a todas las imágenes (requiere algo más de código, pero es más consistente)
    – Alvaro Montoro
    el 3 jul. 2016 a las 1:19
  • Solo el zoom sería para la imagen activa, como lo haría por css? el 3 jul. 2016 a las 16:01
  • Ya logre el zoom, ocupen el plugin panzomm. Gracias el 4 jul. 2016 a las 18:19
  • @AlldesignWeb Perdón por la respuesta tardía, podrías cambiar el valor de la propiedad zoom (inicializándola a 1) y subiendo/bajando 0.1 cuanod se pulse en el + o - respectivamente, sin necesidad de plugins adicionales
    – Alvaro Montoro
    el 8 jul. 2016 a las 14:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.