i am giving some steps to implement LightBox in your page.
1. Download good looking CSS and JAVASCRIPT from internet
example: http://www.huddletogether.com
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 lightbox2.05.zip 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
7.
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>
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
DownLoad Tutorial
gajab bahi
ReplyDeletewhat mind my dear frd