Question

我有一个图片库，当点击图片时，会出现一个灯箱，其中附有点击的图片。灯箱还附有一个按钮。我正在尝试编写代码，以便在单击按钮时，当前图像与灯箱分离，并且库中的下一个图像将附加到其中。

对于我出错的地方的任何建议都将不胜感激。

HTML

    <div class="grid-container imageGallery">
    <div class="grid-3">
        <a href="img/item-01.png">
            <div class='image'>
                <img class="feat-img" src="img/item-01.png" alt='Image by 
                  Bob'/>
                <div class='text'></div>
            </div>
        </a>
        <!-- <p class='caption'>Caption</p> -->
    </div>
    <div class="grid-3">
        <a href="img/item-02.png"><div class='image'>
            <img class="feat-img" src="img/item-02.png" alt='Image by Jim'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    <div class="grid-3">
        <a href="img/item-03.png"><div class='image'>
            <img class="feat-img" src="img/item-03.png" alt='Image by   
                 Johnny'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    <div class="grid-3">
        <a href="img/item-04.png"><div class='image'>
            <img class="feat-img" src="img/item-04.png" alt='Image by Dave'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    </div>

的jQuery

   $(document).ready(function(){
   //Problem: When user clicks on an image they are taken to a dead end.
   //Solution: Create an overlay with the image centered on it - Lightbox

var $lightbox = $('<div class ="lightbox"></div>');
var $lightboxImage = $('<img>');
var $nextLightboxImage = $('<img>');
var $button = $('<div id="nav-icon1"><span></span><span></span><span></span 
                 </div>');
var $caption = $('<p></p>');


//Add an image to overlay
$lightbox.append($lightboxImage);
//Add a caption to the overlay
$lightbox.append($caption);
//Add a button to the lightbox
$lightbox.append($button);
//Add overlay
$('body').append($lightbox);
//Capture the click event on a link to an image
$('.imageGallery a').click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr('href');
    // Update the overlay with the image that is clicked,
    $lightboxImage.attr('src', imageLocation);
    // Show the overlay.
    $lightbox.show();



    //1.3 Get the image alt attribute and set caption.
    var captionText = $(this).find('img').attr('alt');
    $caption.text(captionText);
});
//Append next image in gallery and detach current one when button is clicked  
  on
$button.click(function(){
    var nextImageLocation = $(this).next.attr('href');
    $nextLightboxImage.attr('src', nextImageLocation);
    $lightbox.detach($lightboxImage);
    $lightbox.append($nextLightboxImage);
});
//When the overlay is clicked
    //Hide the overlay.
$lightbox.click(function(){
    $lightbox.hide();
});
}):

除了

之外，一切都有效

  $button.click(function(){
    var nextImageLocation = $(this).next.attr('href');
    $nextLightboxImage.attr('src', nextImageLocation);
    $lightbox.detach($lightboxImage);
    $lightbox.append($nextLightboxImage);
});

单击该按钮时，它不会显示下一个图像。灯箱只是隐藏起来。

Answer 1

请使用此：

$(document).on("click", "#nav-icon1", function(){

});

使用.next（）方法更新灯箱中的图像链接

1 个答案: