A little history first. What is lightbox? It's a JavaScript (JS) application used to help display images and other files in a new window without having to leave the site you're on. Today there are many many variants of the code, and they are compared here. Personally, I have used both Floatbox and Shadowbox. These are both free to download for personal use. Ok, so most people can get this far; downloading the files. Now, here was the tricky part for me. What do I do now with those files?
You have to have someplace to host these files online. The reason is that every time an image is clicked it needs to refer back to those JS files to know how to display it. So where do you host the files? One popular free way was to use Google Pages to host the files, til Google shut down Pages and turned it into Sites, which doesn't allow JS or CSS file uploads. Besides that there are a number of file sharing sites online, free and for-pay. The problem with most of these sites is that they don't allow direct linking to the files, which allows someone to type in the link for the file and start downloading it automatically without going to a download page. For the free providers, this makes sense as they rely on the advertisements on the download pages to stay in business. A lot of these hosts also provide paid plans which then allow direct linking.
The next problem is being able to upload the JS files easily to the host. A lot of the lightbox builds, while considerably less than 1MB in total size, contain many files. While it physically possible to upload one by one, nobody wants to do that. So you need to find a host that allows FTP transfer so you can upload all the files at once. The combination of direct linking and FTP pretty much wipes out any free file sharing service. So the next thing you could do is sign up with a free web host. Most of these will work, but the reliability can sometimes be spotty. A free solution that I have found that works well is Dropbox. After the break, check out screen shots and more details about getting lightbox running on your site.
Go to Dropbox and install the program on your computer. Register, and then go to the already existing "Public Folder"
An easier way to get to this folder would be to double click the Dropbox icon in the system tray.
Now all you have to do is place your unzipped folder (Shadowbox or Floatbox, etc) in the Public folder. Dropbox will now automatically sync all those files online. For most of the lightbox builds you'll need to find out the direct link to two of the files (the JS and the CSS file).
Once you get those links you need to place a piece of code in the header part of your website. For the majority of lightbox builds the code looks likes this, with the names of the files (shadowbox.css, shadowbox,js) being replaced by the full direct link to wheres those files are hosted:
<link href='shadowbox.css' rel='stylesheet' type='text/css'/> <script src='shadowbox.js' type='text/javascript'></script>
Ok, you're almost done. Now you just need to format the HTML in your image or other links to be able to take advantage of the lightbox properties. Most lightbox sites provide pretty good documentation as to how to do this, but I'll go ahead and include an example from Shadowbox. Here's the code I used for the picture above:
<a rel="shadowbox[dropbox]" href="http://farm3.static.flickr.com/2564/4097537680_13296ba0d9.jpg"><img src="http://farm3.static.flickr.com/2564/4097537680_13296ba0d9.jpg"></a>
I had to add the "rel = "shadowbox[dropbox]" " to the picture's code. This will change slightly depending on the lightbox build you have, but the idea is the same. Well, that's about it. Hopefully you made it this far without getting confused.
0 comments:
Post a Comment