Suckerfish HoverLightbox
Update: If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved version.
From time to time I come across some truly impressive techniques that are a great blend of CSS, XHTML, and sometimes JavaScript. Personally, I am not a big fan of implementing JavaScript, but it is sometimes unavoidable. That is usually due to circumstances created by certain browsers that will remain named: Internet Explorer. I was truly impressed by the development of the Hoverbox Image Gallery written by Nathan Smith of SonSpring. It was great to come across some optimization of the code by Craig Erskine and I thought it was a really creative way to show a collection of images in a gallery. After starting a project with a colleague, I was struck with an idea. How would it look to blend this technique with a set of Suckerfish Dropdowns originally published by A List Apart (and revised)? Take a look for yourself:
My initial reaction was that I thought it looked pretty neat and would be a nice way to present sets of images. It then occured to me that it might be nice to include Lightbox JS written by Lokesh Dhakar in the mix. Putting these techniques written by these great developers together resulted in quite an expandable image gallery.
How it was Done
Being that Suckerfish, Hoverbox, and Lighbox were all written in an organized and straightforward fashion, combining them was fairly simple. I left the JavaScript files controlling the Suckerfish and Lightbox separate for organizational sake, and also used a separate stylesheet to control the Suckerfish and Lightbox style. Being that all three techniques were developed to work cross browser, only minimal edits were required in the CSS to have the gallery behave how I wanted.
Semantics of the Markup
What we’re faced with here is a nested unordered list containing two levels. The first level contains the gallery ‘names’ if you will, and the second level contains the image thumbnails. Semantically speaking, I think this markup is quite good. After all, at the most basic level the only thing we’re dealing with is a list of images. All markup is standardized and includes alt and title attributes.
Usability and Accessibility
A primary concern of mine is always the usability and accessibility of any given markup. An object of a Web developer should always be to aim towards achieving maximum usability and accessibility of all their work. A major usability issue that came up with the design of the Suckerfish HoverLightbox is inadvertantly hovering a top level list item which puts the contained thumbnails on display. If the user doesn’t mean to view the thumbnails, they can be quite invasive. One way to help this out is to provide enough real estate for your gallery so that if a user were to accidentally roll over a gallery heading, your content would not be hidden.
Javascript Degradability
One of my major issues with the inclusion of JavaScript is complete inoperability if I happen to have JavaScript disabled at the time. If JavaScript can not degrade, I think a new solution should be looked into. The JavaScript in Suckerfish HoverLightbox controls the thumbnail display in Internet Explorer since it does not support psuedo :hover elements. It also controls the entire Lightbox portion of the example.
If you were to view the example without a JavaScript enabled browser (excluding Internet Explorer), you wouldn’t notice a difference until clicking the image for the Lightbox. Instead you are linked to the full resolution image, which makes sense given the circumstances. If you happened to be viewing the example using a JavaScript disabled Internet Explorer, you would not be able to view the thumbnail galleries. Instead you would only see the gallery headings, which would be a link to either a static page containing your thumbnails, or possibly to the directory in which your full resolution images are stored. Given either situation, the example is less visually appealing, but still usable.
Using a Text Browser
There are definately people browsing the Web with text-based browsers. Albeit a very small percentage, they’re still out there and developers should meet their needs. Being that Suckerfish HoverLightbox is simply a two level nested unordered list, text-only output is very clean and organized. The top level list items contain links to another page, and the second level contains links to images which can be downloaded by a text-based browser such as Lynx.
Please excuse the small viewport, it is merely an example of what you would see had you been viewing this article (specifically the Suckerfish HoverLightbox example) using Lynx.
Results on a Screen Reader
When viewing this example using a screen reader, you will be faced with a very similar situation. Given the circumstances of the example, that it is an image gallery, it is quite useless to someone viewing with a screen reader. The point to take home here is that even if someone is viewing the example with a screen reader, they aren’t confused as to what you’re trying to get across.
If you are curious to see what a particular Web page renders as when using a screen reader, Fangs is a Firefox extension that emulates a screen reader. It can be very helpful when evaluating the accessibility of your Web site. Due to the semantic markup, you’re faced with a pretty self explanatory situation — a list of galleries which hold a nested list of images.
Examples
I realize that an example tailored to the design of Monday By Noon is not very useful to the end user, so I have compiled a couple of vanilla examples for examination and download. This example is very new to me and I encourage criticism and critique so that it can be refined to the most optimal end package for future use.
Download Suckerfish HoverLightbox
Vanilla Horizontal Example
I have included a horizontal example of Suckerfish HoverLightbox within this article, but there is also a vanilla horizontal version. I left it as basic as possible but also included some ‘before’ and ‘after’ text to mimic any given situation. Minimal styles were included and the markup was not modified.
Limitations of the Design
First and foremost, the biggest limitation to the horizontal design is the problems you run into when you have more than a few gallery headings. In this example, all gallery headings must be on one level because breaking into two levels would adversely affect the thumbnail views. This is really the only major drawback to the horizontal design and can be tackled using a vertical version.
Vanilla Vertical Example
I originally worked on a vertical example of Suckerfish HoverLightbox because that is the situation in which it would be applicable to the project I was going over with my colleague. In this example you can include a virtually limitless amount of galleries; however, I chose to include a horizontal version in this article because it seemed to fit better.
Limitations of the Design
At first glance, the drawback to this design is the amount of whitespace left behind. Depending on the design, this can work to your disadvantage, especially when there is a large number of galleries. When developing this example, I ran into a number of problems. Initially I wanted all thumbnail views to display in the same position, which would result in a more consistent experience. I quickly ran into problems when the top level list containing the gallery titles was taller than the thumbnail view itself. For example if there was a list of 10 different galleries and the 9th gallery had only one thumbnail. When this situation arose, I was unable to successfully hover the bottom gallery title, and actually use of the thumbnail to get to the Lightbox. The thumbnail would dissapear as soon as I left the gallery title on the left. This was due to leaving the :hover state of the gallery title anchor before hovering the nested list, resulting in the thumbnail view returning to a position of left:-999px; before we are able to make use of it.
I think the best way to illustrate the problem is visually:
The outlines delegate the border of the unordered list containing the thumbnail images. The red outline illustrates the height problem. In order for the Suckerfish to work, the mouse needs to travel from point (a) which is its current position, to point (b) which is within the red boundary. I first tackled this by setting the height of the container unordered list to auto, and then setting the height of the contained list to 100%. After testing in Firefox I was pleased with the solution (left hand blue outline). Unfortunately, Internet Explorer 6 did not render the lists height as 100% and therefore this was not an effective solution (right hand blue outline). The solution I chose was to position of the contained unordered list at the same height of the associated list item (the gallery title) which solved this problem. As a result, the thumbnail views are set to appear at the same height as the gallery heading to ensure usability, even if there is only one thumbnail present.
Finishing Thoughts
Overall, I feel that this is an effective way of presenting an image gallery using mostly CSS and only a small bit of JavaScript. I do feel that it is really only an effective solution for a small to medium sized image gallery because of the design limitations. It degrades well, is semantic, usable, accessible, and nice to look at. I hope that other developers take a look at this example and write about any changes they would personally make.
Although Suckerfish, Hoverbox and Lightbox have been extensively tested for cross-browser compatibility, I was able to test on PC in Firefox 1.5.0.1, Internet Explorer 6, Internet Explorer 7 Beta 2, Netscape 8 and Opera 8.53. On the Linux side I tested Firefox 1.5.0.1, Konqueror 3.4.3, Galeon 1.3.21, Mozilla 1.7.12, and Epiphany 1.8.2. I was unable to perform any testing on the Mac platform, but will do so as soon as possible.