Search

Suckerfish HoverLightbox

Posted: March 27, 2006 Comments(218)

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:

Suckerfish HoverLightbox Demo

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.

Screenshot of Lynx Viewport

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:

Image depicting height problem

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.

Digg this Article

Related Content

  1. Suckerfish HoverLightbox Redux
  2. Year in Review: Highlights from 2007
  3. Suckerfish HoverLightbox

Categories

Categories Development

Tags

Tags , , , , , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. WOW!
    amazing work.
    i really enjoy reading your articles J.Christopher.
    i especially like how you’ve combined the two techniques!

  3. Great work – seriously, this is nice stuff.

    The one thing I would suggest from an interaction standpoint is to show the images on click, not on rollover. I guess this would require some Javascript, but I think it may offer a little less obtrusiveness.

    Just a suggestion.

  4. I’m really enjoying the site and nothing brightens up my bland Monday mornings like a new article 😉

    And P.J., I agree with you 100% on the obtrusiveness of mouseover popups but I guess it’s just personal preference when it comes down to that.

  7. I am running IE6 (I’m at school so it’s not by choice) and it seems to work fine for me with Javascript enabled. I’ve yet to try it with it disabled tho.

  10. @jammo: I’m glad you’re pleased with the result. Hopefully it will be of use to you in the future.

    @Webdawson: Thanks!

    @P.J.: An _excellent_ point. I’m glad you wrote that you feel the example is a bit obtrusive. In a sense I definately agree to you, and thanks for the input as a possible solution — I’m sure adding a few lines of JavaScript would help the obtrusiveness.

    @Michael: Thanks a lot, I appreciate you saying that. What do you think of P.J.’s idea for a solution? Do you think it would help out?

    @Noname and Adam: I’ve tested in both IE6 and IE7b2 and found it to be functional — perhaps you have JavaScript disabled? Is any part of the example working?

    @prence and Marcell: Thanks for posting your results.

    @astridas: I hope you’re able to use it at some point down the line.

    Thanks for taking time to post, everyone. It is greatly appreciated.

  11. Another great article! I just put up a gallery on my website but i grabbed it off of hotscripts. It works but its more of a hosting solution than just a gallery. It is hard to find a nice gallery that blends well with the site your puting it on. Yours looks excellent and I may try to play with the code to see if I cant get it to work for me.

  12. Hey! Thanks for the great work. It works for all the browsers we aim for :). I hope you don’t mind us taking and modifying it, but couldn’t have been done without a nice initial work up!

  16. great to see this tutorial really goes through all of the paces in terms of accessibility. Thanks for putting this together!!

  17. Great Stuff Indeed!

    But what i think is still lacking in all these implementations is the ability to add a para or some such markup to be able to place some descriptive text about the image..Leightbox allows you to do this simply – maybe mix the above and Leightbox together..anyone?

  19. Fantastic, a few comments though:

    (I am a newbie at this so forgive me if I am naive)

    What about doing a grid/table instead of just a vert/horiz orientation. If you have a *lot* of gallery dorectories, this might make organization easier.

    Did you enter the image info into the HTML manually? how would one point the files at directories and have it automatically read the images in there?

    what about a scrolling horizontal/vertical list of either the images/directories?

    I would love to put this up as my gallery UI – but hte shear number of files that I have am only able to do it with something that will parse the directories automatically.

    Thanks!! Love what you have so far though. (and I liked your writing style)

  21. Very nice work on combining those methods. Its also really good to see, that there are people, who are so concerned with usability design.

  22. @Paul: I’m glad you found it useful and entertaining. Thanks for stopping by.

    @Christopher: All of the real work was done by the original authors of Suckerfish, Hoverbox, and Lightbox. I’m glad you find this example useful and I hope you’re able to implement it. Thanks for commenting.

    @Gomi, Jason, Mike and bwann: Thank you very much, just keep in mind the original authors of the techniques. They are far more deserving of thanks than I am.

    @Jez: Perhaps thats something that could come up in an updated version down the line. I’ll look into some possibilities.

    @SDM: You raise a great point. While you are able to TAB onto the links, essentially you get lost within the thumbnails even though they aren’t visible. I’m going to look into a solution for this if there is one. Thanks for putting up your opinion!

    @phlux: Thanks for stopping by and contributing. We’re trying to avoid the use of tables here because an image gallery is not tabular data. Semanticallly it is a list of images so that is what the markup should read. Adding the extra features you mentioned may very well be possible using a wider range of JavaScript and/or a dash of PHP here and there. Initially this example was written to put a smaller gallery of images on display as opposed to a larger one, but I suppose a larger version could be looked into. Thanks again for stopping by.

    @Santhosh and Mijo: I’m glad you liked the example — I hope you find yourself reading more Monday By Noon articles.

    Thanks to everyone for taking the time to comment!

  23. I found this article interesting and very much like the idea. I might try to implement something similar on my own site. I’ll have useful feedback about implementation/features/accessibility after I try it out properly.

    I think many more sites should incorporate degradeable javascript techniques.

  25. Totally amazing! I was actually looking around for something like this (zoom a bigger image over the current one and work with different resolutions).

  28. Very nice work (and nice tutorial too)!

    But I can’t use it appropriately with my keyboard (tab key and enter) it will be very nice if your script also works with keyboard 🙂

    Tank you for this.

  30. Thanks for all the positive feedback!

    @Jan: Thats awesome! I don’t happen to have access to that setup so it is great to know the example works in IE5.0. I never would have thought it would.

  31. Thx for the opportunity to contribute Jon.

    I have put together a hoverbox/lightbox combo that automatically creates the thumbnails and sets up the gallery by pulling the file names directly from a folder on your server that I am sure people using this suferfish version may be interested in.

    It used php to do tha hard work. If you combine that with this tutrial you would have a really powerful link based gallery.

    @Jon i also linked back to this site in my updates section in that tuorial

  32. @david: Awesome tutorial — I can’t wait to really test it out. I thought about an effective way to automate the process of managing the gallery, but didn’t get around to it yet. Thanks for the tutorial.

    I’d like to take a second and insert a link to David’s Hoverbox/Lightbox example. I hadn’t come across this example prior to writing this article, but had I it would definately have been recognized.

  33. Cant we be Friends 🙂

    But, seriously, this is great work

    there is a completely CSS version at Cssplay and you are credited with being the influence

  34. Nice work Jon.
    just an obs: try right click -> properties on a thumbnail to see what happens. in my browsers ( Firefox 1.5, IE6) that thumbnail remains blocked.

  35. I’m still quite new to the CSS and lovin’ it, thanks to folks like you the Internet is much more pleasant.

    I am not a designer in any means, so your scripts helps out tonnes!

    Like Dhtml Guy says, I got here from the Cssplay site. And trying out the CSS only version. But, I think I have to try yours because I am having IE issues with the CSS only version.

  36. Thanks for the heads up about CSS PLaY. I’m glad reference was given to Monday By Noon. The downside I see to CSS PLaY’s markup is the semantics. Using IE Conditional statements to insert table markup does not seem like an effective solution for me. While it removes the necessity of JavaScript, it degrades the markup by using tabular markup on non-tabular data.

  37. I was thinking as to how can I display items while hovering a link. Display image and text. Somewhat similar to what you have done in the above example. Has anyone tried hovering or clicking a link and displaying items (more like Gmail).

  39. Jon,

    First, Congrats on a nice work.
    Second, could you please advice, where to download this nice stuff? I want to use it.

  41. @Rok: There is a download link in the article

    @Indoxyl: No, this example is absolutely *not* AJAX. It is a blend of HTML, CSS and JavaScript.

  43. So is there anyway to require the mouse be over the thumbnail, say for 1 second before zooming in? This would help when you move from, say the lower right box to the upper left box.

  45. anyone having the problem with the overlay not covering whole page?…here is what I put in my css file:
    ____________________
    #overlay{ background-image: url(../images/overlay.png); margin: 0; padding: 0;}

    * html #overlay{
    background-color: #000;
    back\ground-color: transparent;
    margin: 0; padding: 0;
    background-image: url(../images/overlay.png); margin: 0; padding: 0;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
    }
    ___________________

    any help would be great!

  46. I love this, but I am trying to get it to work on my blog. I am using the vertical hoverbox with a three column layout. It is located in the left column and the gallery shows up in the center column, but when there is text in the center column the gallery doesn’t show up. How do I fix this?

    THanks, BoB

  47. This may be exactly what Ive been looking for to improve my website photo imaging displays. When I have more time I will download it and test it out with my website design. Thanks for the good work.

  48. With regard to mac OS X, works in safari (2.03), opera(8.54), and mozilla’s camino (1.01). In Firefox (1.5.0.4), the vertical version works, but the horizontal menu only displays the the top 3 images- when you scroll below the enlarged image to get to the other rows, the larger image closes instead of turning into that to which your mouse now points.

  49. @gilly: Awesome, thanks for testing on Mac OS X for me — now I’m going to have to try and find my way to a Mac so I can do some testing and see if I can replicate your results. Thanks a lot for posting your findings.

  50. I’m a late commenter on this, but I like it. I like that even though it has limitations with IE, without javascript, it by default (by way of hardlinks on top level list) offers an accessible method of offering the same content. I will be using this as a pop-up style box, on hovers, without the gallery functions, so the loss of effect without javascript there is of little concern.

    It’s great though. 🙂

  52. Yes, it would work with Lightbox JS 2.0 — you can just swap out the JS and be on your way, basically. You could also add the captions where applicable.

  54. Jon, I enjoy your Vanilla Suckerfish HoverLightbox example:) Excellent!! This is what I need for my site. I have a few CSS newbie questions maybe you can guide me.

    Thanks!
    1) How do I increase the 3 x 3 grid in the vertical.html to 5 x 5?
    2) How can I add an email link after the image opens?
    3) Can I add additional caption info?

  56. Awesome script! How can I make this integrate with the popup functionality of lightbox 2? I want to click on an image and have it overlay the image on the screen with captions and a close box?

  58. @Hydroizolacje: Thanks! Of course you can… feel free to use as you wish when you wish as much as you wish. Have fun.

  59. FYI, the Suckerfish HoverLightbox examples have problems in IE7, if I click on a picture and want to go back to the thumbnails, the previous gallery is still there and other galleries will over lap each other when hovering on the menu. Is there a fix in the works for this?
    Great work, me likes!

  60. @Mike: I haven’t had the opportunity to re-check the original Suckerfish HoverLightbox in IE7 (this machine doesn’t have it installed) but have you tried the Redux?

  63. I am having a problem with this in IE. Dreamweaver says “The rel attribute of the A tag is not supported. [Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0]” Any ideas? This thing is great and I want to use it.

  84. […] Another good implementation for a gallery that you are building or customizing is using the Lightbox2 JS library. Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. Lots of things are built on this library, like the Suckerfish HoverLightbox, […]

  85. Brilliant gallery script. Is there any way of implenting it with out the headings title, so you have a page of thumbnails already up?

  87. Suckerfish HoverLightbox examples have problems in IE7, if I click on a picture and want to go back to the thumbnails, the previous gallery is still there and other galleries will over lap each other when hovering on the menu. Is there a fix in the works for this?

  92. Great piece of kit.Problem is I’ve downloaded it and extracted the files but what do I do now? I’m a WYSIWYG person and wondering if there are any instructions out there?

  93. @Colin: You can ignore that warning. The code is valid.

    @Mat: Sure, the script could be altered to do such a thing. You’d just need to write a bit more JavaScript.

    @Web Design Analyst: I will have to look into the issue you’ve mentioned. Stay tuned.

    @Ten Web Designers: I’m not sure exactly what you’re requesting, could you be more specific?

    @memo: To implement something like this, you’ll need to work with the markup and style itself, WYSIWYG won’t allow for integration.

  94. I truly appreciate the fact that you place an emphasis on usability and accessibility and that you include information on screen readers. As you test, it would be helpful to also add keyboard navigation testing since there are those who do not use a mouse but are visual users. Thanks!

  101. Just added your lightbox to my page, I’m loading the page where the lightbox is included using ajax, it works fine in FireFox but not in IE7.
    I tried to re-hover the page after the new element is loaded…using this method i managed to get the lightbox to b displayed but it doesent go away onmouseout…..
    any suggestions???

  102. I think you did a gret job, you are really a genious…
    I wish I could do programing just like you. Thanks for letting download the stuff…
    g. yniestra

  106. The code works, but once I click on a picture the project box stays and I can’t view any other projects? Whats wrong with my code? Should I split it up? Half on one side of page and half on other? Let me know

    Here’s the page it does it on..

    http://www.waxwebstudio.com/reganconst

    Then Click on “Built Some”

    Thanks for your help!!

  107. @AMANDA: I checked out your implementation and it appears to be working fine for me. In which browser(s) are you having this trouble?

  109. Hello! Thanks very much for developing this script. It made my life easier in organizing tons of usericons for my site.

    However I do have one problem. I can’t seem to add more than 3 galleries. I know it has something to do with the “float:left” in css. But I don’t know what to do with the code. I am not that familiar with css so my knowledge goes as far as understanding what those codes meant. Can you help me out please..Thank you

    Here is where I placed it.
    http://yuusuki.net/credit

  114. I deleted half of the script because of I wanted the navigation to go away…..deleted half of the script and everything still worked…..sucky programming….

  115. @Arjen Kramer: Perhaps you could be a bit more specific as to which part of “the script” you deleted. The example provided is quite minimalistic.

    From what I can gather, if you removed “the navigation” you’re basically left with Lightbox, and you’ve missed the point of the example.

    If you’d like to be a bit more clear with your assessment, I’m more than happy to reply in more detail.

  124. nice script. I wanted to modify this script, that onRollOver mouse show full size image, because this would be really good think for seriuos or big websites.

  138. […] Suckerfish HoverLightbox Mar 28, 06 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. […]

  157. […] Scriptaculous. 9. Multifaceted Lightbox : at GregPhoto10. Prototype Window Class : at Xilinus 11. Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon 12. Thickbox – One box to rule them all. : by Cody […]

  194. […] Suckerfish HoverLightbox : Being that Suckerfish, Hoverbox, and Lighbox were all written in an organized and straightforward fashion, combining them was fairly simple. JavaScript files are 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. […]

  196. […] For Danser Inc my responsibility were to take the creative provided by Squeaky Wheel Media an make the site. For this build there were several script you one for light box one for the drop down mean one for the custom scroll bar and one for the auto scrolling box. I use a combination of Prototype and Scriptaculous to accomplish these effects. For the custom scroll bar I used a script I found on jools.net. For the auto scrolling box I used a script called easyscroll I found on cssglob.com and the light box came for mondaybynoon.com. […]

  197. […] Suckerfish HoverLightbox : Being that Suckerfish, Hoverbox, and Lighbox were all written in an organized and straightforward fashion, combining them was fairly simple. JavaScript files are 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. […]

  216. […] Suckerfish HoverLightbox The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries. […]

Leave a Reply

Your email address will not be published. Required fields are marked *