Streaming live at 10am (PST)

Lightbox Thumbnail - Implementing a different Image on hover


#1

Hi!

I'd like to show a different image when a user hovers on a lightbox thumbnail. Is there a way to do this?

Thanks!

Vicky


How can I make a lightbox hover a different image
#2

Id' suggest a div with background of image-1 then an image object that will be inside that div with image-2. On hover on the image simply reduce the opacity to 0. That's all :) Easiest way of doing so.


#3

Thanks, sounds simple but I'm a bit of a novice so I'm not really sure how to do that. Can you explain in a bit more detail?


#4

http://quick.as/wRBTRDV You are very welcome :)


#5

Amazing, thank you so much! smile
V


#6

hello!!
I have the same problem but i don't quite understand how to place it on top of the lightbox. to be exact i will send you a link to see exactly what i want to do! just hover over the lightbox!!! http://help.webflow.com/lightbox-overview


#7

hi @athina_tzan, here is an example lightbox with hover, I just have the lightbox there, so it is easy to see how it was made:

https://preview.webflow.com/preview/example-lightbox-hover?preview=669bc91519848a853884aee1c0099ef1

and the published site:

http://example-lightbox-hover.webflow.com/

You will want to create your lightbox structure, just like the example :smile: You can also use a linkbox with image inside that in the image overlay if you want :smile: I hope this helps :smile:

Cheers, Dave


#8

Hi Dave! Do you need a unique class for each "lightbox layover"? so that when you hover over 1, if you have a gallery, all of the images dont go to hover state? Or is there an easier way to accomplish this for a gallery?


#9

Hi @shedlightphotography, sorry for the late reply. At the moment, you would need to create separate classes for those elements that you are targeting with the interactions. We will probably have more robust behavior for this in the future, but I cannot say when.

Cheers, Dave


#10

I did a version with the thumbs completely separate with a nested roll over symbol.
I wanted the thumbs to be background images for elastic scaling.
So, I made the lightbox thumb opacity zero with 100% width and height and nested it inside my custom thumbs using option + drag & drop. I used the invisible lightbox thumb only for the large image link and group.

Works fairly easily and the really awesome unexpected surprise was that I could drag and drop to reorder the sequence of these custom thumbs on my page and the lightbox would work out the sequence to match automagically based on page order.

example:
published version
public link

warning: I built this on my trial weekend. may be a little hacked. The invisible thumb and thumb highlight seem welded together?? They used to be separate elements and were at one time a symbol that has since been broken apart. Odd.

-Rob


#11

Rob, I'm trying to do a gallery exactly like yours. I can't access the public link to check how it was done, probably because mine is a free account.

Could you please explain a little bit better how it was done? I'm not interested on the effects on the images. What I really need is a gallery with all the thumbs, and when the visitor click on a thumb, the lightbox opens on that thumb.

Thanks!


#12

Use the lightbox widget that is native to webflow. There is a tutorial for the widget as well.


#13

Hi Aksaunders, I know the lightbox widget. The problem is that I want to have a lot of small thumbs on the page, and each thumb should work as the same lightbox. I know I can use the option to "group" the lightbox, but when I click on thumb number 3 for example, it'll open the lightbox on picture 1 instead of 3. Don't know if I explained it correctly...


#14

My example uses a background image in a div which is more complex than probably necessary.

The base lightbox component has that type of behavior built in as Anthony @Aksaunders recommended. To make it work like mine, you build individual instances of the lightbox component for each thumb. So, create the first. Set the group name. Then you can option drag to replicate. Double click to upload each thumb and set each large image link. When you click on any instance it will take you directly to the large image you have linked on that instance. The rest of the group will appear as thumbs in the lightbox and you can navigate between them exactly like mine.

Do not load multiple large instances on a single lightbox - that serves a different purpose of creating a gallery with one entry point.


#15

Rob, I spent the Christmas night trying to make it work, but I wasn't successful. Would you mind recording a step by step on Camtasia? I'm willing to spend some money on that, please let me know how much you'd charge for this tutorial. Thanks again.


#16

I am at work today but can explain this without the video tutorial I think. To make this work the way you want, you will need to add a separate lightbox widget for each picture. Link these as you mentioned earlier and it will work. You can check out the roster section of this page to see how I made it work. There is a separate lightbox widget for each player and they are all linked together in a group called "bios" or something like that.


#17

exactly.
You create multiple lightbox instances at the thumb level.
You are linking them together with the group attribute.
Then when published, they all behave as one. They share the same pop-up modal window. So when any of the individual thumbs are clicked they show up in the same shared lightbox with the image you selected in focus.


#18

Perfect guys! I understood it now and I could make it work.
I really appreciate a ton for your help. You were awesome!
Merry Christmas from Brazil! smile


#19

Glad it worked @andy! Merry Christmas!


#20

Hello, @cyberdave I want to create the example that you posted above "http://example-lightbox-hover.webflow.com/45". But I cannot view the link to the working file that you had posted, is there another link to a source file or a video that I can view so I can see how to do a hover on a lightbox.

Thanks
D.