INSTRUCTIONS for SETTING UP LIGHTBOX 2.05

Part 1 - Download, Install, Test

1. At Lokesh's Lightbox Site, Click the Download button to the left to go to the actual Download Link.
   
2. Save the Download into an empty folder.
   
3. UnZip the Download.
   
4. Installation: Copy the Files to your WebSite Root Directory. Afterward the files should be organized like so...
   
   root (directory of your site location)
   | - css (folder)
   |    | - css files in here
   |
   | - images (folder)
   |    | -images files in here
   |
   | - js (folder)
   |    | - js files in here
   |
   | - index.html (lightbox example file - you can rename this to "test.html" before copying here so it does not interfere with your own index.html [home page])
   
   
5. Test: You should be able to open the test file and try it out. Follow the next sections for FIRST getting the test working, and THEN for deploying Lightbox in your own pages.
   

Part 2 - Setup

1. You will need to include these lines of code in the HEAD SECTION of your webpage (in this order).
   

   
   <link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
   
   
   
   <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>
   
   

   What those lines do is:
   
   The LINK tag points to where you placed the lightbox.css file. In this example, that file is in a folder named "css" that you created at the root-directory-level of your site.
   
   The SCRIPT tags point to where you placed the lightbox javascript files (*.js) files. In this example, those files are in a folder named "js" that you created at the root-directory-level of your site. There are FIVE FILES.
   
   Keep in mind, if you have others of your own LINK and SCRIPT tags in the HEAD section of your webpage, place the new lightbox LINK TAG with your other LINK TAGS, and likewise, place the new lightbox SCRIPT TAGS with your other SCRIPT TAGS. It is good practive to have the LINK tags precede the SCRIPT tags in the HEAD section.
   
   
2. Check the "lightbox.css" FILE and make sure the referenced PATHWAY FOR prev.gif and next.gif files are POINTING TO THE CORRECT location.
   
   For instance, if you placed those files in a folder named "images" in the root directory of your site, then the pathway in the css "url()" reference would look something like
   
   url(/images/<nameof.gif>).
   
   Do NOT Edit the one for "data:image", only the other ones.
   
   
   
3. Check the "lightbox.js" FILE and make sure the referenced PATHWAY for loading.gif and close.gif files as referenced near the top of the lightbox.js file are POINTING TO the right location.
   
   For instance, if you placed those files in a folder named "images" in the root directory of your site, then the pathway in each reference would look like:
   
       fileLoadingImage: '/images/loading.gif',
   
       fileBottomNavCloseImage: '/images/closelabel.gif',
   

Part 3 - Using Lightbox In Your WebPages

1. In a webpage where you wish to use Lighbox, ADD a rel="lightbox" attribute to the desired link (anchor) tag(s) to activate Lightbox.
   
   For example:
   

   <a href="images/image1name.jpg" rel="lightbox" title="my caption">Name for Image #1</a>

   Optional: Use the title attribute if you want to show a caption.
   
   
2. If you have a set of related images that you would like to "group", follow step one, THEN additionally include a group name between square brackets in the rel attribute. For example:
   

   <a href="images/image1name.jpg" rel="lightbox[group1name]">Name for image #1</a>
   
   <a href="images/image2name.jpg" rel="lightbox[group1name]">Name for image #2</a>
   
   <a href="images/image3name.jpg" rel="lightbox[group1name]">Name for image #3</a>
   
   

   
   No limits to the number of image sets per page. You can create a set of "group1named" links, a set of "group2named" links, and so on. There is no limit to how many images are allowed in each set, or how many sets you can create.