Update: If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved version.
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
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
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.
:hover elements. It also controls the entire Lightbox portion of the example.
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.
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.
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.
Although Suckerfish, Hoverbox and Lightbox have been extensively tested for cross-browser compatibility, I was able to test on PC in Firefox 18.104.22.168, Internet Explorer 6, Internet Explorer 7 Beta 2, Netscape 8 and Opera 8.53. On the Linux side I tested Firefox 22.214.171.124, 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.