UPDATE: Cool Web Effects - Lightbox Image Viewer 2.03a

As you may well have observed by now, the effect is not working any longer on my blogger as Google has adapted a similar approach to view images.

I had, in that particular post, included the script in my heading and body, but these are conflicting with Google's implementation.

However, you can still follow the directions and apply to Wordpress or your own web-site.

Below is the original post:

The Lightbox Image Viewer 2.0 expands upon the original 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. Very nice!

Demo 1: (individual images):

(Note: caption for "Evi" is hyperlinked, v2.03a feature)

Demo 2: (grouped images set. After an image has enlarged, you can move between images by clicking on the right/left edges of the enlarged image):

---

Directions:

Simply download Lightbox V2.03a, and refer to the index file inside for installation instructions. If you're merely upgrading from v2.03 to v2.03a, simply refresh the following file:

lightbox.js (v2.03a)
EDIT: you have to ensure all the Javascript is uploaded to your domain server in appropriate named folder (js and css), i.e. in the below code you would have to add http://www.yourdomain.com AFTER src=" for it to work properly ..example

<script type="text/javascript" src=">http://www.yourdomain.com/js/prototype.js"></script> although you have it pointed anyways on your header. 

Same with href="http://www.yourdomain.com/css/lightbox.css 

Alternatively I offer my server location:   

<script type="text/javascript" src="http://www.kalspeedflix.com/js/prototype.js"></script> 
<script type="text/javascript" src="http://www.kalspeedflix.com/js/scriptaculous.js? load=effects"> </script>
<script type="text/javascript" src=">http://www.kalspeedflix.com/

js/lightbox.js"> </script>
<link rel="stylesheet" href="http://www.kalspeedflix.com/css/lightbox.css" type="text/css" media="screen"/>

 Installation instructions

Just for your reference, the installation instructions are repeated below.

Step 1: Insert the below code in the HEAD section of your page:

<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"/>

Lightbox v2.0 uses the Prototype Framework and ScriptaculousEffects Library.

Step 2: Create your "thumbnail" image links,
for example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">
image #1</a>

EDIT:  as above with the Javascript and CSS file, you must have your images stored on a server somewhere.

i.e. <a href="http://www.yourdomain/images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.yourdomain.com/">image #1</a>

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image. The "href" attribute obviously should contain the path to the enlarged image. If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption"
rev="http://sublimemaxxus.blogspot.com/">image #1</a>

LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1
</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2
</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3
</a>

As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case. Grouped images can be cycled through by clicking on the right/left edges of each
enlarged image.

That's it! Enjoy this superb script. Remember, there's also LightBox V1 if you don't need the grouping feature and just want an elegant transition effect to bring up each image.

Notes

For your information, inside lightbox.js, there are a few configurable variables:

// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
var resizeSpeed = 7; // controls the speed of the image resizing
(1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you
will need to update this variable

Posted in: Free Downloads,Tricks,Tweaking,Web Tools