Lightbox

Posted under » JavaScript on 13 March 2009

This is a very popular script which even big companies like Apple is using on their websites. This is not flash and won't work in flash that well despite many attempts. However, I've devised a simple workaround for this problem.

Go and download the files here or 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.


web security linux ubuntu GIT svn Raspberry apache mysql php drupal cake symfony javascript Ajax css