Posted under » JavaScript on 13 March 2009
This was a very popular script which big companies like Apple is using on their websites.
Go and download the files here.
You can read the instructions on how to install it which I find pretty straight forward and effortless.
Activation is a cinch.
To make it work, you need to load a couple of things
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> <link href="css/lightbox.css" rel="stylesheet" />
For some reason only jquery-1.7.2 would work. In addition make sure the images are linked properly in the js and css. The images are.
If you want colour on your img border, then
.class img {border: 1px solid #CB4B21; } .class img:hover{ border: 1px solid; }
Then on the body.. you need to add a rel=lightbox tag on the ahref tag.
<a title="Fender" rel="lightbox" href="images/image-1.jpg">image #1</a>
Click on the link here or the image below.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a rel="lightbox[fireworks]" href="images/image-1.jpg">image #1 </a> <a rel="lightbox[fireworks]" href="images/image-2.jpg">image #2 </a> <a rel="lightbox[fireworks]" href="images/image-3.jpg">image #3 </a>
Click on either one of the images below.
These are photos taken by me. If you like to see more, click here.