带有灯箱的图片库-图片链接未正确交换

Question

我正在尝试创建一个电子商务项目图库。 我希望它能够显示选择显示在灯箱中的图像。 一切工作正常，除非用户选择第二个缩略图，否则它不会显示在灯箱中。 灯箱仅显示第一张图片href。 选择另一个缩略图后，似乎“ href”未正确交换。 通过“ alt”属性传递标题时也会发生这种情况。

这是我的代码。

    $(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>'); //Stores Jquery Handler within a Variable.
var $image = $("<img>"); 
var $caption = $("<p></p>");

// Add Image to overlay
$overlay.append($image);
// Add Caption
$overlay.append($caption);
// Add overlay
  $("body").append($overlay); 


// Capture the click event on a link to an image.
$("#image a").click(function(event){
    event.preventDefault(); //Prevents the  browser from loading the link in a new page!
    var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link.
    $image.attr("src", imageLocation);

  // Show the overlay.  
    //console.log(href);
    $overlay.show();


  // Get Childs Alt attribute and set caption. (Childs Image Alt Attribute)
  var captionText = $(this).children("img").attr("alt"); 
  $caption.text(captionText);
});

//3. When overlay is clicked

$overlay.click(function(){
//3.1 Hide the overlay  
$overlay.hide();


});

这是一个演示

Answer 1

// variables from images to hold onto
var url = "http://www.myorderdesk.com/Providers/832880/Files/7/image_1.jpg";
var caption = "This is the first caption";

// initialize the overlay 
$("#overlay").html('<img src="' + url + '"/><br>' + caption);

$(function() {
    $(".galleryImage").click(function() {
        // save the url and caption when clicking on gallery image
        url = $(this).attr("rel");
        caption = $(this).attr("alt");

        $('#image img').fadeOut("slow", function(){
           $('#image a').html('<img src="' + url + '"/>');
           $('#image a').fadeIn('slow');
       });
       return false;
    });
});

// when the user clicks on the enlarged image
$("#image").click(function(event){

    $("#overlay").css("display", "block");
  // Update overlay with the image linked in the link.
    $("#overlay").html('<img src="' + url + '"/><br>' + caption);

});

//3. When overlay is clicked
$("#overlay").click(function(){
    //3.1 Hide the overlay  
    $("#overlay").css("display", "none");
});

这个小提琴可能会让您入门。

我建议阅读一些有关jQuery，Javascript和CSS的入门指南。 我认为您做错的地方不是完全了解jQuery选择器的工作方式。

尝试也使您的CSS ID和类保持良好的命名。 当它们全都被称为image ，可能很难解读什么是什么。

此外，您还可以使用基于jQuery构建的预制灯箱，这些灯箱的响应速度更快，并为您提供更多功能。 如果这是给客户的，我会看看那些可以启发或生产的产品。