Thursday, December 22, 2011

How to Use LightBox

i am giving some steps to implement LightBox in your page.

 1.  Download good looking CSS and JAVASCRIPT from internet 
2.     create new folder and give it name "LightBox Tutorial"   at any where in your hard drives.

3.     paste LightBox downloaded Zipped file in "LightBox Tutorial" folder.

4.    rightclick on   then click extract here.

5.  paste any 4 jpg file (small size) in "LightBox Tutorial" folder..
     example.  1.jpg,2.jpg,3.jpg,4.jpg 

6.  open notepad 

<title>Light Box Tutorial</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<a href="1.jpg" rel="lightbox[adi]"><img src="1.jpg"></a>
<a href="2.jpg" rel="lightbox[adi]"><img src="2.jpg"></a>
<a href="3.jpg" rel="lightbox[adi]"><img src="3.jpg"></a>
<a href="4.jpg" rel="lightbox[adi]"><img src="4.jpg"></a>
<a href="5.jpg" rel="lightbox[adi]"><img src="5.jpg"></a>

8. paste html code in notepad  written in step 7.

9. save it aditya.html

10. open aditya.html in internet and enjoye.....

NOTE:--  in <Head> section we link our css file.
                 and add javascript file using <script> tage in <head> section.
                 in <a> tage section we are using rel ="lightbox[adi]" for relate lightbox transition.
                 in place of "lightbox[adi]" we can use "lightbox"  then we cant use NEXT button on image .

DownLoad Tutorial 

1 comment: