CODEWITHSUNDEEP
jquerylightbox
Gabe
Gabe

Reputation: 35

Using the .next() method to update image link in lightbox

I have an image gallery and when an image is clicked, a lightbox appears with the clicked image appended to it. The lightbox also has a button appended to it. I'm trying to write the code so that, when the button is clicked, the current image is detached from the lightbox and the next image in the gallery is appended to it.

Any suggestions on where I'm going wrong would be greatly appreciated.

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

Everything works apart from

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

when the button is clicked on it doesn't show the next image. The lightbox simply hides.

Upvotes: 0

Views: 207

Answers (1)

renakre
renakre

Reputation: 8291

Please use this:

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

});

Upvotes: 1

Related Questions