I'm currently working on developing an Ecommerce Item gallery. My main goal is to have the selected image appear in a lightbox once clicked. So far, everything works as expected except for one issue - when a user selects a second thumbnail, the lightbox only displays the first image's href instead of the selected one. It seems that the 'href' attribute is not updating correctly when switching between thumbnails. The same problem also occurs with passing the caption through the "alt" attribute.
Below is the code I am using:
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image img').fadeOut("slow", function(){
$('#image a').html('<img src="' + image + '"/>');
$('#image a').fadeIn('slow');
});
return false;
});
});
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
$("#image a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
$overlay.click(function(){
$overlay.hide();
});
To see a demo, please visit here