Lightbox

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.

• prev.png
• next.png
• loading.gif
• close.png
• bullet.gif
• box.png

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.