February 19th, 2007
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.
Comments
146 Comments
Suckerfish HoverLightbox - Monday By Noon February 19th, 2007
[...] If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved [...]
davidbisset.com » Suckerfish HoverLightbox Redux February 19th, 2007
[...] Basically it’s a CSS solution for thumbnails in dropdown menus. [...]
Nate February 19th, 2007
Doesn’t seem to work properly in IE 6. Menu flashes when moving the mouse.
Nate February 19th, 2007
n/m
Billy February 19th, 2007
It’s fantastic, however all the transitions and gimmicks are hardly necessary. The flashing and sliding and this and that just display the picture and controls already.
Jon February 19th, 2007
Author
@nate: Everything working OK for you?
@Billy: Your point is well received. You’re right, the gimmick isn’t necessary, this example is an updated version of the original which was put together as a result of a past client request. It was put together and I just wanted to put it up as possible inspiration for other designers.
Matt Brett February 19th, 2007
Oh, this is super nice Jon. I like it a lot, while I wasn’t overly stoked on the first version. I find this one to be more practical and can definitely see myself using it in future.
Jon February 19th, 2007
Author
@Matt Brett: Thanks a lot, the first version was quite sub par, and there is definitely room for improvement on this one as well (as far as making it that much more bullet-proof) but it’s a step up I think.
chris February 19th, 2007
this is nice, but i have one problem: losing the hover state on each “gallery”. there needs to be a way to maintain that state, preferably by clicking the gallery name. it’s nice to get the preview on hover, but if i click on a picture and want to go back to the thumbnails, i have to hover over the name again. (and i don’t think you’d need to add too much javascript to accomplish this. suckerfish already uses javascript to accommodate for IE’s lack of :hover support…it would just take one or two more lines there to add an onclick event.)
Jon February 19th, 2007
Author
@chris: That sounds like a good suggestion — I’ll work on something like that in the couple days. Thanks for leaving your idea!
Deon Sukma Journal » Archives » Image gallery with suckerfish and lightbox February 20th, 2007
[...] Tool bagus untuk image gallery. digabungkan dengan Suckerfish dan Lightbox bisa anda download disini [...]
Khwaja February 20th, 2007
Can you please tell me if we can give this effect for Image Maps.
I tried it but it is not working.
Please let me know if we can do this.
Thanks in advance.
Jon February 20th, 2007
Author
@Khwaja: I’m not sure how this could be applied to an image map to be honest with you — at least not in the literal sense. Technically it should be possible to alter a CSS based pseudo image map to work, but that would require significant modification.
Rich Sipe February 20th, 2007
I had the same issue with the mysterious Prev and Next links. To fix it I just edited the Lightbox.css file to make the links always appear instead of just on hover. You can also set the links here to also change color on hover for another visual cue.
Roman February 20th, 2007
The Suckerfish is a divine light for the CSS-oriented html writers (including yours truly). However, there is one issue that I cannot put up with: nervousness. Suckerfish is in desperate need of a timeout. The more elegant the menu and its content, the more irrelevant the onmouseout fidget.
blog.jc21 » Blog Archive » Suckerfish HoverLightbox Redux February 20th, 2007
[...] Check it out here. [...]
Suckerfish HoverLightbox Redux : cssdesign.dk February 21st, 2007
[...] Suckerfish HoverLightbox Redux En flot og effektiv måde at vise et billedgalleri, kun ved hjælp af css og en smule javascript. [...]
Sophie Dennis February 22nd, 2007
Very nice indeed!
Quick suggestion: if anyone wants to slim down the javascript, I’d recommend looking at “Slimbox” which achieves in 50Kb what Lightbox 2 takes 125Kb to do - partly by dumping Prototype (which includes lots of stuff you don’t need for Lightbox) for Mootools.
Though I haven’t tried it, I’d imagine you could do pretty much just do a straight like-for-like code swap. You’d lose the nice mod to the lightbox nav - I agree that the standard navigation isn’t intuitive for more people - but it should be pretty easy to mod Slimbox to use this navigation model too.
Gerd February 22nd, 2007
I want to use SHLR on a projects gallery. There should be some lightboxes close together. Works, but dropdown area comes under the (dark red) bar of the next gallery. I tried to alter z-indexes - without success. Does anyone have a solution?
Thx Gerd
Yvonne’s Stuff » Blog Archive » links for 2007-02-23 February 22nd, 2007
[...] Suckerfish HoverLightbox Redux - Monday By Noon Combination of Suckerfish Dropdown menu, Hoverbox Image Gallery and Lightbox for an interesting way of dislaying a nice css/javascript image gallery. (tags: Javascript css lightbox gallery webdesign suckerfish image) [...]
Jon February 22nd, 2007
Author
@Rich Stipe: That’s a good idea. I wanted to avoid that in an effort to not have any ‘tabs’ overlapping the image at all times, but it definitely removes the mystery from the navigation. Thanks for the tip!
@Roman: You’re absolutely not alone there. Many people have suggested the inclusion of a timeout or requiring a click to display the gallery. Either one should be fairly simple to include via JavaScript — perhaps I’ll include it in a future version. Thanks for leaving your idea for others to read.
@Sophie Dennis: That’s a good tip. I don’t have any personal experience with trying to replace Prototype but if you’re successful be sure to re-post about it.
@Gerd: I’m not too sure what problem you’re having exactly, do you think you could try to reword and post again? Thanks!
Gerd February 23rd, 2007
Hi Jon, thank you for your response. Maybe screenshots can help: http://groe.be/suck1.jpg shows the situation. 2 Lightboxes, each one presenting a house. The grey bar with “Mehr Infos…” is the red bar of your implementation.
http://groe.be/suck2.jpg is the dropdown state of the upper lightbox. It moves under the grey bar of the next box.
Thanks - and greetings from Germany
Gerd
Jon February 23rd, 2007
Author
@Gerd: That’s very interesting — what browser are you seeing this issue in? Perhaps you could use the Contact section to privately send me a URL where this is happening?
Jon February 23rd, 2007
Author
As a result of the issue Gerd was having, both the vanilla example and download have been updated with a fix to deal with the ‘underlapping’ issue as shown by his screenshots. Please let me know if anyone notices any problems with the changes that were made and I’ll check them out.
Marko February 23rd, 2007
Hello. Really nice work!!
But how hard would it be to put the controls on the top. The the user will not move the mouse every time when photo’s size changes. Arrows will thay on their place :)
ally February 23rd, 2007
Nice work, I think I will be using this where I am currently using the lightbox script. Thanks
Jon February 23rd, 2007
Author
Update: After speaking back and forth with Gerd a bit, the example has been updated to allow for multiple instances of the Redux on the same page. The CSS fix was minor, while the JavaScript crutch for IE6 was modified quite a bit. Be sure to download the new version.
Jon February 23rd, 2007
Author
@Marko: That’s not a bad idea. It would involve rewriting a bit of the Lightbox script as well as the CSS associated with it — but it’s possible.
@ally: I’m glad you enjoyed it — be sure to download the latest version as it includes an IE6 fix that was overlooked.
Troy Schmidt February 27th, 2007
I really like the maintaining the last gallery state and onclick idea. So, what if you got rid of the Suckerfish part and instead used jQuery to show divs and use it for the effects.
Jeremy February 28th, 2007
When you go into Lightbox mode, the image count appears to be doubled. For instance, if you look at the vacation gallery, there are 9 images, but the image count says “Image 1 of 18″.
Jeremy February 28th, 2007
Nevermind. I just figured out that the two examples use the same [vacation] attribute, doubling the number of images for the galleries.
Nichts los at Punctilio March 1st, 2007
[...] dahinter steckt? Suckerfish HoverLightbox Redux. Sehr genial muss ich sagen. Mehr Infos zum Projekt auf der, von mir gestalteten, Website. Morgen [...]
LautundKlar Webdesign Blog » Bildergalerie mit CSS und JavaScript March 3rd, 2007
[...] Suckerfish HoverLightbox Redux: Eine nutzerfreundliche und platzsparende Art eine Bildergalerie mit CSS und JavaScript zu erstellen. Besonders praktisch finde ich die zwei Vergrößerungsstufen der Bilder und dass sich die Galerie automatisch an die Größe des Browserfensters anpasst. [...]
Jon March 4th, 2007
Author
@Jeremy: Great catch, thanks a lot for posting it. The example and .zip have both been updated with that fix.
Keith March 4th, 2007
Not bad, thanks…
Ranbir March 5th, 2007
Hi John, Can I use this lightbox in my site.
Marko Petkovic March 5th, 2007
Very refreshing. I am starting to make my web design portfolio and might use this or some modification.
Jon March 6th, 2007
Author
The Suckerfish HoverLightbox is absolutely available for anyone to use at any time — no need to request permission from me.
Kelvin March 6th, 2007
I wonder if anyone gets into problems when they defined more than 2 div. If i have more than 2 div, the pictures won’t show up, instead it will be displayed underneath the text.
TomK March 6th, 2007
Very nice system. You asked for suggestions and I have one. The dropdown business derives from the script that Patrick Griffiths and Dan Webb published in A List Apart, but they subsequently made significant improvements to it such that it now works even with the older versions of Safari and Opera. That might be something to explore to see if it would solve some of the compatibility issues reported in other comments.
http://www.htmldog.com/articles/suckerfish/
Jon March 6th, 2007
Author
@Kelvin: There were some revisions for that issue. The demo and download should include two instances of a gallery on the same page.
@TomK: The JavaScript is actually only applied to IE using conditional comments. Other browsers apply the CSS properly.
Best of February 2007 | Smashing Magazine March 8th, 2007
[...] Suckerfish HoverLightbox Redux An effective way of presenting an image gallery using mostly CSS and a bit of JavaScript. [...]
Happy Life » Web-Sites of the Month: Best of February 2007 (zz from Smashing Magazine) March 8th, 2007
[...] Suckerfish HoverLightbox Redux An effective way of presenting an image gallery using mostly CSS and a bit of JavaScript. [...]
Chris Romanella March 9th, 2007
Hi. Love the work, works excellent and is one of the coolest things around. Fantastic job!
Wondering though, is it possible to make the enlarged picture from the gallery a clickable link? to an even larger photo or a seperate HTML page? I’m trying to work it in, but I am still somewhat new to CSS. Thanks!
Jon March 10th, 2007
Author
@Chris Romanella: Currently the example does link to the largest version of the image, and you could technically change the link to a separate document entirely, simply by changing the
hreftarget.John March 12th, 2007
Jon,
Great work! Fantastic.
I really like the added navigation in this one, over the closing and re-opening of the original, but do we need all of the pauses and effects? I find I just want the caption and nav bar to be there, not wait for it. Is this something that could be easily changed?
Thanks,
John
Suckerfish HoverLightbox at IMAGINEPAOLO Web Design Blog - Submit News, Links, SEO Tips, … March 12th, 2007
[...] If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved [...]
Suckerfish HoverLightbox Redux » Lillicotch.com March 14th, 2007
[...] More… [...]
Ralf March 15th, 2007
Hi there!
I ran across the same issue as @nate (Feb 19th), the flickering in IE 6.0 - take a look here… seems the replacing part in onmouseout triggers too often?? You can’t see it in my example, but when the gallery is the lowest element of a page (and making it longer - see scrollbar) and is being diplayed on mouseover, scrolling over an image will immediatley throw you back up to the title of the gallery.
example: http://redesign.ralfabels.de/index.php?source=2
Bye
Ralf
Jak szybko stworzyć galerię zdjęć na stronie? « ASD Grafika March 19th, 2007
[...] Suckerfish HoverLightbox Redux (galeria zdjęć oparta o style CSS i Lightbox) [...]
richard March 23rd, 2007
Wow! very cool.
Been trying to get it to work in wordpress but get a sort of dropdown of images instead of a bar. Have you tried this?
thanks,
Richard
Jon March 24th, 2007
Author
@Richard: I don’t follow the issue you’re having, exactly. I’d suggest double checking that the CSS is being correctly applied.
richard March 26th, 2007
Never mind, ditched my own css and starting over from scratch with the hoverlightbox.
Dan April 2nd, 2007
I would love for the drop down to stay open until the mouse hits another “category name”. How can I do this? Also would there be a way to have one of the drop downs to be open on pageload? These two items would be useful to me.
The project is http://drknife.com/cloud9/pictures.html
Also there are problems in IE v6 at least. A width problem I attempted to fix with a table. Bad idea. Now the thumbnails move around.
Advice here would also be helpful
Love the work!
Thanks.
richard April 2nd, 2007
Hi Jon,
Still working on it, one question popped up: seems that if I use a absolute path with http:// etc.. for the image link the image will open but only the image, not in the lightbox. If I use a relative path it seems to work.
Do you have the same?
thanks,
Richard
Matt Walker April 11th, 2007
Hi Jon, Kudos for the great work that you’ve done and shared publicly here. Its always encouraging to see such neat and professional work shared and supported so well. I had a question to add, put I stuck with it and figured it out and I’ll list it below in case others are wondering about the same question.
I was wondering if it were possible for images in the hoverbox section to be portrait dimensions instead of landscape. By copying some of the gallery css declarations, swapping the width/height values and appending a class called portImage to the li elements of the appropriate images I was able to get the result I was looking for.
cheers Matt
Below are the css declarations I swapped the dimensions in.
.gallery ul li ul li.portImage a img
.gallery ul li ul li.portImage a
.gallery ul li.portImage a:hover img,
.gallery ul li.portImage a:active img,
.gallery ul li.portImage a:focus img
Jon April 11th, 2007
Author
@Richard: That’s an unusal problem I’ve never run across — I will have to look into it.
@Matt Walker: Thanks so much for taking the time and effort to post your comment — I hope that it helps someone out in the future. Thanks again!
RedBulk » Blog Archive » Lightbox April 21st, 2007
[...] JS | Lightbox JS v2.0 | iBox | ThickBox Multifaceted | Lightbox | LightWindow v1.1 | Greybox | HoverLightbox Redux | Slightly ThickerBox 1.7 | Lightbox with moo.fx | Leightbox | Prototype | Lightbox Plus | Lightbox [...]
Matt Cushing April 24th, 2007
I’m curious to see if you could implement some kind of admin functionality, rather than hand coding each pic. I’ve put some php notation in mine to allow me to keep the pic names and alt/titles in the header and change them there.
Wondering if I should attempt a more db laden approach and pull the values from a db and allow the values to be updated from some kind of php form page.
Ellen April 25th, 2007
This is very nice.
Things I would like to see …
I’m trying to avoid js, so I’d open the full size into another place on the page or another page (see cssplay.co.uk for some of these ideas.
It would be nice if these galleries could jump horizontally as well as vertically. I have set up my gallery pages with a separate vertical menu that links to each sub-album.
It would also be nice, and this is probably incredibly simple by simply adding “overflow: scroll” to the , to have the gallery include a scroll bar so that there is no limit in the number of photos included in each album.
Thank you again.
Jon April 26th, 2007
Author
@Ellen: Thanks for your feedback! The JavaScript progressively enhances everything so if a reader doesn’t have a JS enabled browser, they’re directed to the picture itself. You can remove it completely by taking out
rel="lightbox"and not including any of the Lightbox-oriented JS.The original Suckerfish HoverLightbox includes a vertical version that may be of use to you.
Yes, if you have an extremely large photo gallery, managing a scroll bar of some sort would be of some use.
Thanks again for your thoughts.
Jon April 26th, 2007
Author
@Matt Cushing: Yes, it’s definitely possible to incorporate your ideas, in fact I’ve done just that on numerous occasions. In order for me to provide an effective demo, however, I needed to provide a static page.
ulli May 3rd, 2007
Hi,
very good work!
What are the terms of use for the Suckerfish HoverLightbox Redux or Suckerfish HoverLightbox on a private website?
Richard May 6th, 2007
Well… it took me some time but I got it up and running! Absolutely loving it! I still did a little bit of my own thing with it and integrated it in wordpress using the d13gallery plugin and rewrote bits of the plugin. Check it out at http://www.urban-exploring.com
thanks alot!
Richard
Jon May 7th, 2007
Author
@ulli: The code can be used by anyone for any purpose at all, have fun!
@Richard: Congrats, I’m glad you were able to make use of the example.
Project83 Blog - Commentary on web development, standards and small business » Highlights for 5/17 May 17th, 2007
[...] the name needs a little work, but this is a really great dropdown demo. If only I knew of a way to use it . . [...]
30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Magazine May 17th, 2007
[...] Suckerfish HoverLightbox Redux 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. [...]
ikaruga May 24th, 2007
Great job! But what am I doing wrong here?
http://worthyisthelamb.info/newtitles.html
Why does it work in Firefox but not in Explorer? All I need is a simple drop down menu with the hoverboxes…
Oddity May 24th, 2007
Hey guys, great work. : )
I just have one little question.
When I click on the link.
(supplying the drop down gallery of pictures)
It takes me to the image directory.
Is there anyway to disable that some how ?
Thanks in advance, and again; great work.
Take care.
Tekjuice.com » Blog Archive » 30 Scripts For Galleries, Slideshows and Lightboxes May 29th, 2007
[...] Suckerfish HoverLightbox Redux 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. [...]
30 Scripts For Galleries, Slideshows and Lightboxes | Tekjuice.com May 30th, 2007
[...] Suckerfish HoverLightbox Redux 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. [...]
CaudalWeb Blog » Blog Archive » 30 scrips galerías de imágenes June 1st, 2007
[...] Suckerfish HoverLightbox Redux [...]
Post 3 :: Sava Lounge June 2nd, 2007
[...] following is a demo of the Suckerfish HoverLightbox Redux by Jon [...]
Vincent Harding June 8th, 2007
Great work - I have used it on a website I am creating but I have had a couple of problems in IE6.
I have a left hand navigation menu which is floating left, The lightbox is sitting inside another div. It work great in Safari and Firefox but in IE6 as soon as I rollover any of the images it makes my left hand nav menu vanish.
Please help if you can I am starting to go slightly crazy!!!!!!!!!!!!!!!
Richard June 20th, 2007
Been using this quite some time now on http://www.urban-exploring.com . Found only one “flaw”: if the thumbs are not fully loaded (and I have an automatic thumb generation so the first time takes a while) sometimes when clicking on the image it appears not in the lightbox but just in the window. always room for improvement :(
Can’t wait to see what’s next!
Junior July 6th, 2007
Yea, i ran across that bug too with images not appearing in the lightbox, but i think users would just have to wait until the page loads first to have that work properly. However, this is a nice implementation of those 3 three great scripts, hats off to you my friend.
Kai July 20th, 2007
Hey, first and foremost, great script! Really. I’ve been looking for a gallery for a bit now, i’ve seen the scripts you used many times (suckerfish, lightbox), and had no idea the perfect gallery was right in front of me. Well, almost perfect, i’m wondering if it’s possible for the first menu item to be active (display its gallery) until another menu item is hovered over?
Lon July 20th, 2007
Brilliant tool. Love it! I’m a consultant and use this to post screen shots to my website. Two things:
@Oddity - The button that brings up LB taking you to the image directory also bothered me. I’ve taken the images in each gallery and run them through Adobe Lightroom to generate an HTML gallery. Then I link the top page of that gallery to the before mentioned button. That way, if the user inadvertantly clicks on the button or their browser is just incompatible with LB, they are still taken to a very polished alternative gallery that degrades very well.
@Richard - I also found that clicking on a gallery image will just open the image and not in LB. Very embarrassing, actually…
I was giving a consultation, and the client wanted to see examples of my work. I directed them to my site and it went kaput right in front of my eyes.
I’ll be double checking my links to see if they’re absolute; if that has anything to do with it. Out of curiosity though, I browsed to the page, turned off javscript, and got the same result; so, it might be that that prospective client just didn’t have javascript enabled.
Jon July 20th, 2007
Author
Hi all, apologies for the delayed response here.
@ikaruga: It appears as though your images are no longer available resulting in broken image links.
@Oddity: That is actually an intended feature, you can alter the
hrefof the anchor to have a target of # to prevent the redirect, but the link to the directory was included as to not have a purposeless link.@Vincent Harding: From what I can tell it sounds as if you may be suffering from IE’s famous Guillotine Bug.
@Richard: Yes, that’s more than likely simply due to the fact that the page hasn’t completely loaded. I’ll try to determine a solid fix for a future version.
@Junior: Hopefully I’ll be able to prevent something like that happening in a future version.
@Kai: You’re not the first person to request such a feature. It should be easily implemented using a bit of JavaScript — I’ll work that into a future version as an option perhaps.
@Lon: Thanks for helping out with some answers! Yes it’s entirely possible your client was using a browser without JavaScript — the good thing is that the gallery still works! It would be possible to alter things to link to a ‘prettier’ page with JS disabled, but that would add another layer of complexity to the project as well.
Rob July 24th, 2007
Richard, I’d be interested in your modded d13gallery plugin. Care to share the love?
LightWindow v2.0 i inne August 8th, 2007
[...] Suckerfish HoverLightbox Redux [...]
Urban-Exploring.com » Blog Archive » Another gallery mod August 10th, 2007
[...] update my d13gallery plug-in which I already added the hoverlightbox redux stuff to. I included some code from phpgraphy, an open source php image gallery, to display the [...]
JavaScript Image Slideshow Galleries Like Lightbox August 12th, 2007
[...] Suckerfish HoverLightbox Redux - based on several other well known effects [...]
All Free Lightbox Codes « Andrew Powell August 20th, 2007
[...] Suckerfish HoverLightbox Redux [...]
TrendyThreadz.com : minboost.com August 28th, 2007
[...] Suckerfish HoverLightbox Redux -an open source Javascript image gallery [...]
Kiwihaus - Matias Etchevane - » links for 2007-02-20 September 5th, 2007
[...] Suckerfish HoverLightbox Redux - Monday By Noon JS - Mix de galerias integradas (tags: gallery lightbox Suckerfish javascript) [...]
webbilgisi » Blog Archive » fotograf galerisi script leri September 16th, 2007
[...] Suckerfish HoverLightbox Redux & ThickBox 2.1.1 [...]
Lightbox clones round-up at ajaxflakes.com September 18th, 2007
[...] Suckerfish HoverLightbox Redux [...]
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 [...]
shaun September 19th, 2007
hi i like this very much and wish to utalise it in a site. Im in my infancy as far as web design goes and am learning all the time. is it possible to change the colour from red to another? and i am having trouble adding galleries to the title bar. i figured all this out with suckerfish but i like this better. the answer is probable so simple for the more experianced. any and all help greatfully received
shaun September 19th, 2007
managed it thanks
Paul37 September 24th, 2007
Hi there, congrats, very nice script!
But I think I like the look of the older version better, I wonder how difficult will be to implement the old look into this new version? any pointers will be appreciated. Again, thank you for the gallery!
Paul37 September 25th, 2007
Never mind I am liking the new one better now, thank you
Katalog Stron September 25th, 2007
Can you please tell me if we can give this effect for Image Maps.
I tried it but it is not working.
Richard September 28th, 2007
Just made a cool new adjustment to my lightbox: it show the IPTC caption of the image as title. I use adobe lightroom for processing and type in the IPTC caption.
My lightbox version reads a directory, not a file so I “lost” the ability to give each pic a description. Now it’s back!
Check out my post on Paris Catacombs on http://www.urban-exploring.com !
Meble September 29th, 2007
Hi,
very good work!
What are the terms of use for the Suckerfish HoverLightbox Redux
Jonathan Christopher September 29th, 2007
Author
@Katalog Stron: With quite a bit of adjustment this could be made possible to work as a pseudo-image map. It would take quite a bit of adjustment.
@Meble: Anyone can use the Suckerfish HoverLightbox Redux for any reason; personal, professional, commercial, anything. Have fun!
Projektowanie Domow October 10th, 2007
It would also be nice, and this is probably incredibly simple by simply adding “overflow: scroll” to the , to have the gallery include a scroll bar so that there is no limit in the number of photos included in each album.
Heather B October 11th, 2007
Ohh my this is just great. I needed a gallery and I was imagining something similar to this. Was searching for stuff for days. Didn’t want to install a huge script because it wasn’t needed. And I found your site, At first I was playing with the original hoverlightbox but after reading through the comments on that post I found your like to this…
Thanks so much
Tony Puryear October 11th, 2007
I like this very much, but though I thought I was good at reading css code, I can’t figure out how to change the red color of the default boxes. Do you know what I mean? Where can I find the code to change the page’s appearance?
Thanks for a cool thing,
T.
Marc October 14th, 2007
This is great!
One suggestion: Some sort of built in pagination would be helpful for large image galleries.
Marc
caraudio.blog.com/ October 22nd, 2007
Jio
Been trying to get it to work in wordpress but get a sort of dropdown of images instead of a bar.
Week 9 « Lauracat274’s Weblog October 29th, 2007
[...] Easy, Spotplex, WordPress Feed Styler, Mini tabbed pages, Vertical Bar Graphs using CSS and PHP, Suckerfish HoverLightbox Redux, Flexible fixed layouts, CSS Speech Bubbles , Tableless forms, Common fonts to all versions of [...]
Klimatyzator October 30th, 2007
Very interesting.
Wendy October 31st, 2007
Nice Viewer - is it possible to modify the Css to have the bottom of the page always drop down below the bottom of the lowest gallery (in expanded form)?
Jonathan Christopher November 2nd, 2007
Author
@Tony Puryear: All of the visual control is provided through the CSS files provided with the example. If you need some more detailed instruction please feel free to shoot me an email and I’ll try to help you the best I can.
@Wendy: That’s an interesting thought. With a bit of extra JavaScript I would think that should be possible. Would you mind shooting me an email so we can go over the specifics of your implementation? If applicable, I’ll be sure to post the resulting changes for others to check out as well.
Adam B November 16th, 2007
How do i install this into my joomla template, i tried as a comonenent, module, and mambot. I am new to joomla and am looking for something like this.
Thanks.
Jonathan Christopher November 17th, 2007
Author
@Adam B: Unfortunately, I don’t have any experience with joomla so I’m not sure how to go about integrating this example. It should be easily implemented by applying the CSS, and using appropriate class names on your markup, however.
Suckerfish HoverLightbox Redux | David Bisset: Web Designer, Programmer November 18th, 2007
[...] Basically it’s a CSS solution for thumbnails in dropdown menus. Share This Tags: CSS, Javascript, Menus, Thumbnails [...]
Levi November 21st, 2007
Thanks for the additional navigation at the bottom as navigating the lightbox is a big concern before going live with my new site. Any chance to add rollovers to the bottom nav arrows/close images? Consistancy is the name of the game and I would like to have the same rollover effects as the rest of my website. Also, how come you got rid of closing the lightbox by just clicking in the overlay? seems like an added bonus if the user can figure it out…
Thanks in advance for your reply.
3 opciones de galerías de imágenes « design design December 10th, 2007
[...] Suckerfish hoverlightbox redux Una manera efectiva de presentar una galería de imágenes usando principalmente CSS y un poquito de Javascript. [...]
Alex B December 23rd, 2007
This is amaazing - thank you so much for sharing it! It’s so efficient & attractive all in one bundle; I haven’t found anything that compares.
How easy would it be for me to put a scroll bar in to a gallery myself, though? (I’m still finding my feet in the world of code, so am not really sure where I’d even start trying to put one in) - I’ve one pretty large gallery and have just been using the down arrow to scroll through it, but some fairly odd things have happened as a result sometimes, like the whole nav bar disappearing when I moved back up the page…! Other than rarities like that, though, it’s been very reliable. Thanks again!
Jonathan Christopher December 24th, 2007
Author
@Levi: I removed the action of clicking the overlay as per a client request I had received. The troubling issue that arose was exactly as you outlined; ‘if the user can figure it out’. Many times clients will want things spelled out exactly. Thanks very much for your input! I’m terribly sorry for the delay in reply.
@Alex B: I had never tested with adding a scroll bar to the gallery, probably because it would be so easy for a reader to accidentally roll off the scrollbar in the wrong direction, causing the gallery to disappear. I will have to test with larger galleries for any upcoming versions! Thanks very much for your input!
Śmieszne filmy December 29th, 2007
Yea, i ran across that bug too with images not appearing in the lightbox but I think users would just have to wait until the page loads first to have that work properly. However, this is a nice implementation of those 3 three great scripts, hats off to you my friend.
That’s good job. Very thanks.
London January 1st, 2008
Hi, my name is christopher.
I like this very much, but though I thought I was good at reading css code, I can’t figure out how to change the red color of the default boxes. Do you know what I mean? Where can I find the code to change the page’s appearance?
Jonathan Christopher January 2nd, 2008
Author
@London: You can control all of the styles by directly editing the associated stylesheet.
Randki January 8th, 2008
This is great!
Only one suggestion:
Some sort of built in pagination would be helpful for large image galleries.
Walejko
Anton January 15th, 2008
Hi Jonathan!
This is amazing article, superjob man, but big problem i see in it, maybe someone has found out it already so if i am repeating someone - sorry :-)
So there is the problem. When my mouse walk on thumg pictures, they are turning into a little bit bigger, so for example when am trying to save this bigger picture (do not mix up with finaly biggest picture ), right clicking on the bigger picture -> save. then my mouse going out of the menu. Then i open it again and see that that picture still bigger than usually. so it is like it stuck. :-)
I have noticed it only in IE. Opera do it well!
Jonathan Christopher January 17th, 2008
Author
@Randki: Pagination, in my opinion, would be quite difficult to use. But having a large number of images would definitely be a limitation. If that were the case, something like this might not be the best solution for an image gallery.
@Anton: I’ve not been able to replicate your results — do you mind sharing which version of IE is giving you trouble?
Anton January 18th, 2008
I checked up it on IE 6 and IE 7 both result are not good :-(
Anton January 18th, 2008
If you want, i can send to your mail screenshot of the bug.
Voip January 18th, 2008
Hello, again me. This is nice, but i have one problem: losing the hover state on each “gallery”. there needs to be a way to maintain that state, preferably by clicking the gallery name. it’s nice to get the preview on hover, but if i click on a picture and want to go back to the thumbnails, i have to hover over the name again. (and i don’t think you’d need to add too much javascript to accomplish this. suckerfish already uses javascript to accommodate for IE’s lack of :hover support…it would just take one or two more lines there to add an onclick event.
Chris
Forum Nasza Klasa January 18th, 2008
I like this very much, but though I thought I was good at reading css code, I can’t figure out how to change the red color of the default boxes. Do you know what I mean? Where can I find the code to change the page’s appearance?
CSSgallery.info » Javascript lightboxes January 24th, 2008
[...] Suckerfish HoverLightbox Redux [...]
10 Ajax, CSS, HTML, PHP, Javascript galerias de imagens | Ajax Noticias Novidades tudo sobre Ajax January 28th, 2008
[...] Site oficial: http://mondaybynoon.com/2007/0.....box-redux/ [...]
Heimdall January 29th, 2008
Instead of large JPGs or Gif’s displayed (as the large image), can we instead use HTML?
I would like to post a ASP or PHP Calendar as the larg image displayed after clicking on a small Thumb JPG.
Let me know if that is possible and where I should start poking around in the JS.
Thanks!!
Suckerfish HoverLightbox Redux « This, webdesign, link, resource, development, helpful, css, sites « Sharebrain February 15th, 2008
[...] This is a great way to combine the suckerfish dropdown menu with a sort of picture gallery. 02.15.08 | (Click thumbnail to visit the site!) If you like this site rate it here: [...]
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 Redux [...]
Lightboxスクリプトいろいろ - DesignWalker April 15th, 2008
[...] 10. Suckerfish HoverLightbox Redux [...]
Ajax Galleries « One kind of Life April 23rd, 2008
[...] Suckerfish HoverLightbox Redux 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. [...]
WD style - lightbox May 1st, 2008
[...] 10. Suckerfish HoverLightbox Redux [...]
» CSS Collection II 2008 CSS Concept: CSS can be just that easy.. May 27th, 2008
[...] Suckerfish HoverLightbox [...]
Nono Martínez » Clones de Lightbox June 26th, 2008
[...] Prototype Window, RoeBox, Shadow Box, Slightbox, Slightly ThickerBox, Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox [...]
Colección de clones de Lightbox para todos July 8th, 2008
[...] Enlace / Peso: 24kb / Framework: Prototype, script.aculo.us / Descargar / Otras versiones: Hoverlightbox Redux [...]
Photo Galleries « One kind of Life August 19th, 2008
[...] Suckerfish HoverLightbox ReduxThe 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. [...]
Trochę o galeriach… « Pan Mateusz… August 27th, 2008
[...] Suckerfish HoverLightbox Redux - galeria napisana jedynie w CSSie, wykorzystująca wcześniej wspomnianą technologię Lightbox. [...]
30 Scripts For Galleries, Slideshows and Lightboxes | King F1 October 13th, 2008
[...] Suckerfish HoverLightbox Redux 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. [...]
56 个AJAX图片展示框架(Galleries, Slideshows and Lightboxes) | 梦疑大师的博客 October 14th, 2008
[...] Suckerfish HoverLightbox Redux 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. [...]
Ajax Image Galleries & Lightboxes Scripts | Click On Tech December 22nd, 2008
[...] Suckerfish HoverLightbox Redux 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. [...]
57+ Free Image Gallery, Slideshow And Lightbox Solutions | 1stwebdesigner - Love In Design January 22nd, 2009
[...] 29. Suckerfish HoverLightbox Redux [...]
Hoverbox & Lightbox Examples « Ambient Ideas’ Denver Dev February 1st, 2009
[...] http://mondaybynoon.com/2007/0.....box-redux/ [...]
57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü | Bedavam.Net | March 18th, 2009
[...] Suckerfish HoverLightbox Redux Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox’un bir başka [...]
Image Slideshow Gallery Scripts | Expertz April 13th, 2009
[...] Suckerfish HoverLightbox Redux 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. [...]
57 Galerias Gratis | Lo Pongo Acá April 22nd, 2009
[...] 29. Suckerfish HoverLightbox Redux [...]
57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü | kumsaati | XHTML, CSS, Creative, AJAX, Design, Tutorials, Web 2.0, Web 3.0, May 27th, 2009
[...] Suckerfish HoverLightbox Redux Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox’un bir başka [...]
100+ Photo/image galleries (AJAX, Flash, PHP) May 27th, 2009
[...] Visit » [...]