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 .
Filed under: Uncategorized
