Search code examples
javascriptjqueryhtmllightbox2

Lightbox2 not initiating

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: result

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.

Solution

  • 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.