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

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

Share It :

More

Related posts

  • http://www.Garcya.us Garcya

    If you have any questions at all please feel free to ask here.
    Good luck :)

  • Website Design

    The “How to Use” part is elaborate and dealt in great detail………it would really help those thinking of using Lightbox.

Shares
Share This

Sharing is caring!

Sharing this is the only way you can help us create even more free vectors and freebies for you! Thanks!