jQuery Lightbox2 not working

Question

I don't know why LightBox is not working. When I click on the image, it goes to the link of the page, rather than have the "lightbox" fade-in to show the image. I console.logged and I get no error messages.

P Gallery | View Portfolio

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="dist/css/lightbox.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/script.js"></script>
    <script src="dist/js/lightbox.js"></script>

</head>


        <section>
            <div class="container">
                <h1 id="heading">All Projects</h1>
                <ul id="gallery">
                    <li class="design" ><a href="img/web1.jpg" data-lightbox="example-set" data-title="Project 1" data-desc="abc"><img src="img/web1.jpg"></a></li>
                    <li class="programming" ><a href="img/web2.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web2.jpg"></a></li>
                    <li class="cms" ><a href="img/web3.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web3.jpg"></a></li>
                    <li class="cms" ><a href="img/web4.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web4.jpg"></a></li>
                    <li class="design cms programming" ><a href="img/web5.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web5.jpg"></a></li>
                    <li class="design cms programming" ><a href="img/web6.jpg" data-lightbox="example-set"  data-title="Project 1" data-desc="abc"><img src="img/web6.jpg"></a></li>
                </ul>
            </div>
        </section>

score 12 · Accepted Answer · answered Dec 13 '15 at 02:30

12

Load the lightbox javascript file at the end of your body tag. Worked for me. apparently lightbox need the DOM ready to parse the images/links.

answered Dec 13 '15 at 02:30

Phrozen

559
4
13

2

Yeah but that should be on the library and it is not documented. I guess the right call is raising an issue at Github. – Phrozen Dec 13 '15 at 04:29

score 2 · Answer 2 · answered Feb 05 '17 at 07:23

2

You can init lightbox on page load:

$(document).ready(function(){
  lightbox.init();
});

answered Feb 05 '17 at 07:23

Artem P

5,198
5
40
44

Sorted me out thanks, Its better than moving the javascript tag to the bottom of the application.html – john seymour Mar 12 '18 at 12:42

score 0 · Answer 3 · answered Jul 25 '18 at 08:27

0

This problem happens for the dependency of jquery and its proper version.

In my case, I load the lightbox-plus-jquery.min.js before the jquery and other js files at the bottom of the body. That's jsut working fine.

answered Jul 25 '18 at 08:27

sybozz

867
8
7

jQuery Lightbox2 not working

3 Answers3