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.
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.
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.
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
I look forward to hearing any reactions to the Redux, in hopes of improving the example even further in the future.