Buenas tardes,
estoy haciendo un plugin sencillo para una galería de fotos.. en verdad varias galerias y es aqui donde me viene el problema..
Esta es la estructura de cada geleria, hay mas de una en una misma página:
div.viewer: carga la foto ampliada en la imagen que la contiene.
div.thumbs: contiene las imagenes en miniatura de la galeria, al clickearlas muestra la imagen grande.
Código HTML:
Ver original<div class="photo-gallery"> <a href=""><img src="" width="100" /></a> <a href=""><img src="" width="100" /></a> <a href=""><img src="" width="100" /></a>
Aplico el plugin a todas las galerias que encuentre en la pagina
Código Javascript
:
Ver original$('.photo-gallery').photoGallery(); //
Y el problema en sí con el plugin es el siguiente:
Código Javascript
:
Ver original(function($) {
$.fn.extend({
photoGallery: function() {
// agrego los event listeners a cada miniatura
$(this).find('a').live('click',function(e){
e.preventDefault();
thumb = $(this);
larger = thumb.attr('href');
thumb.parent().parent().find('.viewer').find('img').attr('src',larger);
});
// sin problemas hasta aqui
$(this).find('.viewer').find('img').attr('src','url_primera_imagen_del_album.jpg');
}
});
})(jQuery);
Lo que intento hacer es que cargue en todas las galerías la primera imagen en el div.viewer, y lo que sucede es que me carga la misma imagen en todas las galerias.
Como si el $(this) hace refereria a todas las galeria y no a cada una en particular..
Hay forma de solucionar ésto?
Espero haberme explicado bien..
Muchas gracias por su ayuda!
Saludos