带有/ Lightbox的图片库-图片链接未正确与其他人交换

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


});

这是Demo

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

这个fiddle 可能会帮助您入门。

我建议阅读一些 jQuery、Javascript 和 CSS 的入门指南。我认为你出错的地方是没有完全理解 jQuery 的选择器是如何工作的。

也尽量保持你的 CSS ID 和类的好名。当它们都被称为image 时，可能很难破译什么是什么。

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