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
[…] If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved […]
[…] Basically it’s a CSS solution for thumbnails in dropdown menus. […]
Doesn’t seem to work properly in IE 6. Menu flashes when moving the mouse.
n/m
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.
@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.
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.
@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.
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: That sounds like a good suggestion — I’ll work on something like that in the couple days. Thanks for leaving your idea!
[…] Tool bagus untuk image gallery. digabungkan dengan Suckerfish dan Lightbox bisa anda download disini […]
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.
@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.
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.
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.
[…] Check it out here. […]
[…] Suckerfish HoverLightbox Redux En flot og effektiv måde at vise et billedgalleri, kun ved hjælp af css og en smule javascript. […]
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.
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
[…] 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) […]
@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!
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
@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?
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.
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 🙂
Nice work, I think I will be using this where I am currently using the lightbox script. Thanks
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.
@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.
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.
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”.
Nevermind. I just figured out that the two examples use the same [vacation] attribute, doubling the number of images for the galleries.
[…] dahinter steckt? Suckerfish HoverLightbox Redux. Sehr genial muss ich sagen. Mehr Infos zum Projekt auf der, von mir gestalteten, Website. Morgen […]
[…] 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. […]
@Jeremy: Great catch, thanks a lot for posting it. The example and .zip have both been updated with that fix.
Not bad, thanks…
Hi John, Can I use this lightbox in my site.
Very refreshing. I am starting to make my web design portfolio and might use this or some modification.
The Suckerfish HoverLightbox is absolutely available for anyone to use at any time — no need to request permission from me.
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.
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/
@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.
[…] Suckerfish HoverLightbox Redux An effective way of presenting an image gallery using mostly CSS and a bit of JavaScript. […]
[…] Suckerfish HoverLightbox Redux An effective way of presenting an image gallery using mostly CSS and a bit of JavaScript. […]
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!
@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
href
target.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
[…] If you’re a fan of the Suckerfish HoverLightbox, you’ll probably like the Suckerfish HoverLightbox Redux, a new and improved […]
[…] More… […]
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
[…] Suckerfish HoverLightbox Redux (galeria zdjęć oparta o style CSS i Lightbox) […]
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
@Richard: I don’t follow the issue you’re having, exactly. I’d suggest double checking that the CSS is being correctly applied.
Never mind, ditched my own css and starting over from scratch with the hoverlightbox.
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.
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
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
@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!
[…] 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 […]
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.
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.
@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.
@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.
Hi,
very good work!
What are the terms of use for the Suckerfish HoverLightbox Redux or Suckerfish HoverLightbox on a private website?
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
@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.
[…] the name needs a little work, but this is a really great dropdown demo. If only I knew of a way to use it . . […]
[…] 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. […]
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…
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.
[…] 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. […]
[…] 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. […]
[…] Suckerfish HoverLightbox Redux […]
[…] following is a demo of the Suckerfish HoverLightbox Redux by Jon […]
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!!!!!!!!!!!!!!!
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!
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.
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?
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.
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
href
of 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.
Richard, I’d be interested in your modded d13gallery plugin. Care to share the love?
[…] Suckerfish HoverLightbox Redux […]
[…] 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 […]
[…] Suckerfish HoverLightbox Redux – based on several other well known effects […]
[…] Suckerfish HoverLightbox Redux […]
[…] Suckerfish HoverLightbox Redux -an open source Javascript image gallery […]
[…] Suckerfish HoverLightbox Redux – Monday By Noon JS – Mix de galerias integradas (tags: gallery lightbox Suckerfish javascript) […]
[…] Suckerfish HoverLightbox Redux & ThickBox 2.1.1 […]
[…] Suckerfish HoverLightbox Redux […]
[…] Enlace / Peso: 24kb / Framework: Prototype, script.aculo.us / Descargar / Otras versiones: Hoverlightbox Redux […]
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
managed it thanks
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!
Never mind I am liking the new one better now, thank you
Can you please tell me if we can give this effect for Image Maps.
I tried it but it is not working.
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 !
Hi,
very good work!
What are the terms of use for the Suckerfish HoverLightbox Redux
@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!
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.
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
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.
This is great!
One suggestion: Some sort of built in pagination would be helpful for large image galleries.
Marc
Jio
Been trying to get it to work in wordpress but get a sort of dropdown of images instead of a bar.
[…] 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 […]
Very interesting.
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)?
@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.
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.
@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.
[…] Basically it’s a CSS solution for thumbnails in dropdown menus. Share This Tags: CSS, Javascript, Menus, Thumbnails […]
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.
[…] Suckerfish hoverlightbox redux Una manera efectiva de presentar una galería de imágenes usando principalmente CSS y un poquito de Javascript. […]
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!
@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!
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.
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?
@London: You can control all of the styles by directly editing the associated stylesheet.
This is great!
Only one suggestion:
Some sort of built in pagination would be helpful for large image galleries.
Walejko
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!
@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?
I checked up it on IE 6 and IE 7 both result are not good 🙁
If you want, i can send to your mail screenshot of the bug.
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
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?
[…] Suckerfish HoverLightbox Redux […]
[…] Site oficial: https://jonchristopher.us/2007/02/19/suckerfish-hoverlightbox-redux/ […]
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!!
[…] 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: […]
[…] Suckerfish HoverLightbox Redux […]
[…] 10. Suckerfish HoverLightbox Redux […]
[…] 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. […]
[…] 10. Suckerfish HoverLightbox Redux […]
[…] Suckerfish HoverLightbox […]
[…] Prototype Window, RoeBox, Shadow Box, Slightbox, Slightly ThickerBox, Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox […]
[…] Enlace / Peso: 24kb / Framework: Prototype, script.aculo.us / Descargar / Otras versiones: Hoverlightbox Redux […]
[…] 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. […]
[…] Suckerfish HoverLightbox Redux – galeria napisana jedynie w CSSie, wykorzystująca wcześniej wspomnianą technologię Lightbox. […]
[…] 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. […]
[…] 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. […]
[…] 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. […]
[…] 29. Suckerfish HoverLightbox Redux […]
[…] https://jonchristopher.us/2007/02/19/suckerfish-hoverlightbox-redux/ […]
[…] Suckerfish HoverLightbox Redux Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox’un bir başka […]
[…] 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. […]
[…] 29. Suckerfish HoverLightbox Redux […]
[…] Suckerfish HoverLightbox Redux Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox’un bir başka […]
[…] Visit » […]
[…] 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. […]
[…] 14. suckerfish hoverlightbox redux bir önceki sistemimizin farklı bir versiyonu, değişik diyebilirim […]
[…] 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. […]
[…] 29. Suckerfish HoverLightbox Redux […]
[…] Prototype Window RoeBox Shadow Box Slightbox Slightly ThickerBox Slimbox Smoothbox SubModal Suckerfish HoverLightbox Redux SWFbox Thickbox TinyBox YUI based […]
[…] Suckerfish HoverLightbox Redux Eine verbesserte Version der HoverLightbox. […]
[…] 29. Suckerfish HoverLightbox Redux […]
[…] 29. Suckerfish HoverLightbox Redux […]
[…] 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. […]
[…] 15. Suckerfish HoverLightbox Redux […]
[…] […]
[…] Suckerfish HoverLightbox Redux Prototype e Scriptaculous […]
[…] 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. […]
[…] Suckerfish HoverLightbox Redux Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox’un bir başka […]
[…] pants” transition effects ClearBox – Images only, Image sets, Zoom transition effects Suckerfish HoverLightbox Redux- Images only, Image sets, “fancy pants” transition effects Lightbox JS : Original; a simple, […]
[…] Suckerfish HoverLightbox Redux Prototype e Scriptaculous […]
[…] 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. […]
[…] 29. Suckerfish HoverLightbox Redux […]