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.

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 python django git Raspberry apache mysql php drupal cake javascript css AWS data