Looking for a suitable script for the popular lightbox presentation to show my web students – I went online to do some research and was quite taken back with the number of different techniques now used.  With jQuery being such a light and apparently designer-friendly script – it was no surprise to find it in use extensively. I came across this great post: 10+ promising jQuery Lightbox-Clones Plugins by insicDesigns. This list shows various different techniques and makes for interesting experimenting :)

If you want to have a play around yourself – please do refer to the original sources for specifics. You will also need the jQuery JavaScript library itself, or link to it. You can download the latest version from the Google code library.

FancyZoom
Initially the FancyZoom by orderedlist looked excellent – a very quick response and simple presentation. The demo works very smoothly and for a limited amount of images – this technique can be suitable. FancyZoom works by referencing IDs between the link and the chosen content within a container with the same ID. This essentially means that all content will have to be put into the HTML itself.
<div class=”photo”>
  <a href=”#beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
  </a>
</div>

The ID referred to in the link is then referenced to the ID assigned to the DIV containing the content to be zoomed.
<div id=”beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
</div>

This can of course add weight to the page, in case of the CSS or JS failing – in which case all images will appear on the page – and add to the amount of code in the HTML document itself. In cases where only very few images are on display – this technique can work well.

FaceBox
Looking for an alternative which would not required the extra DIVs for zoomed content – I found FaceBox. This technique can be used to show images, text or even another HTML file. The use for an image gallery here allows for multiple images as no added HTML is needed. Once the JS function is active – the image get loaded on demand.
 <a href=”beach1.jpg” rel=”facebox”>
    <img src=”images/beach1_thn.jpg” alt=”beach photo” />
 </a>

Much cleaner in its application – these options are very useful indeed :-)

jQuery lightBox
My favourite however still remains based on the original LightBox JS by Lokesh Dhakar. Now faster and just as customisable as the original – the new version is using jQuery, written by Leandro Vieira Pinho.
This lightbox plugin allows you to assign the presentation effect to an ID assigned to the DIV containing the image links. The styling of presentation and visuals is highly flexible and great to work with.
<style type=”text/javascript”>
$(function() {
$('#photos a').lightBox();
});
</style>