Lightbox 2: Dynamic image overlay
From PixyWiki
Lightbox2 is an excellent script by Lokesh Dhakar which allows overlaying of images on the same page and also paging to next/previous images in the same set. Your pixyBlog can use this script on the Thumbnails, Archives and Galleries pages. The script is dependent on both the prototype and script.aculo.us scripts, so to get it working you will need the following in the <head> tag of your HTML page:
## load the CSS files for external JS libraries <link rel="stylesheet" href="$url.site/theme/scripts/lightbox/css/lightbox.css" type="text/css" media="screen" /> ## load the scriptaculous JS libraries <script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/prototype.js"></script> <script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/effects.js"></script> <script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/scriptaculous.js"></script> ## load the scriptaculous dependent JS libraries <script type="text/javascript" src="$url.site/theme/scripts/lightbox/lightbox.js"></script>
All you then have to do is mark any images you want to overlay by adding the rel attribute to the a tag, like so:
<a href="link_to_larger_image.jpg" rel="lightbox[thumb]" title="Sunset"> <img src="link_to_thumb_image.jpg" width="100" height="60"> </a>
You will need to change the target for your link from the URL of your entry to the URL of the image file. So use $url.photo($image.path) in place of $url.entry($entry.anchor).
It is also possible to create links from the overlayed image to another page. We use this to link to the entry pages for each image by adding the name attribute to the a tag where the actual link has to be URL encoded, like so:
<a href="link_to_larger_image.jpg" rel="lightbox[thumb]" title="Sunset" name="<a href="http://www.yourdomain.com/link.html">My Link</a>"> <img src="link_to_thumb_image.jpg" width="100" height="60"> </a>
For more information check-out the following: