Thumbnails leading to same Lightbox

Design help General
1

Loving the new Lightbox feature. Have a question though. I’m working on a photographers site that in each category of images it will display a multitude of thumbnails. Is it possible with the new Lightbox feature to have each of those thumbnails go to the same lightbox? In addition can it display the particular thumbnail image immediately in the lightbox in the correct order?

2

I was hoping to be able to do this as well. I’m building a gallery, and I want each thumbnail in the gallery to open its corresponding image in a lightbox, while still being able to navigate within the lightbox to other images.

For example, within my gallery are thumbnails A, B, and C. If I click on thumbnail B, it would open a lightbox containing images A, B, and C, and image B would be the current item.

3

Hey guys we’re working on that functionality right now. We’re thinking of giving you the ability to give each lightbox object a “group name”. If the lightboxes have the same group name then all the images will show in the same lightbox, but you will be able to see the correct image if you click on the corresponding thumbnail.

That means you will create 4 different lightboxes elements - each will have it’s own thumbnail and high res image. The group name will link them together.

How does that sound?

1 Like
4

Sounds perfect! Ideally, I’d want to have the ability to customize item order as well. Thanks.

5

Sounds great. Excited to see that in place.

6

@Nicknameddesign @kyleyoungblom - Hey guys, we just released the ability set a “Group ID” for each lightbox trigger, let us know if that’s what you were looking for :smiley:

1 Like
7

Sooo easy! I was thinking it couldn´t be so easy but it is. For me is what I was waiting for.
Many thanks.

8

Merely 12 hours from user request to production? Very very nice (:

9

You guys are awesome, can’t get much quicker than that!

1 Like
10

If anyone have any issues, let us know. Thanks for your patience. Cheerios !

11

LIghtbox is working great! Another question, do you anticipate allowing any customization to the lightbox in the future? More specifically, I’m looking to have the Lightbox have an opaque white background so you can’t see the page below instead of the black overlay.

12

Hey @Nicknameddesign we have plans to make the lightbox full customizable, but you’ll have to wait a bit longer for that. For now you can add this to your custom code:

<style>
    .w-lightbox-backdrop {
        background: rgba(255,255,255,1.0);
    }
</style>

And if you want to change the icons you can replace them like this (just copy paste the url for the image that you can host inside your webflow site.

<style>
    .w-lightbox-close {
        background-image: url(http://uploads.webflow.com/longstring1282/close-icon.svg);
    }
    
    .w-lightbox-left {
        background-image: url(http://uploads.webflow.com/longstring0984/arrow-left.svg);
    }
    
    .w-lightbox-right {
        background-image: url(http://uploads.webflow.com/longstring2325/arrow-right.svg);
    }
</style>
3 Likes
13

Thank you once again. Works great!

14

Studying this to see if it is easy to transition it to dynamic data/content, without writing a single line of code! Just hooking it to some {tag_itemID} in BC webapp. Hmm. Webflow is great. Am just expecting the awesome guys at Webflow to move it towards a designer-developer friendly workflow and webflow is on home-run!

1 Like
15

Another great feature would be the ability to turn off the lightbox when going down to mobile. When having a bunch of thumbnails, having a lightbox pop up gets in the way and there is no clear way how to back out of it.

1 Like
16

There is always a workaround for that. Design a simple thumb grid that you hide for all devices but mobile, then simply hide the lightbox elements for mobile.

17

Yup, that’s a good intermediate fix, but when it comes to updating, it’s double the work.

18

Hi, could you tell me how to add hover on lightbox like here http://help.webflow.com/lightbox-overview (the blue one with text)? Tnx.

19

Hi @111, here is a very simple example, you can open the site in preview mode:

https://webflow.com/design/example-lightbox-hover?preview=616cba98f7c2e4a21229943af0a3d860

and see how it works, and see the result here:

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

I hope that helps, cheers!

20

Thank you, Cyberdave! That’s exactly what i wanted. And it’s realy wird that there is no way to do this easier right in Lightbox widget without any additional divs and Interactions. I hope it will be in future.