les cuento, quiero hacer algo como un pequeña galeria de imagenes. Y tengo el siguiente codigo.
Código HTML:
Ver original
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/gallery.css"> </head> <body> <div id="page"> <!-- galeria 1 --> <div class="gallery"> <!-- imagen activa --> <div class="gallery-images"> <img class="gallery-active" src="images/test_large.jpg" /> </div> <!-- thumbs --> <div class="gallery-thumbs"> <img src="images/prueba_thumb.jpg" /> <img src="images/test_thumb.jpg" /> </div> </div> <!-- galeria 2 --> <div class="gallery"> <!-- imagen activa --> <div class="gallery-images"> <img class="gallery-active" src="images/test_large.jpg" /> </div> <!-- thumbs --> <div class="gallery-thumbs"> <img src="images/prueba_thumb.jpg" /> <img src="images/test_thumb.jpg" /> </div> </div> </div> </body> </html>
Código Javascript:
Ver original
(function($){ $(document).ready(function(){ $('.gallery-thumbs').on('click','img', function(){ $(OBTENER EL .gallery-active ANTERIOR).attr('src',$(this).attr('src').replace('thumb','large')); console.log("cambio"); }); }); })(jQuery);
lo que necesito es manejar la img que tiene class "gallery-active" pero como ven esta se repite (es la idea) por lo cual necesito manejar el img "gallery-active" anterior.
he intentado con .prev()