CeraDigital.com
01-15-2009, 06:40 AM
I've seen a lot of questions on how to use lightbox for your websites on various forums, when it comes to making a photo gallery. Lightbox is an amazing tool that rids the problem you have of having obstructive new windows pop up, new tabs, or loading the image in a new URL. One good use of lightbox is kingsnake.com's classifieds section, with images. I'm going to run you through a quick guide on using Lightbox, thats down to the point.
Lightbox is free to download, and use, without giving credit to the original creators. Its sharp, fast, and quite nice looking. Download lightbox at http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
Click on the link labeled "Simply download Lightbox V2.03a,". Put the folders and files into the same folder as your website, on your computer in order to test it, modify it, and work out any quirks. The 3 folders included are..
-css- contains all the files to give lightbox its appearance, size, and centering properties.
-js- contains all the action and variable commands and scripting to make lightbox operate.
-images- Contains all the images for lightbox to operate visually, including the ajax-loading icon, next & previous tabs, and the close tab.
The only two folders you will need to modify if you want to edit lightbox for a custom theme are the .css file, and the images. You will not need to edit the javascript files. The js files are already configured fairly well for a proper loading time & such.
To install
Simply add this coding into the head of your website. You can do this with html editors such as dreamweaver, nvu, or simply use notepad.
<html>
<head>
<title></title>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
Copy or move the folders into your website folder. If you already have an "images" folder, just open the images folder for both lightbox, and your website, and just copy the images from lightboxes folder into your images folder.
Thats it! You're all set with installing it into your website pages.
Now to link it.
<html>
<head>
<title></title>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="images/image.jpg" rel="lightbox"><img src="images/imagethumb.jpg"></a>
</body>
</html>
What we did here was put in an image thumbnail of the larger image with the code <img src="images/imagethumb.jpg">, and linked it with the larger image with the a link attribute tag, <a href="images/image.jpg" rel="lightbox"> " " </a>. What we did in order to activate lightbox was added in the rel="lightbox" into the link code in order to tell that link to activate lightbox for use. After that, you're all set! I understand a complete website will have much more coding and html than this, but I didn't want to confuse anyone, and get down to the point on using lightbox.
Just upload the folders and files just like they're set inside your website folder, update your .html files that have this linked into it, and viola! Instant photo gallery. Tomorrow when I catch time, I'll be making a tutorial on customizing it. If you want to see any customizations, I've already done one to B.T.'s site... www.rebelreptiles.com .... just check out the photogallery.
-Andrew
Lightbox is free to download, and use, without giving credit to the original creators. Its sharp, fast, and quite nice looking. Download lightbox at http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
Click on the link labeled "Simply download Lightbox V2.03a,". Put the folders and files into the same folder as your website, on your computer in order to test it, modify it, and work out any quirks. The 3 folders included are..
-css- contains all the files to give lightbox its appearance, size, and centering properties.
-js- contains all the action and variable commands and scripting to make lightbox operate.
-images- Contains all the images for lightbox to operate visually, including the ajax-loading icon, next & previous tabs, and the close tab.
The only two folders you will need to modify if you want to edit lightbox for a custom theme are the .css file, and the images. You will not need to edit the javascript files. The js files are already configured fairly well for a proper loading time & such.
To install
Simply add this coding into the head of your website. You can do this with html editors such as dreamweaver, nvu, or simply use notepad.
<html>
<head>
<title></title>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
</body>
</html>
Copy or move the folders into your website folder. If you already have an "images" folder, just open the images folder for both lightbox, and your website, and just copy the images from lightboxes folder into your images folder.
Thats it! You're all set with installing it into your website pages.
Now to link it.
<html>
<head>
<title></title>
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="images/image.jpg" rel="lightbox"><img src="images/imagethumb.jpg"></a>
</body>
</html>
What we did here was put in an image thumbnail of the larger image with the code <img src="images/imagethumb.jpg">, and linked it with the larger image with the a link attribute tag, <a href="images/image.jpg" rel="lightbox"> " " </a>. What we did in order to activate lightbox was added in the rel="lightbox" into the link code in order to tell that link to activate lightbox for use. After that, you're all set! I understand a complete website will have much more coding and html than this, but I didn't want to confuse anyone, and get down to the point on using lightbox.
Just upload the folders and files just like they're set inside your website folder, update your .html files that have this linked into it, and viola! Instant photo gallery. Tomorrow when I catch time, I'll be making a tutorial on customizing it. If you want to see any customizations, I've already done one to B.T.'s site... www.rebelreptiles.com .... just check out the photogallery.
-Andrew