Lightbox is a revolutionary javascript that allows you to view images, videos or even an entire web page in a semi-transparent overlay on a website. There are many versions and adaptations of Lightbox, but they are all modeled after Lightbox JS, which was originally written by Lokesh Dhakar. Although Lightbox JS may appear confusing to a non-programmer, it can actually be set up rather easily with a few instructions.

Light Box

 Lightbox is a revolutionary javascript that allows you to view images, videos or even an entire web page in a semi-transparent overlay on a website. There are many versions and adaptations of Lightbox, but they are all modeled after Lightbox JS, which was originally written by Lokesh Dhakar. Although Lightbox JS may appear confusing to a non-programmer, it can actually be set up rather easily with a few instructions.

Getting Lightbox

1. Acquire the proper files. There are several versions of the original Lightbox and each is tailored to a particular set of needs. If you will be using Lightbox just to display pictures, download the files for Lightbox JS 2. If you wish to display web pages in lightboxes, there is a package called Lightbox Gone Wild that is configured for this. If you are having trouble getting Lightbox JS 2 to run on your web server, try using Lightbox Plus.

Using Lightbox JS 2

2. Lighbox JS 2 is available to download for free at HuddleTogether.com and the zip file includes everything you need to have lightboxes on your website. Once you have downloaded and unzipped the files, create a folder for the Lightbox files on your web server. Open the web page you wish to have Lightbox working on--for example index.html--and insert the following code in your header:
   
   "<!--Start LightboxJS2-->
   <link rel="stylesheet" href="http://www.example.com/lightbox.css" type="text/css" media="screen" />
   <script type="text/javascript" src="http://www.example.com/prototype.js"></script>
   <script type="text/javascript" src="http://www.example.com/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" src="http://www.example.com/js/lightbox.js"></script>
   <!--End LightboxJS2-->"
   
   Adjust the directories to match your directory structure. Next open the file Lightbox.cs and go to the end of the document. Edit the paths for prev.gif and next.gif to match your directory structure. Do the same in lightbox.js for loading.gif and close.gif. Now upload the files to your Lightbox directory on your web server. Lightbox is now ready to be used on your website.
   
   To use Lightbox you must call the script. The Lightbox script is called by a combination of the hyperlink reference and image HTML tags. Simply use the example below to insert an image that functions as a lightbox:
   
   "<a href="http://www.example.com/originalpicture_1.jpg" rel="lightbox" title="Description"><img src="http://www.examplecom/thumbnail_1.jpg" border="0"/></a>"
   
   If you call multiple images on a web page in this way, you will be able to browse them in the Lightbox using the previous and next buttons.