Full CMS Lightbox!


As I update this every so often, you may want to the live example for the latest changes. You can either view the final result or looks at it in the designer (share link) for those who want to look a bit deeper into it.

The lack of CMS support for the lightbox feature has been somewhat annoying, however today I have worked out a fully-functional solution! All it takes is a simple HTML embed and you’ll have a functioning lighbox that updates with your CMS collection.

Step 1: Create a dynamic list
Step 2: Connect if to your desired CMS collection
Step 3: Insert the HTML embed into the dynamic item
(gallery-container and gallery-item are just my style names for my gallery)

Step 4: Add the HTML Code:
Full text available to copy at the bottom of this post.

To get this code I created a standard lightbox as a test and then copied the code from Chrome’s Inspector. I removed a couple of the script codes for width and height that would screw up some of my other images, and I added dynamic fields for the image’s url I wanted.

THUMBNAIL IMAGE - I used the same image from my thumbnail and full shot while I was testing this, but in proper implementation of this I would make a thumbnail image in my collection template, and set that in the <img src="">

Lightbox Group - you can also specify a lightbox group to link them all together. I didn’t in this version, but you would just replace the "photo-gallery" with a dynamic field, or you can just leave it as this if you only have one lightbox on your page.

Step 5: Save and close.
The published website should now have a functioning photo gallery!

HTML TEXT

<a class="w-inline-block w-lightbox" href="#">
  <img src="(image-thumbnail-field)" />
  <script class="w-json" type="application/json">
    {
      "group": "(your-group-name)", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "(image-field)",
       "type": "image",
       "url": "(image-field)"
      }]
    }
  </script>
</a>

I hope this helps some people!

52 Likes

Excelllent!! I was trying to find something like this!!

Great job @oramsdesign

Is there any chance that you can share your preview link to see the complete implementation?

Kudos to you!!

1 Like

BEAUTIFUL!!! Thank you for contributing to the community.

3 Likes

Is the Webflow team working on an official solution to this? Or we’re out of luck? :frowning:

5 Likes

Thank you! As I worked this out while building a client’s site I’m going to put together a website on Monday specifically to house the different Webflow tips I make, once I’ve done that I’ll post the links here so people can get in and have a look. :smile:

3 Likes

Thank you!
That’s what we’re all here for, right?

3 Likes

Not sure yet, but this uses the built-in webflow lightbox so it’s close enough for me. I’m just going to keep tweaking this until an official version comes out.

2 Likes

I’ve just added those links to the bottom of the post now!

2 Likes

I’ve just added it to my project and it just works!!! Great solution while @webflow comes up with an official solution.

Thank you very much @oramsdesign

Would you mind and take a look at my project and tell me if I can connect those lightbox galleries between them in each product?

https://preview.webflow.com/preview/mundipurpura?preview=e1d07eb45e35625cf42d1ffc646e37af

Thank you in advance

Cheers,

1 Like

How / does this work with youtube videos and auto play / auto stop lightbox features?

2 Likes

Hi @aaronocampo, I just had a look at your site, in the HTML embed where you have set the group to “Imagen Principal,” try removing that field and just naming it something static like “gallery.” as you are only displaying one lightbox on the page you shouldn’t need to run a dynamic field there. Try that and let me know how you get on.

As a side note, you currently have the lightbox set to the main image within each tab. I personally would have no tabs and just place the four HTML embeds next to each other, you may need to style the thumbnails a little to get everything to line up nicely.

At the moment a customer needs to click on a tab, then click on the larger image to open up the lightbox, that’s one click more than needed. If you get rid of the tabs and just use the HTML embeds, you can display the four thumbnails in a grid, then clicking on them will open up the lightbox.

Let me know how you get on :slight_smile:

2 Likes

Hi @dsgnr, I’m not sure sorry, I haven’t tested that possibility. You could possibly set the lightbox to display a richtext field that has a video in it, but I haven’t tried it to be sure.

1 Like

Thank you for the advice @oramsdesign I really appreciate it.

For the tabs and lightbox I’m trying to use the tabs as a way to show the picture it self and the lightbox kind of a zoom tool, the client needed a zoom solution and I didn’t come up with a better solution than a lightbox. Maybe you have a solution under the sleeve :wink:.

I’m changing the name of the gallery but I really wanted to connect the lightboxes between them, did you think a way to do it?

I really appreciate the time and help in this matter. Thanks.

Cheers,

1 Like

Try changing your code to this and see if that fixes it.

1 Like

This is awesome!!! :grin:
Thank you!

I have one question:
How can we add captions field?

1 Like

Hey Everyone! Have just updated the page with captions!
I’m still working on getting videos to work, will update when/if I can get that going.

2 Likes

Looking forward to working video.

1 Like

Ok, first i agree: it feels stupid that we have to dive into code while Webflow quote is: Design without writing code.
But this is something everybody uses, so i have to dive in the “Code”

Oram, thanks for making this lightbox solution!
I have a question!
i used your code, and as “NoCoder” it worked. but i have other problems!

I have 3 tabs with 3 images in a product page:
http://www.boetje3.nl/kunstwerk/zomer-2016-1

When i put three times the code, it does not work. Picture one has the code know, and it works.

Question 1: do i need to make a Dynamic list? or can i do it without because i am on a collection page?
Question 2: can it work with three tabs?

Designer link
https://preview.webflow.com/preview/gallerie?preview=572a8320a22870b39aac0cd12b0e90ca

Many thanks for making time for this!
Koen

2 Likes

Hi Koen, doing this with tabs is a lot harder. Are you able to put the code back into all three tabs to I can look at and compare the final results? I can’t work out any problems without seeing them :slight_smile:

1 Like

Hi Oram, great that you will take a look at it!
i put it in all three tabs!

http://gallerie.webflow.io/

1 Like