JQuery Lightbox Plugins

1. Compare three different lightbox style plugins available on the Internet. “lightbox” is the common name for some simple image display plugins.

The first lightbox plugin I am going to compare is the FancyBox plugin. A simple but beautiful Mac-Style plugin that is easy to use (http://fancybox.net/). FancyBox comes with a few customizable features to choose from such as animations, title positions, Inline-auto detect width/height, and Image gallery with mouse wheel. The CSS can be altered to change your chosen lightbox preference to match your site design. There is also support for fancy transitions by use of the easing plugin.

The second lightbox plugin I’m going to compare is the Lightview plugin, (http://projects.nickstakenburg.com/lightview) a beautiful way to create an overlay window to showcase your work. Lightview offers a selection of skins combined with a user-friendly JavaScript API (application programming interface), that allows you to create custom skins. The CSS is also customizable, and since Lightview uses HTML5, it offers the best user experience across a variety of browsers.

The third lightbox plugin I’m going to compare is the SlidesJS plugin (http://slidesjs.com/). SlidesJS is a simple and elegant tool that allows designers and developers to create a user-friendly slide show. There are many examples and options to choose from so you can customize your slideshow to your liking. This plugin offers quite a bit of functionality and is easy to set up. The support is limited, but the site does offer a link to report bugs.

2. Describe some differences between the plugins that your are comparing. Are there any particular advantages to one of the plugins over another?

Each of the plugins described above have their advantages. A couple of the plugins offer a few more features/support. The FancyBox plugin webpage (http://fancybox.net/) displays the different styles and animation effects to choose from. This plugin is also pretty straight forward, and if you chose to use one of the animation effects, the code is easy to include in your document head along with the jQuery link  to FancyBox <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>. There is also a decent support forum available if you run into issues with the plugin.

The Lightview plugin is one of the more elegant lightbox plugins that I found. I didn’t find it to difficult to tweak the skin overlay opacity in the JavaScript file, however it did take me a little while to find the opacity setting in the JavaScript file, since I started by looking in the CSS. There are many skins to choose from, and the files seem fairly easy to work with. The Lightview website is easy to navigate and makes good use of examples to choose from, like going into a home décor shop with samples and colors to look through.

The SlideJS is the third plugin I have used so far that I have found to be easy to use, and incorporate into my site design. This slideshow plugin offers a different layout from the other two mentioned above. The FancyBox and Lightview are similar in that they both use the “lightbox” Mac-style “float” on top style. The SlideJS style can be added to a page without the “float” effect if that is what you prefer, and it still has the functionality of the other two plugins. The site for the SlidsJS is simple to use, easy to find the plugin download, and offers a few varieties of slideshows that are different from the “Mac-Style“ lightbox effect.

3.  In our text book it gives an example of hand-coding, creating from scratch, a lightbox. Can you see any advantage or reason to code your own lightbox? (It is ok if you don’t see any reason to code your own lightbox...but just support your answer).

With the availability of so many lightbox plugins, it seems like it would be more time consuming to hand-code one from scratch. With that said I did run into a limitation with one of the slideshow lightbox plugins. One of the slideshow plugins I tried had the same id named, pagination as one of the other plugins I was using. If it had been a matter of just changing the id name in the HTML and CSS, it wouldn’t have been to big a deal, but this involved going into the compressed JavaScript file and changing every instance of pagination to something else. Well, I decided not to do that, and went with another plugin, but could see in this situation where hand-coding your own plugin might be advantageous over working with someone else’s files.

Another reason to possibly hand code your own lightbox is if you want a particular style or effect not available in some of the open source plugins.