Lightbox2没有启动

Question

Ok so what I thought would take me few minutes to implement has now taken up over an hour of my time and I'm just completely puzzled.

I downloaded lightbox2 , followed the instructions; embedding their CSS and JS in the head of my index.html

<link href="lightbox/lightbox.css" rel="stylesheet">
<script src="lightbox/lightbox-plus-jquery.js"></script>

I am only testing it on localhost if that makes any difference. The paths are set correctly 100% and so are the paths to the 4 images the CSS requires..

Now in my body I am using the a href with the data-lightbox attribute like this

<a class="example-image-link" href="gallery/i1.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i1.jpg" alt="desc">
</a>
<a class="example-image-link" href="gallery/i2.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i2.jpg" alt="desc">
</a>

There is nothing else on the page so the result looks like this:

The issue is that when I click one of the images, instead of the lightbox popping up the image just opens in a fullscreen tab. It's like the lightbox is not working at all, and it just follows the a href to the image.. I even tried JSFiddle and loaded the same CSS and JS as external resources and it's doing the exact same thing. See for yourselves -> JSFIDDLE

I am open to any ideas.. Really don't understand what am I missing.

Answer 1

You should move the <script src="lightbox/lightbox-plus-jquery.js"></script> bit to the end of your body tag in the HTML, instead of the head . The problem is that if the script is in the head, it will run before the images are ready to be parsed by the library.