CMS driven Lightbox - How?

Design help Animations & Interactions
1

Hey everyone,

I want to create a project gallery driven by a cms collection. In the project gallery you can see all different projects as a thumbnail. If you click on one project a lightbox should open where you can see the thumbnail-image in bigger AND more pictures about THIS project. If you close it and click on different project thumbnail the lightbox open again with pictures ONLY to THIS project.

The client should be easy able to update the collection and add new projects with some pictures.

How can i create something like that?

If i create a lightbox and link it with other lightbox it isnt driven by cms. Its a fixed group.
Then i found an old script in the webflow forum but it doesnt even open the lightbox. You can find it on the main page by scrolling down at “Projekte”.

Do you have any ideas? I hope you guys can help me!

Thank you in advance,
David

Here is my public share link:

https://preview.webflow.com/preview/juelicher-ingenieure?utm_medium=preview_link&utm_source=designer&utm_content=juelicher-ingenieure&preview=c4c2e5b2f24916d77f24ae650ec0eb32&mode=preview

2

Did you look at this post?

1 Like
3

Hi,
thank you for your answer.

But the problem is that the lightbox group is still fixed and cant be add or changed from the cms collections, where the client will only interact from. If i could say “take the group name from collectio xy and from a name field” i could get a workaround.

It should work like on this site: JĂĽlicher Ingenieure - Partnerschaftsgesellschaft

  • if you click on the image, images only from this project are shown in the lightbox.
4

@PixelGeek hey mate, do you have any idea? :wink:

5

You can do that with the multi image field in the CMS now. You link it to the lightbox, design the element, and connect it to the multi-image field. Then the client can update it from the CMS. Hope that helps.

6

Hey Raymmar,
thank you for the answer. How can i link the multi image field to the lightbox?
When im trying to go to element settings and choose “get image from…” i can only select the image field but not the multi image field.

7

Hi @Pixelgiant,

The CMS Multi-image is only available within a Template page. If you are trying to add it to a static page it will NOT work!

1 Like
8

Hey WebDev_Brandon,

when im trying to link in a collection page the light box with the cms multi-image field, i can only link it with an image field.

In the Video im showing what i tried to do:

If this isnt possible to link it like that, how do i link it to the lightbox? Do i have to create my own lightbox window with a slider etc. or can i use some custom code for it with some cms fiels? If i have to use custom code for it, does someone have a code for me that i can use in such a case?

9

You are missing the step where you add another collection list to the template with the source being the multi image field.

10

im still not able to navigate through the lightbox with more project pictures…

there is no arrow for left and right where i can navigate through all pictures from one project.

it should work excactly like on this site: JĂĽlicher Ingenieure - Partnerschaftsgesellschaft
When im clicking on an image in this gallery. A lightbox popup of the project that i clicked on and all pictures from this project i can navigate through the lightbox. And the client should be able to update the cms via editor. So i cant set a lightbox group in the designer for it.

11

hi,

found a solution with custom code:

<style>
.hide-image {
display:none;
}
</style>
<a class="w-lightbox" href="#">
  <img src="IMAGE 1 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 1 FIELD",
       "type": "image",
       "url": "IMAGE 1 FIELD"
      }]
    }
  </script>
</a>
<div class="hide-image">
<a class="w-lightbox" href="#">
  <img src="IMAGE 2 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 2 FIELD",
       "type": "image",
       "url": "IMAGE 2 FIELD"
      }]
    }
  </script>
</a>

<a class="w-lightbox" href="#">
  <img src="IMAGE 3 FIELD" />
  <script class="w-json" type="application/json">
    {
      "group": "GROUP NAME FIELD", "items": [{
        "_id": "57e0683ebfc7a6d0523235b2",
        "cdnUrl": "IMAGE 3 FIELD",
       "type": "image",
       "url": "IMAGE 3 FIELD"
      }]
    }
  </script>
</a>