LIGHTBOX Tutorial

Lightbox is a useful JavaScript, which allows you to watch photos in a semi-transparent overlay to your site. When you click on a link, the picture is shown above the content of your page, which frees you of limitations like columns.

This tutorial is about setting up Lightbox to work on your page.

STEP 1: download lightbox.js , lightbox.css ,prototype.js,scriptaculous.js,effects.js and builder.js

 

STEP 2: Create a folder “launchpad” and “js” , “css” and “image” sub folder inside “launchpad” folder.

NOTE:- you can create a folder structure according to your wish also .

In “js” folder , keep all js files like:

lightbox.js ,prototype.js,scriptaculous.js,effects.js and builder.js

In “css” folder . keep lightbox.css file.

In “images” folder , keep all your images that you want to be displayed as photo gallery.

STEP 3: keep “lauchpad” folder inside C:\ drive

NOTE:- you can put this folder anywhere according to your wish but then you have to take care of Path of these folder.

STEP 4: Create lightbox.html page (you can rename your filename also.)

source code of lightbox.html :-

 

<html>
<head>
<title> Lightbox Example</title>
<link rel=”stylesheet” href=”c:/lightbox/css/lightbox.css” type=”text/css” media=”screen” />

// Lightbox.css :- for lightbox layout designing
<br/>
<script src=”c:/lightbox/js/prototype.js” type=”text/javascript”></script>
//prototype.js :-This will call to a needed Javascript file, ‘prototype.’ Without prototype, Lightbox WILL NOT function.
<br/>

<script src=”c:/lightbox/js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>

//scriptaculous.js :- Above statement  Not only  it calls to scriptaculous, but it will also call to effects.js and builder.js. Scriptaculous has a feature that will load the needed JS files with itself, hence the ?load after scriptaculous.js

<br/>

<script src=”c:/lightbox/js/lightbox.js” type=”text/javascript”></script>
//Lightbox.js

</head>
<body>
<h1>Light Box Example</h1>
<br/><br/>
<a href=”c:/lightbox/images/a.jpg” rel=”lightbox” title=”Gallery”>What is it?</a><br/><br/>

// The beauty of Lightbox is that you only need to call to it in link attributes, and not image attributes. <br/>
// rel=”lightbox” tells the webserver that the relation of this link is Lightbox, so, it will link Lightbox.js and all other JS files to the link. <br/>
// Title is optional, it will be displayed below the image<br/>
// Now, we’ll link some images together, commented code will be after so you understand.<br/>

<br/><br/>

<a href=”c:/lightbox/images/a.jpg” rel=”lightbox[outdoors]”>Gallery 1</a><br/>
<a href=”c:/lightbox/images/b.jpg” rel=”lightbox[outdoors]”>Gallery 2</a><br/>
<a href=”c:/lightbox/images/c.jpg” rel=”lightbox[outdoors]”>Gallery 3</a><br/>
<a href=”c:/lightbox/images/d.jpg” rel=”lightbox[outdoors]”>Gallery 4</a><br/>
<a href=”c:/lightbox/images/e.jpg” rel=”lightbox[outdoors]”>Gallery 5</a><br/>
<br/><br/>
//Everything is the same as above, except that we’ve added within brackets the word ‘outdoors.’ Outdoors links those five images together so that we will get ‘Next’ and/or ‘Previous’ linkings within Lightbox.
</body>
</html>

copy and paste this code into lightbox.html file

NOTE: –

<a href=”c:/lightbox/images/a.jpg” rel=”lightbox[outdoors]”>Gallery 1</a><br/>
<a href=”c:/lightbox/images/b.jpg” rel=”lightbox[outdoors]”>Gallery 2</a><br/>
<a href=”c:/lightbox/images/c.jpg” rel=”lightbox[outdoors]”>Gallery 3</a><br/>
<a href=”c:/lightbox/images/d.jpg” rel=”lightbox[outdoors]”>Gallery 4</a><br/>
<a href=”c:/lightbox/images/e.jpg” rel=”lightbox[outdoors]”>Gallery 5</a><br/>

In the above code ,

you   can rename your image name as well as you can use “n”  number of images that has to be displayed.

suppose , i can add other statement in above code,like this

<a href=”c:/lightbox/images/hello.jpg” rel=”lightbox[outdoors]”>Gallery 6</a>

STEP 5: In lightbox.css,

change  path of images for these attributes

fileLoadingImage:        ‘c:/lightbox/images/loading.gif’,     
 fileBottomNavCloseImage: ‘c:/lightbox/images/closelabel.gif’,

STEP 6: run lightbox.html page and click on  any of links to see lightbox effects .

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: