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

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

• javascript
• jquery
• html
• lightbox2

Share Improve this question Follow asked Oct 14, 2015 at 8:49 Cream Whipped AirplaneCream Whipped Airplane 1,36733 gold badges1313 silver badges3232 bronze badges 3

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.