Lightbox

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.

Example: click here

You can also use a set of images that you can group them into on gallery.

How to use the lightbox

Its easy, you just need to place the right, left, and the close gifs to your folder where your images are and then include some css styles to your css or you can use the pre-build css that is located in the download folder. After that all you need to do is to add the attribute to your images.

To know how to install and use LightBox read the full post.

Here I will show you the detailed mode to setup and use lightbox:
Part 1 – Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.
You will need to include these three Javascript files in your header.

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

2. Include the Lightbox CSS file (or append your active stylesheet with the
Lightbox styles).

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif
files are in the right location. Also, make sure the loading.gif and closelabel.gif
files as referenced near the top of the lightbox.js file are in the right location.
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” title=”my caption”>image #1</a>

Optional: Use the title attribute if you want to show a caption.

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>

No limits to the number of image sets per page or how many images
are allowed in each set. Go nuts! :)

You can download lightbox from here

All the free vectors from WDB - Garcya.us downloaded as a regular member are available for personal use only! If you would like to use the vectors downloaded from WDB - Garcya.us you should know that there is a commercial license available. Commercial license is available for Premium Members, for only $20 / life (one time fee). To join Premium Membership and benefit from commercial license, direct download links and premium vector content please visit this link.

Don't miss any free vector graphics! Subscribe to the newsletter for free Enter your email below to receive a newsletter everytime free vector graphics are added. Join over 20.000+ subscribers that are enjoying free vector graphics.