March 27th, 2006
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.
Comments
157 Comments
jammo March 27th, 2006
WOW!
amazing work.
i really enjoy reading your articles J.Christopher.
i especially like how you’ve combined the two techniques!
Webdawson March 27th, 2006
Great Work :)
P.J. Onori March 27th, 2006
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.
Michael Chase March 27th, 2006
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.
Noname March 27th, 2006
Doesn’t work in IE 7 beta.
Adam March 27th, 2006
Not working on IE 6 here :(
prence March 27th, 2006
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.
astridas March 27th, 2006
Pretty neat example. It definately gives me some great ideas that I would like to try out.
Marcell March 27th, 2006
It’s running under IE 6 (SP2).
Jon March 27th, 2006
Author
@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.
Paul March 27th, 2006
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.
Christopher March 27th, 2006
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!
Gomi March 27th, 2006
Incredible! This is some great piece of CSS work you got here.
Jason March 28th, 2006
Wow, very impressive… beautiful gallery script
mike March 28th, 2006
works fine for me in ie7. this is pretty cool. now i just need a reason to [ab]use it… :)
bwann March 28th, 2006
great to see this tutorial really goes through all of the paces in terms of accessibility. Thanks for putting this together!!
Jez March 28th, 2006
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?
SDM March 28th, 2006
An accessibility issue: It’s not device independent, mouse is required.
phlux March 28th, 2006
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)
Santhosh March 28th, 2006
Cool.., A very nice implementation. Really liked it..
Mijo March 28th, 2006
Very nice work on combining those methods. Its also really good to see, that there are people, who are so concerned with usability design.
Jon March 28th, 2006
Author
@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!
Crystal March 28th, 2006
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.
Dennis Bullock March 28th, 2006
Excellent work!
Mark March 28th, 2006
Totally amazing! I was actually looking around for something like this (zoom a bigger image over the current one and work with different resolutions).
Jan March 28th, 2006
It seems to work on IE 5.0 (windows 2k) too!!! excellent!
robbie March 28th, 2006
Wow! I am floored! You rock!
demimismo March 29th, 2006
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.
thuan March 29th, 2006
I’ve come out with quite the same approach to do a thumbnail viewer.
Jon March 30th, 2006
Author
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.
david March 30th, 2006
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
Jon March 30th, 2006
Author
@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.
Dhtml Guy March 30th, 2006
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
pixel_boost March 31st, 2006
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.
Eddie W April 1st, 2006
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.
Jon April 2nd, 2006
Author
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.
Dhaval April 4th, 2006
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).
Anonymous April 8th, 2006
Great work, Thanks!
Rok April 11th, 2006
Jon,
First, Congrats on a nice work.
Second, could you please advice, where to download this nice stuff? I want to use it.
Indoxyl Designs April 13th, 2006
Great use of CSS!
Is this considered AJAX?
This is a wonderful use of SUCKERFISH! great stuff
Jon April 14th, 2006
Author
@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.
IndoxylDesigns April 17th, 2006
Ahhh… is see. Ajax must have XML in it and this is a combination of HTML, CSS and JavaScript!
Thanks!
PJM April 24th, 2006
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.
VicTor May 16th, 2006
AMAZING !!!
I wonder if I can use it on Joomla web sites.
Great job !
eloy ramirez May 19th, 2006
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!
BoB May 31st, 2006
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
Terry June 1st, 2006
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.
gilly June 10th, 2006
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.
Jon June 12th, 2006
Author
@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.
Frances July 10th, 2006
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. :)
raz!el July 20th, 2006
Will this work with Lightbox v2.0?
I love this technique will use/write about it!
Jon July 21st, 2006
Author
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.
lu July 25th, 2006
exciting!
Phillip August 12th, 2006
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?
Frank August 25th, 2006
Very nice - you can see the implementation at http://www.artviper.net/test2/dive - thanks for this!
Ryan August 25th, 2006
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?
Hydroizolacje February 2nd, 2007
This code is amazing. Can i use it on my website?
Jon February 2nd, 2007
Author
@Hydroizolacje: Thanks! Of course you can… feel free to use as you wish when you wish as much as you wish. Have fun.
Mike February 20th, 2007
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!
Jon February 22nd, 2007
Author
@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?
Sherif February 27th, 2007
Mate, very very impressed. Well done. Good to see you even tested out in a text browser!
Jon February 27th, 2007
Author
@Sherif: Thank you very much — be sure to check out the Redux!
Colin March 12th, 2007
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.
Matt Alexander May 7th, 2007
I used this idea when I wrote http://kristinekeheley.com
25 Code Snippets for Web Designers & Developers « SKRaghav-Moves with Latest Updates May 12th, 2007
[...] The difference here is that the whole thing is a simple set of nested lists and CSS. Really. Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery. Lightbox JS - Lightbox JS is a [...]
HoverLightbox: Hoverbox + Lightbox + ... « Come Quando Fuori Piove May 16th, 2007
[...] HoverLightbox: Hoverbox + Lightbox + … Ancora sulle gallerie di immagini ed effetti (+ o - speciali). Dopo Lightbox, versioni 1 e 2, dopo emuli e cloni di Lightbox (tra cui l’ottimo e leggero Thickbox), dopo Hoverbox, (e Hoverbox menu) ecco qui… HoverLightBox. [...]
30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Magazine May 17th, 2007
[...] 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. [...]
CSS: Techniques, Tutorials, Layouts | Smashing Magazine May 17th, 2007
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
Richy’s Random Ramblings / Net: Code Snippets for web designers May 17th, 2007
[...] even more rounded corners, vertical bar graphs just using CSS and PHP (and another method), a hover light box, Lightbox JS, CSS Image Maps, CSS Image Pop-up, Sliding Doors CSS Navigation tabs, taming lists, a [...]
Gestion de galeries photos en AJax | Le blog de nebuloz May 19th, 2007
[...] Suckerfish HoverLightbox [...]
BASIC Action Ohana Group » An update to our image gallery May 22nd, 2007
[...] hoverbox effect created by Nathan Smith of SonSpring and the blending of this technique with the Suckerfish Dropdowns menu. The effect was just [...]
Code Snippets for Web Designers « The Kool Blogs May 24th, 2007
[...] Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery. [...]
Tekjuice.com » Blog Archive » 30 Scripts For Galleries, Slideshows and Lightboxes May 29th, 2007
[...] 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. [...]
30 Scripts For Galleries, Slideshows and Lightboxes | Tekjuice.com May 30th, 2007
[...] Suckerfish HoverLightbox [...]
CaudalWeb Blog » Blog Archive » 30 scrips galerías de imágenes June 1st, 2007
[...] Suckerfish HoverLightbox [...]
Estaré yo loco » Scripts para desarrollar tu propia galería o presentación de imágenes June 1st, 2007
[...] Suckerfish HoverLightbox [...]
» 收集的css相关资源网站 June 7th, 2007
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
Suckerfish HoverLightbox - Ajax Compilation June 8th, 2007
[...] Website. [...]
Блог » Архив June 11th, 2007
[...] Suckerfish HoverLightbox [...]
Ajax, Javascript, Css, Html, DHtml , Cms, Php, Flash Script Bank » Blog Archive » Suckerfish HoverLightbox June 12th, 2007
[...] Suckerfish HoverLightbox Roll over a title, it shows a grid of thumbnails. Rolling over a thumbnail shows a slightly… [...]
Tutorials Round-Up: Ajax, CSS, PHP and More | Smashing Magazine June 25th, 2007
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
absar June 29th, 2007
what a great pics. Thanks
Genius Web Design in Egypt July 4th, 2007
Very Nice … Thanks alot
NADA July 6th, 2007
[...] 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, [...]
Mat July 23rd, 2007
Brilliant gallery script. Is there any way of implenting it with out the headings title, so you have a page of thumbnails already up?
host domain radyo July 26th, 2007
Very Nice … Thanks alot
Web Design Analyst August 3rd, 2007
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?
Ten Web Designers August 3rd, 2007
Can we have a multilingual usage of this script. I am eager to use it in GUI.
LightWindow v2.0 i inne August 8th, 2007
[...] Suckerfish HoverLightbox [...]
Konin August 9th, 2007
Very good gallery script.Thanks.
» 25 Code Snippets for Web Designers (Part1) August 13th, 2007
[...] Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery. [...]
memo August 18th, 2007
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?
Jon August 20th, 2007
Author
@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.
Melanie August 20th, 2007
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!
Ajaxflakes.com - code sample library, download and demo these funky ajax and dhtml scripts August 23rd, 2007
[...] Suckerfish HoverLightbox [...]
Suckerfish HoverLightbox Redux - Monday By Noon September 2nd, 2007
[...] the original Suckerfish HoverLightbox was published, I was honestly surprised at the amount of attention it received. I was a fan of the [...]
Alien » Blog Archive » COOL CSS 应用 September 14th, 2007
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
webbilgisi » Blog Archive » fotograf galeri scriptleri September 16th, 2007
[...] the ultimate lightweight Lightbox clone & Suckerfish HoverLightbox [...]
Colección de clones de Lightbox para todos | aNieto2K September 19th, 2007
[...] Enlace / Peso: 24kb / Framework: Prototype, script.aculo.us / Descargar / Otras versiones: Hoverlightbox Redux [...]
Katalog Stron September 28th, 2007
Excellent work!
paishion October 7th, 2007
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???
glo October 8th, 2007
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
Pablo Fossa - diseño web October 15th, 2007
muy buena la herramienta. particularmente la he probado y me dejo muy satisfecho. muchas gracias!
Jonathan Christopher October 17th, 2007
Author
@paishion: I don’t quite follow what issue you’re having with the example, perhaps you could shoot me an email with a few screenshots for reference?
BABACAN October 21st, 2007
Thanks good article
AMANDA October 26th, 2007
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!!
Jonathan Christopher November 2nd, 2007
Author
@AMANDA: I checked out your implementation and it appears to be working fine for me. In which browser(s) are you having this trouble?
Web-Sites of the Month: Best of February 2007 « Kimberly’s Weblog November 3rd, 2007
[...] a hover slideshow for sometime now. And here it is, even more professional lloking then I imagined. Suckerfish HoverLightbox [...]
asrai November 6th, 2007
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
Tutorials Round-Up: Ajax, CSS, PHP and More - Article Save November 12th, 2007
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
行搏客 » 30个javascript相册程序（有ajax效果） November 16th, 2007
[...] 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. [...]
Suckerfish HoverLightbox : sastgroup.com November 19th, 2007
[...] web: http://mondaybynoon.com/2006/0.....rlightbox/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
fotograflarınızı sergilemek ve slayt halinde göstermek - BEYNİM ZONKLUYOR SEFA November 23rd, 2007
[...] suckerfish hoverlightbox [...]
Arjen Kramer November 29th, 2007
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….
Jonathan Christopher November 29th, 2007
Author
@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.
Greg December 2nd, 2007
Great work, that must have taken a while. But it came out great :D
Popular Ajax Scripts « Fungarden’s Weblog December 6th, 2007
[...] Suckerfish HoverLightbox [...]
Ventanas emergentes « Código al Descubierto December 16th, 2007
[...] Sukerfixh HoverLightbox Variante de LightBox. No he conseguido hacer que funcione ni desde la web propia de la librería. [...]
Welson’s Blog » Blog Archive » 各种 lightbox 实现 December 19th, 2007
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
Benjamin Alijagić » 10 Free Gallery’s for your pictures December 24th, 2007
[...] Suckerfish HoverLightbox -> Demo - Site - Download Filed under : NovostiBy Benjamin Alijagić On December 24, 2007 At 3:42 pm Comments : [...]
Скрипт для организации галлерей » Скрипты » AllAJAX.ru January 3rd, 2008
[...] Обзор[en] Скачать Похожие записи: - Скрипт для [...]
Webmaster 38 » Blog Archive » suckerfish hoverlightbox at ajax scripts compound January 3rd, 2008
[...] suckerfish hoverlightbox [...]
momoc_a » 图片 January 9th, 2008
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
John January 9th, 2008
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.
Abir Roychowdhury January 14th, 2008
Nice articles .I have learned something from this article
Really some good information is there .Thanks.
Vijay Raj January 14th, 2008
Great article outstanding work done.
Фотогалереи на Javascript/AJAX/DHTML | Cyrill January 15th, 2008
[...] Suckerfish HoverLightbox Смотрелка, построенная на меню Suckerfish, описанных на ALA и [...]
CSSgallery.info » Javascript lightboxes January 24th, 2008
[...] hoverlight redux make use of prototype/scriptaculous and is an improvement of Suckerfish HoverLightbox which is able to make the initial display in horizontal or vertical mode. The script seems to be [...]
Verschiedene Lightboxen im Überblick | REDUXO January 25th, 2008
[...] Suckerfish Hover Lighbox Ermöglicht den Lightbox-Effekt unter Berücksichtigung auf die Zugänglichkeit. Nicht die typische Lightbox, jedoch trotzdem eine nette Präsentationsmöglichkeit. [...]
Css Lightboxes - The Arts Lab TurkeY January 31st, 2008
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
» Lightbox实现wordpress图片特效 » Web - 骆驼的博客 February 10th, 2008
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
Techniques, Tutorials, Layouts | February 13th, 2008
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
Уеб 2.0 Инструменти: HoverLightBox Wordpress Blogging | Web 2.0 HotMonitor Blog February 21st, 2008
[...] меню. Информация за LightBox и download може да направите от тук .Tags: blogging, blog, widget, wordpress Share and Enjoy: These icons link to social bookmarking [...]
10+ Code Snippet Untuk Desain Web: Menambahkan Fungsi Website Menarik Dengan Kode HTML, CSS, JavaScript dan AJAX Siap Pakai « Dion’s Computer Blog February 24th, 2008
[...] HoverLightBox http://mondaybynoon.com/2006/0.....rlightbox/ Tampilan foto menarik dengan slideshow sudah tidak cukup menarik lagi karena terlalu banyak memakan [...]
Recursos y Tutoriales » Blog Archive » Recursos para Css, Lightbox, Firefox, Flash, JavaScript, Rss, Ruby, Asp, PHP & MySQL y mas.. February 28th, 2008
[...] Suckerfish HoverLightbox [...]
25 Code Snippets for Web Designers (Part1) : Spaksu Blog February 29th, 2008
[...] Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery. [...]
Gallerie fotografiche ajax - Photogallery ajax - Siti web ajax - Lightbox Slideshow | Realizzazione siti web - Creazione Siti web - Progettazione siti web | WebBIZ February 29th, 2008
[...] Suckerfish HoverLightbox [...]
Design Shrine | AJAX SCRIPT RESOURCES March 13th, 2008
[...] 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. [...]
CSS Concept » Blog Archive » Techniques, Tutorials, Styles in CSS March 13th, 2008
[...] Suckerfish Hoverlightbox [...]
VietNam PHP Blog » Blog Archive » Tổng hợp các trang làm SlideShow và Gallery March 21st, 2008
[...] Suckerfish HoverLightbox [...]
Welson’s Blog » Blog Archive » 各种 lightbox 实现 March 30th, 2008
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
10+ Code Snippet Untuk Desain Web: Menambahkan Fungsi Website Menarik Dengan Kode HTML, CSS, JavaScript dan AJAX Siap Pakai « The Last Of Dreams April 8th, 2008
[...] HoverLightBox http://mondaybynoon.com/2006/0.....rlightbox/ Tampilan foto menarik dengan slideshow sudah tidak cukup menarik lagi karena terlalu banyak memakan [...]
Lightboxスクリプトいろいろ | DesignWalker April 11th, 2008
[...] 9. Suckerfish HoverLightbox [...]
Lightboxスクリプトいろいろ - DesignWalker April 15th, 2008
[...] 9. Suckerfish HoverLightbox [...]
Ajax Galleries « One kind of Life April 23rd, 2008
[...] Suckerfish HoverLightbox [...]
Tech-Elite » Blog Archive » Content Overlay - Die Verwandten von Lightbox April 24th, 2008
[...] HoverLightbox: Link zur Seite Auch für kommerzielle [...]
» CSS Hakkında Siteler Serisi - Seri 2 yonetim danışmanlığı ekonomi sermet sandıkcı April 25th, 2008
[...] Suckerfish HoverLightbox [...]
Verschiedene Lightboxen im Überblick | REDUXO April 30th, 2008
[...] Suckerfish Hover Lighbox Ermöglicht den Lightbox-Effekt unter Berücksichtigung auf die Zugänglichkeit. Nicht die typische Lightbox, jedoch trotzdem eine nette Präsentationsmöglichkeit. [...]
WD style - lightbox May 1st, 2008
[...] 9. Suckerfish HoverLightbox [...]
Recursos y Tutoriales » Blog Archive » 30 scripts para crear galerias,slideshows y lightboxes en AJAX May 6th, 2008
[...] 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. [...]
Recursos y Tutoriales » Blog Archive » Super Post CSS May 6th, 2008
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
各种 lightbox 实现 at Leo’s Simple Life June 1st, 2008
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
各种 lightbox 实现 | SunnyV June 7th, 2008
[...] Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。 [...]
Tutorials Round-Up: Ajax, CSS, PHP and More | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması June 7th, 2008
[...] Suckerfish HoverLightbox Jonathan Christopher [...]
Ajax und kostenlose scripts mit demo « Ajax scripts blog June 22nd, 2008
[...] Suckerfish HoverLightbox [...]
Web Grafi 2.0 » Blog Archive » Colección de clones de Lightbox para todos June 29th, 2008
[...] Enlace / Peso: 24kb / Framework: Prototype, script.aculo.us / Descargar / Otras versiones: Hoverlightbox Redux [...]
PP blogt » 16 Lightbox varianten July 15th, 2008
[...] 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 [...]