Addicted to Chaos
Posted on 31st March 2011
Sometime ago, a website I was working on needed the ability to view images on the current page from a thumbnail. Many websites now feature this functionality, but at the time only a few seemed to offer this, and the assumption was that the javascript required was rather complex. As such, I did a search of the viewer libraries available, either as Open Source or for free download, that I could use for a commercial website.
The initial search revealed a rather more limited result than I expected, and seemed to imply that the complexity had put people off from developing such a library. However, in retrospect it seems that a market leader has become so popular, stable and robust, that others have choosen to provide different or limited presentations based on similar designs.
Back last year I began writing a review of some of the viewers, but never got around to finishing it. Having some time recently, I decided to both complete the review and revisit the viewers to see what improvements have been made since I first investigated them.
Before I begin the individual reviews, I should note the requirements I was looking for in a viewer. Firstly, the viewer needed to be self contained, both with files and directory structure, so that the feature could be added or removed with minimal changes to other website files. The viewer needed to be run completely on the client side, no AJAX or slow loading of large images would be acceptable. However, the most significant requirement was that all code needed to work in IE6. Unfortunately this latter requirement was non-negotiable.
I was quite surprised by the results of the solutions I could find around the web, and although there are likely to be others now, the following is a brief review of each of the four immediate solutions I found, and my experiences with them.
Lightbox
Possibly the best know thumbnail viewer library available, and now a clear market leader. The original review was with v2.04, which had been the stable release from 2008. This month (March 2011) has seen a version 2.05 release with added IE9 support. Lightbox is licensed under the Creative Commons Attribution 2.5 License, and is free to use for commercial projects, although a donation would be very much appreciated.
While this viewer works in most browsers, and the features of images sets and loading effects looked great, it proved unworkable in many of the IE6 browsers I tried across multiple platforms. Despite searching in forums and in some howtos, there didn't seem to be an obvious fix to the problem. The viewer would either not load at all, load with a black layer over the whole web page, or begin to load and crash the browser. I know there are many problems and faults with IE6 and the javascript rendering engine, but these were supposedly stable releases.
As Lightbox makes use of the Prototype Framework and Scriptaculous Effects Library, which was already being used within the website the viewer was for, the library initially seemed to be the best fit. Failing IE6 so dramatically and consistently, disappointingly meant it couldn't be pursued further.
Slimbox
Slimbox is a Lightbox clone written for the JQuery Javascript Library. v2.04 is the last stable release, and the release that was originally reviewed. Slimbox is free software released under MIT License.
Slimbox is based on Lightbox 2, but utilises more of the JQuery framework and is thus slightly less bulky. While working well in the browsers I tried, it flickered several times in IE6 when loading the image. Anyone viewing the effect with eplipsy might well have felt ill. Even for someone not affected by eplisey this strobing effect was extremely off putting. I suspect this problem may well be an alternative side-effect to those seen with the original Lightbox, but again forums and howtos didn't provide a suitable fix in order to remedy this problem.
Dynamic Drive Thumbnail Viewer
This is the first thumbnail viewer that Dynamic Drive have available, as the second is an inline viewer rather than an overlay, which is what I was after, and is the version made available on July 7th, 2008. Scripts by Dynamic Drive are made available under their Terms of Use, and are free to use for commercial projects.
This a very basic viewer, relying on basic functionality rather than flashy effects. As such, it is simple in design and presentation. Rather than create a full browser window overlay, as both Lightbox and Slimbox do, the Dynamic Drive viewer simply contains the viewing image within a simple DIV layer tag. There is the possibility to add visual effects, but these can be easily turned off.
This seemed to work in most of the browser tried, except when clicking the image in IE6. The image appeared, but then immediately a javascript error popped up. After quickly reviewing the configuration and turning off the animation, the viewer opened and worked seamlessly across all the browsers tested.
Highslide JS
Highslide JS is a very feature rich library, which provides much more than an image viewer. Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License, which means you are free to use the library for non-commercial projects. For commercial projects two payment methods are available, $29 for a single website, and $179 for unlimted use.
The feature set for displaying images includes the style of animation to open images, the positioning of text, and the linking of image sets. In addition, it also provides many features for regular content, which can then be used for tooltip type pop-ups, using embedded HTML, IFrames and AJAX. Another standard feature is the ability to allow the user to move the pop-up around the screen, to wherever might be convienent.
However, there is a downside. While this works well in most browsers, even just loading the Highslide JS website in IE6 throws up several errors. With the library being so feature rich, it is a considerably larger codebase, although removing comments can remove this down to just over 8KB, and I suspect some of the older browsers may not be able to handle some of the complexity. Their compatibility table suggests that it works all the way back to IE 5.5, but in the tests performed for IE6, when the site did open without crashing the browser, the viewer itself felt rather clunky when an image was opened and several of the visibility settings just didn't work. You also frequently get an 'Unterminated string constant' error pop-up, which just feels disconcerting considering they are asking you to pay for commercial usage.
If IE6 wasn't a factor, this may have been a contender, as the cost is very reasonable for a commercial project that would utilise all its features.
Conclusion
These are just the four viewers that were prominent in searches for a "thumbnail viewer". They all seem to have the same, or at least a similar, style of presentation of images, which is likely due to the limited way images can be displayed as an overlay. However, the basic functionality of displaying an image seems to have been overshadowed by how many cool shiny features some can fit into their library, with configuration seeming to be an after thought.
With the ease of configuration to disable the IE6 error, the basic functionality and the freedom to use for commercial projects, the Dynamic Drive solution was utimately chosen for the project I was working on. If IE6 wasn't a consideration, I would have gone with Lightbox, as we already use Prototype and Scriptaculous. With IE6 usage dwindling on the website in question (Jun 2010: 38.8%, down to Mar 2011: 13.2%), it is quite possible that we may upgrade to a more feature and effect rich viewer in the future, and Lightbox does seem to be a prime candidate.
Consider this post a point of reference, rather than a definitie suggestion of what image viewer library to use. There may be other choices that suit your needs better than these, but these four are worth initial consideration at the very least.
Browsers & Operating Systems
For reference these were the browsers I tried, and the respective operating systems. And yes, I did test IE6 on Linux, where it occasionally stood up better than the version on Windows! Though this may be due to the lack of ActiveX support.
- IE6 (WinXP, Windows7, Linux)
- IE7 (Windows7)
- IE8 (Windows7)
- Firefox 3.6 (WinXP, Windows7, Linux)
- Opera 9.8 (Linux)
- Opera 10.52 (Linux)
- Chrome 5 (Windows7, Darwin)
- Chromium 6 (Linux)
- Safari 4 (Darwin, iOS)
Comments
No Comments
