CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3847141
user3847141

Reputation: 253

lightbox doesn't disappear in jquery version 1.9.0 and after

So i tried making this lightbox

css

#wrapper{
    width: 100%;}

#locandine{
    padding-top: 6%;
    width: 66.5%;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;}

#locandine a{
    width: 24%;
    vertical-align: top;
    display: inline-block;
    *display: inline;}

.loc img{
    width: 100%;
    max-height: 432px;}


#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.5);
    text-align:center;
}

#lightbox img{
    max-height: 90%;
}

html

<body>
<div id="wrapper" align="center">
    <div id="locandine" class="locandine">
        <h1>Locandine</h1>
        <a href="pagine/immagini/loc1.png" class="loc">
            <img src="pagine/immagini/loc1.png" alt="loc1">
        </a>
        <a href="pagine/immagini/loc2.png" class="loc">
            <img src="pagine/immagini/loc2.png" alt="loc2">
        </a>
        <a href="pagine/immagini/loc3.png" class="loc">
            <img src="pagine/immagini/loc3.png" alt="loc3">
        </a>
    </div>
</div>

</body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

javascript

jQuery(document).ready(function($) {

    $('.loc').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }

        else { 
            var lightbox = 
            '<div id="lightbox">' + //insert clicked link's href into img src
                '<img src="' + image_href +'" />' +
            '</div>';
            $('body').append(lightbox);
        }

    });

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

});

The problem is that the lightbox doesn't disappear when i click it if i use jquery versions 1.9.0 and after (i'm using http://code.jquery.com/jquery-|versionHere|.js). So how can i fix this problem, do i have to change part of the code or change jquery library?

Upvotes: 0

Views: 102

Answers (1)

Terry
Terry

Reputation: 66133

.live() has been deprecated as of v1.7 in favour of .on(). It is always a good idea to check your browser console for error messages — I'm quite sure this would've thrown an error :)

Therefore, you should use:

$('document').on('click', '#lightbox', function() {
    // Function to close lightbox here
});

The above code effectively listens to the click even bubbling from the lightbox element at the document object :)

Upvotes: 1

Related Questions