Suckerfish HoverLightbox Redux

When the original Suckerfish HoverLightbox was published, I was honestly surprised at the amount of attention it received. I was a fan of the technique, and I was also really glad that many people took the time to read the entire article instead of just playing with the demo and move on. One thing I was disappointed in, however, was the lack of attention to detail on my part in the demo and examples provided. Most of my time was put into testing the technique and determining if it was useful. I have been meaning to revisit the technique and take another look at it, and recently I was able to do so.

Suckerfish HoverLightbox Redux Demo

The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility.

Suckerfish Dropdowns are widely accepted and used by many developers in order to include a more comprehensive navigation in their various designs. Patrick Griffiths and Dan Webb changed a lot when they published their article to A List Apart. The Hoverbox Image Gallery by Nathan Smith is a great technique that I’ve found myself using time and time again in various otherwise plain image gallerys. Finally Lightbox JS by Lokesh Dhakar is used to bring the images into full view. Each of these pieces have been slightly modified for use in the Suckerfish HoverLightbox, but each deserves the utmost respect for their hard work and ingenuity.

Suckerfish HoverLightbox Redux (.zip)

The provided download includes a ZIP archive consisting of the vanilla Suckerfish HoverLightbox demo and all the necessary JavaScript, CSS, XHTML, and images.

Modifications that were made

When I began work on the Suckerfish HoverLightbox, I started from the inside out. I began with Lightbox JS 2.02 as it is an upgraded version from the first, which the original Suckerfish HoverLightbox employed. This version allows someone to navigate through each set of pictures while continuing to use the Lighbox, as opposed to closing it out each and every time. I like that feature, as it can save me time when flipping through a collection of pictures.

In my personal experience, some people have had difficulty realizing that navigating from picture to picture was possible. Unless it was explained, people would continue to close Lightbox and click another image in the series. After being shown that mousing over the picture will bring up some options, the ‘local’ navigation would be used. To make things easier, I added in another set of navigation elements to the Lightbox. Near the Close button, there is now a set of small arrows available when there are more images to browse in a particular set. It seems to have helped some people, while others who have had prior experience with Lightbox can continue to use the native local navigation.

The Hoverbox Image Gallery was not modified very much beyond a few color changes and dimension adjustments. The technique is quite robust and does what it aims to do very effectively. It’s quite easy to apply to almost anything, and the Suckerfish HoverLightbox is no different.

Finally, some changes needed to be made in the JavaScript for the Suckerfish Dropdowns. Originally, the script used the DOM to find a specific element with a particular id. This was changed to find the ‘gallery’ container and work from that point. There was also JavaScript added to assist with a nasty IE6 rendering bug I came across when putting the demo together.

Problems I ran into

Naturally, I ran into a snag here and there when putting the Redux together. I wanted this version to be cleaner and appear more organized. The design of the first version was severely lacking and in my personal opinion, the Redux is a step forward. While the last version was easier to customize, this version only requires a couple image changes, and some color updates in the CSS.

The only major roadblock I ran into was when testing in Internet Explorer 6. The nested unordered lists weren’t displaying correctly due to the fact that percentages were used for widths in order to make the Redux easier to work with. After determining the cause of the issue, the example was modified and the rendering was corrected.

What would you change?

As with the first version, I’m pleased with this version and feel it came out as well. The Redux degrades gracefully (assuming worthy alt attributes are used). After the original Suckerfish HoverLightbox was published, a few people suggested that the gallery was a bit invasive in that it appeared on rollover using CSS. I took that into serious consideration when putting together the Redux, but elected to stay away from including more JavaScript. To a degree, I do believe that the Redux is still a bit invasive in that it is very likely a reader will unintentionally roll over the gallery. Do you think it’s better or worse that the Redux displays the images on rollover? Should a version including JavaScript to toggle displays be put together?

I look forward to hearing any reactions to the Redux, in hopes of improving the example even further in the future.