I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<a href="img/img1.jpg" data-lightbox="photos"><img src="img/img1thumb.jpg" /></a>
<a href="img/img2.jpg" data-lightbox="photos"><img src="img/img2thumb.jpg" /></a>
<a href="img/img3.jpg" data-lightbox="photos"><img src="img/img3thumb.jpg" /></a>
<a href="img/img4.jpg" data-lightbox="photos"><img src="img/img4thumb.jpg" /></a>
<a href="img/img5.jpg" data-lightbox="photos"><img src="img/img5thumb.jpg" /></a>
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this