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.
