Question

我正在尝试创建电子商务项目库。我希望能够显示所选择的图像出现在灯箱内。除非用户选择它未在灯箱中显示的第二个缩略图，否则一切正常。灯箱仅显示第一个图像href。似乎＆＃39; href＆＃39;选择另一个缩略图后，未正确交换。这也发生在标题通过＆＃34; alt＆＃34;属性。

这是我的代码。

    $(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的预构建灯箱，您可以使用它们，它们的响应性更强，并为您提供更多功能。如果是给客户的话，我会看看那些灵感或制作的东西。

带有灯箱的图像库 - 图像链接不能正确地与其他人交换

1 个答案: