Lightbox images vs regular images

Design help General
1

I have a question about using lightbox images vs regular images. I don’t want a gallery style lightbox, but I have images sprinkled throughout my site that I would like to add the extra functionality of when if you click on an image, it opens larger on the screen so you can see it more closely. I want to make this a global change on the site, not necessarily create a lightbox for every single image. Is there a simple way to do this?

I’ve checked out the custom code for magnify, which isn’t what I want to do (I’d rather have the entire image enlarge on the screen). But it got me thinking, does custom code exist for this function that I could apply to the whole site?

Thanks in advance!

2

@MeganBH I think doing this for the images you want to enlarge on click will do the trick : Vidyard Recording

One more thing, you don’t have to create new animations every time just select the pre-existing ones you created.

3

If images are scaled the quality will be affected (degraded). If image quality is important then you would need to have the image wrapped with a link that points to a higher quality image. Then code would have something to load. It would be possible to target a link with a specific class and perform some action on it. This is pretty common when using third party lightboxes.

You would either need to leverage a external lightbox library, custom code a solutions, or just roll up your sleeves and use the built in lightbox Webflow provides.

4

Thank you so much for this thorough video! You solved for me very quickly something I had been searching for hours how to do.

One more thing – the animation currently expands it in it’s current position. This is great if it’s centered, and the new size fits within the window.

  • What about if the image is offcenter, like if it’s a grid with two columns? This seems to expand it beyond the frame of the page.
  • Similarly, what if the image is already relatively large, but clicking it makes it too large? Can I set a max width to the window size?

Thank you again! You’ve been a lifesaver this week.

5

@chris_loggins Do you have a moment to review some questions above regarding sizing? Thank you again!

6

@MeganBH Sure, what would you like to ask?

7

@chris_loggins – the animation currently expands it in it’s current position. This is great if it’s centered, and the new size fits within the window.

  • What about if the image is offcenter, like if it’s a grid with two columns? This seems to expand it beyond the frame of the page.
  • Similarly, what if the image is already relatively large, but clicking it makes it too large? Can I set a max width to the window size?
8

Can you send me a link and a preview link to your project so I can see what exactly is going on @MeganBH?

9

@chris_loggins https://preview.webflow.com/preview/megan-hooks?utm_medium=preview_link&utm_source=dashboard&utm_content=megan-hooks&preview=5881157fdfa13f1c4a6ff7f33afff6ac&workflow=preview

10

@MeganBH Thanks, so I am currently going to make an entirely new interaction for you. This will create a “lightbox” without the styling. Please give me a little bit to make a video for you.

11

@MeganBH Lightbox but not a Lightbox

I came up with a new clever solution, please note you will have to play with the image-container size based on how big your image is.

Let me know if you need any further help.