You are here: Home > Web Design > Enlarged Images Tutorial

Enlarged Images Tutorial

Wednesday, 20 December 2006

Pop up boxes are dead.

They have been for a while. Replaced now with Ajax based creations and DHTML popups.

At the request of a few visitors, here is a tutorial on implementing Lightbox JS 2.
 
The image below shows what happens to the images when Lightbox JS 2 is used:

Lightbox 2 Example

Okay, so not a great image but I shall explain what happens.

Your visitor clicks on the picture and Lightbox JS 2 darkens the background and shows a full sized version of the image. This script is great for thumbnail galleries or showing small sections of pictures encouraging users to view the full picture.

It is also good for slideshows as you can group images together.

Here are the instructions to get you going:

  1. Download the script at http://www.huddletogether.com/projects/lightbox2/#download
  2. Unzip the package to your hard drive.
  3. Upload the files using your FTP client in exactly the same structure as you downloaded (make sure you have a js folder and a css folder)
On the page that you would like to use Lightbox JS 2, you have to do a few more things to get it working.

Firstly, in the <head> tag of your HTML file, add the following lines of code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Make sure this link to your files that you uploaded else you will find the script does not work. In fact, you will know if there is an error if when you click on your picture (which you have not yet linked) and you see it load in your browser on a separate page.

Let's get it working.

Let's assume we have a picture called dog_small.jpg and one called dog.jpg. dog_small (not suprisingly) is a thumbnail of dog.jpg. The way we would code this (in XHTML) is as follows:

<a href="images/image-1.jpg" rel="lightbox" title="Enlarge my Dog photo"><img src="Dog photo thumbnail" alt="Dog photo thumbnail" title="Dog photo thumbnail" width="150" height="80"</a>

The important bit is the rel="lightbox" section. This activates the script that darkens your screen and shows an enlarged image.

You can see this working over at Clarion Nav HD 868 Satellite Navigation System Price Comparison.

To produce a slideshow, add square brackets to the rel="lightbox" tag. So for example, I have three photos of dogs, I would use the rel="lightbox[dogshow]" tag on all three to create a slideshow.

The official site has a
slideshow example.

That's it!

It is that simple.

Bookmark Bookmark this article in Bumpzee, Del.icio.us, Digg and Stumble Upon
Technorati Technorati tags: , , ,

You may also be interested in reading:

CommentsCare to Comment?

Comments are manually approved and hence can a while to appear. Questions, informative posts, and feedback comments are gladly accepted. Spam is deleted. Spam-type comments have their links removed (Comment Policy)