Make image preview Lightbox ver 2

Overview

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

What's New in Version 2

* Image Sets: group related images and navigate through them with ease
* Visual Effects: fancy pants transitions
* Backwards Compatibility: yes!

Example please click HERE
How to Use :


Part 1 - Setup

1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order)

<script src='http://h1.ripway.com/kriep2/lightbox2/prototype.js' type='text/javascript'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://h1.ripway.com/kriep2/lightbox2/lightbox2.js' type='text/javascript'/>
<link href='http://h1.ripway.com/kriep2/lightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

place before the code above ]]></b:skin>

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

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

2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

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

to download their own costumes and you can see in http://www.huddletogether.com/projects/lightbox2/



Related Article for this post :