Follow us

Tuesday, October 12, 2010

jQuery LightBox Plugin

Introduction

jQuery LightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

Demo

How to use lightbox plugin?

Include JavaScript Files

jQuery LightBox plugin uses the jQuery JavaScript library, only. So, we need to include these two javascript files in your header.


Include CSS file

Include the CSS file responsible to style the jQuery LightBox plugin.

<link href="Styles/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />

HTML Formation

The only necessity is to have a HTML markup as follows:
<a href="Images/Mountains.JPG" class="lightbox" title="A mountain is a large amount of land that rises high above its surroundings">  <img src="Images/Mountains.JPG" /></a>

Call jQuery lightBox plugin.

Next is to call the jQuery LightBox plugin.
See More Examples

NOTE:

You can refer jquery.lightbox-0.5.js to configure the settings of jQuery LightBox plugin.

Download

Sr.NoDownloadSize
1Jquery Lightbox Plugin441.47KB

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

1 comments: on "jQuery LightBox Plugin"

Aashish Khandelwal said...

Note: At first you must include 'jquery-1.2.6.js' file and then include 'jquery.lightbox-0.5.js'

Post a Comment