by John Stephen Jones

Created on: January 18, 2007

So just what are Javascript Libraries?

Javascript libraries are files that can be downloaded from sites such as script.aculo.us (www.script.aculo.us) or jQuery (www.jquery.com). These files can be implemented into your site to make them dynamic.

Javascript Lightboxes
For example you may have an image gallery consisting of thumbnails in an XHTML/CSS coded site. Usually clicking on a thumbnail reveals a larger image in the browser window. Nothing spectacular but as its a static site, your not going to get anything thats dynamic without the use of a script of some sort.

This is where a javascript library could come in handy.

By using a Javascript library called 'Lightboxes' we can achieve this dynamic effect.
All this does is that when you click on a thumbnail, rather than have the image appear in a pop up window or worse open in another window, the larger image is displayed in a container over your page making the page transparent and the image in a neat box above your content. The image is displayed without having to change pages making a pseudo flash kind of effect without using flash or actionscript.
You can see how lightboxes work on a 'live' site by visiting www.have-you-seen-this-man.co.uk (This is Thom Yorke of Radiohead's site for his solo album 'The Eraser'.

The lightboxes have their own CSS files to style the lightbox. The styles will include colours and width and height, plus the spinning loading graphics.
Also an image gallery for the loading graphics, and thumbnails and larger images is put into the Javascript directory folder.

Basically this is how it is set up:

In the head of your (X)HTML file you add the relevant lnks to the Javascript files and Javascript stylesheets.
Where your images are in your XHTML you add in href links to the thumbnail images and the larger images in the Javascript files. All you are doing is making the XHTML call in the Javascript when you click on the thumbnails causing the JS to work its magic.
You can find more about Javascript lightboxes and see the various different scripts in action at the following web sites:

www.jasons-toolbox.com/SlightlyThickerBox

www.d oknowevil.net/litebox

www.ibegin.com/blog/p_ibox.html

http://particletree.com/features/lightbox-gone-wild

T he downside of using these libraries are:

(1)The file sizes are quite heavy for the front end of your site. Lightboxes can be around 100k is size. These can be compressed down in size using programs such as Dojo Shrinksafe http://alex.dojotoolkit.org/shrinksafe/
It is important

• 1
• 2
• Next Page >>