Lightbox Image Viewer

[ LightBox Image #1 ]
[ LightBox Image #2 ]
[ Lightbox Image #3 ]
[ LightBox Image #4 ]
[ LightBox Image #5 ]

Lightbox Image Viewer 2.0 expands upon Lightbox Image Viewer with a few new features. While the original version is great for viewing images individually on the page, Lightbox 2.0 supports a new "grouping" feature that lets you group related images on the page for easy browsing amongst them. The transitional effect for bringing up an image also differs from the original. And like before, this script supports optional caption display, plus incremental preloading of the next image when images are grouped.

We have tested the code in IE 9.0, Firefox16.0.2, Google Chrome 23.0.1271.64m, Netscape 9.0.0.6, Flock2.52, and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy four (2) or (4) part (depending on how you see it) copy and paste code that goes in both the <HEAD> and <BODY> sections of your document.

Step One: You need to save the external.js files (3) (prototype.js), (scriptaculous.js), (lightbox.js) and one (1) external .css file (lightbox.css) and upload them into your directory(s).

Step Two: You need to add a sniplet of code into the <HEAD> section of your document to call the external files (prototype.js), (scriptaculous.js), (lightbox.js) and one (1) external .css file (lightbox.css) you uploaded into your directory.

Snipplet Of Code

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

Once all the above steps are done, the only thing left is to paste the <BODY> section of code where you want the effect to appear.

If you have uploaded the external.js files and (.css) file into a directory other than your root or top directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

For Your Information To use a "Thumbnail" as opposed to a text link for this effect, just modify the below code:

DEFAULT
<a href="Path to uploaded image" rel="lightbox" title="my caption">image</>

RECONFIGURED
<a href="Path to uploaded image" rel="lightbox" title="my caption"><img src="Path To Thumbnail image"border="0" width="?" height="?" alt="Thumbnail"</a>

[ Default Text Link ]

Since the site you get the script from has an excellent howto for this effect, we didnot feel a full tutorial was necessary. If however, you feel you need a tutorial built for this, just contact us and it would be our pleasure to make one. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Scripts In Conflict ]