Now streaming live

Is there a way to display a single image through a button?


#1

Hi guys! I'm just wondering, is there a way set up a button so once a person clicks it a single image is displayed? Much like a single image on a lightbox would look like, but with a button instead of a thumbnail image.

I hope i made myself understandable, thanks in advance!


#2

Hi @bodyhealth,

One way to complete this interaction is by having an absolute positioned container fade in, then have a close button within that container that would fade it out.

Take a look at my quick screencapture to see how you can complete the interaction: https://drive.google.com/file/d/0BynZs0dQwPd_Nm43UW9kMmZ3dzQ/view

Also, the following is the Webflow share link: https://preview.webflow.com/preview/button-lightbox?preview=001920dc38d00ead2aacf0e2ee9b7a26

Hopefully this helps :blush:
- Micah


#3

Wow! You couldn't have been more clear and helpful, thank you so much for taking the time to help me out, i really really appreciate it !!

Does that method also works if i want to display a gallery through a button? Also much like a lightbox but this time when clicking the button have multiple images show up just like they do on a lightbox image gallery?

I absolutely thank you from the bottom of my heart!!


#4

@bodyhealth Oh, no problem! I enjoy working out your ideas. :nerd:

In regards to your question: Yes, that method also works if you want to display a gallery through a button.

The way I was able to get it to work is by placing a tab inside of the modal, placing an image in the tab container, and placing the same image in the tab link so that when a user clicks on the image it takes them to the container with the correlating image.

You could even put a slider inside of the modal if that is something more of what you're looking for.

Take a look at my quick screencapture to see how your can complete the gallery: https://drive.google.com/file/d/0BynZs0dQwPd_OFRlNEJVS29OQWc/view

Also, the following is the Webflow share link: https://preview.webflow.com/preview/button-lightbox-with-gallery?preview=a6e9549b44216df60fcc3bf76172ca74

Hopefully this helps :blush:
- Micah


#5

Jesus Christ Micah, you the real MVP! Thank you so much man!!!

For some reason, the "X" close buttons are not working even though i tried to follow religiously what you made on your videos, are you able to at least notice what is wrong with the interactions?

Here is the webflow share link: https://preview.webflow.com/preview/body-health?preview=283af8f6badcc63471a6951439b8b8d4

I'm sorry if im asking too much, and i understand if you dont have the time to check it out. In any case, thank you SO MUCH as you already gave me way more help than i could ever ask for!!


#6

@bodyhealth :blush: Glad I could help.

That's really interesting. I'll definitely look into it as I'm super interested to see why it's doing that.

Is there any additional custom code added to the site?

I'll look through to see if I can figure it. Definitely excited to see what we learn :blush:


#7

THANK YOU!!

There are no custom code, the only things going on are the interactions you showed on the videos. :sweat:


#8

Hey @bodyhealth,

The super awesome Webflower, @Waldo, was able to find what updates we'll need to do to make it work:
You have the “Model wrapper” interaction applied to the modal element as well :smile:
so if you click anywhere within the “model wrapper” it’s trying to open the modal which negates the “x close” interaction :smile:

The “Model wrapper” interaction should only be applied to the button

I created a quick video to show you where these updates need to be made: https://drive.google.com/file/d/0BynZs0dQwPd_QzY3TUFRZUJ1cnM/view

Hopefully this helps :blush:


#9

@micahryanhtml @Waldo

THANK YOU SO MUCH!! My problem is solved!

I just love the webflow community, so helpful! You guys are awesome!


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.