-4

I have been using this code to get a simple lightbox working on a site of mine.

And I tried to modify it slightly so:

a) The lightbox fades in- Done

b) The script pulls in the src attribute not the href- Done

b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.

Issues

With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?

Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.

Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.

JS: 

$(document).ready(function() { //Document Ready


$('.inner_img').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();
    //Get clicked link href
    var image_src = $(this).attr("src");
    // Get Description
    var desc = $(this).attr("data-description");
    /*
    If the lightbox window HTML already exists in document,
    change the img src to to match the href of whatever link was clicked
    If the lightbox window HTML doesn't exists, create it and insert it.
    (This will only happen the first time around)
    */
    if ($('#lightbox').length > 0) { // #lightbox exists
        //place href as img src value
        $('#content').html('<img src="' + image_src + '" />');
        // Change Description in the P tag
        $('.desc').html(' '+ desc +' ');
        //show lightbox window - you could use .show('fast') for a transition
        $('#lightbox').fadeIn(); // Fades it in
    }
    else { //#lightbox does not exist - create and insert (runs 1st time only)
        //create HTML markup for lightbox window
        var lightbox =
        '<div id="lightbox">' +
            '<p>Click to close</p>' +
            '<div id="content">' + //insert clicked link's href into img src
                '<img src="' + image_src +'" />' +
                '<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
            '</div>' +
        '</div>';
        //insert lightbox HTML into page
        $(lightbox).hide().appendTo("body").fadeIn();


    }
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM

    $("#lightbox").fadeOut(); // Fades it out
});



}); // End

Thanks for any help.

EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.

However, why won't my code work for the second issue?

harley_woop
  • 1,739
  • 4
  • 15
  • 28

2 Answers2

2

use event delegation with on -

$(document.body).on('click','#lightbox', function() { 
    $("#lightbox").fadeOut(); // Fades it out
});

Demo ---> http://codepen.io/anon/pen/ywJhe

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
0

You can change

$('.inner_img').click(function(e) {

to

$(document.body).on('click', '.inner_img', function(e) {

so that events occurring after the binding will still be delegated to the new elements.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758