Lightbox2 not initiating

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.

Seems to be working fine for me **Codepen** http://codepen.io/noobskie/pen/OyxyrP Could be the way your loading your scripts? — NooBskie, Oct 14 '15 at 08:59
and with the same sources as I did, correct? How's that possible? — Cream Whipped Airplane, Oct 14 '15 at 09:01
Yep using the same ones that you used in jsfiddle @1cgonza is on to something — NooBskie, Oct 14 '15 at 09:02

score 11 · Accepted Answer · answered Oct 14 '15 at 09:01

11

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.

answered Oct 14 '15 at 09:01

1cgonza

1,589
10
20

I just figured that out myself... I swear I read the instructions 5 times and only the 6th time I notice it says "Include the Javascript at the bottom of your page before the closing
tag" Really sorry about this post..
– Cream Whipped Airplane Oct 14 '15 at 09:05
Perfect solution. It's the only one I've found that has worked. – Daniel Dec 10 '15 at 02:06

Lightbox2 not initiating

1 Answers1