Full CMS Lightbox!

This would definitely be tricky, but I don’t think it’s impossible. One method would be to add a div block and have it sit along the entire bottom of the modal.

Then you can drop in a slider component and set each slide to be something like 10% width so 10 slides will show in the full width slider. From here, you can drop inline images into each slide of the slider. Then, you can create an individual interaction for each thumbnail that, when clicked, will bring up the correct main image.

Definitely complex build, but it may help you here!

1 Like

Does anyone know how we can set a max height for the thumbnail displayed? Every way I’ve tried either stretches or warps the photo.

Thanks! Love this workaround.

1 Like

Have you tried using object-fit:cover; for the class of your thumbnail ?

object-fit | CSS-Tricks - CSS-Tricks

2 Likes

I’m super new to webflow, and am looking to embed a CMS gallery like everyone else. I’ve followed the instruction in this post, and while the lightbox appears just fine, it’s pulling in images from items in other collections, rather than images in the one collection I’m in.

It seems like it’s pulling in the Image 1 field from all collections, rather than pulling in all images for the collection I want. Adding a field is only showing individual image fields though, so I’m not sure how to get around it.

Here is the demo - http://testrealestateproject.webflow.io/listing/alias

Here is a shareable link - https://preview.webflow.com/preview/testrealestateproject?utm_source=testrealestateproject&preview=3900b24451c53d453392ae68388e0642

Here is my code -

Here is a screenshot of how my collection is set up -

1 Like

Hey,

I also started working on a cms gallery last night :slight_smile:

What i did was copy paste the embedblock multiple times and change the cms field within it.

My problem is when i dont fill all the fields i have an empty field in my lightbox. dont know how to fix it.

Gr Argo

1 Like

Out of topic. You use huge images (2-4 mb!!) - resize the image to 1500-2000px and compress the images with tinyjpg.com

About your CMS. You put image1 as a field (So your collection is only with image1). Sorry i never use the trick from the tutorial - try to find the answer in the examples (106 answers). Or open new Q in the forum.

1 Like

Yeah, that’s what I figured, I just don’t know what to switch it to. I’ll continue to keep looking.

edit: The site is just a quick test to play with webflow, so I’m not to worried about the images.

2 Likes

See her the original demo (From the tuturial):
https://preview.webflow.com/preview/od-webflowtips?preview=fce826f5bbc82db1b3c139d411b30f01

1 Like

DELETE EMPTY LIGHBOXES THUMBNAILS

 $(".lightbox-link").each(function(){    
      if ($(this).find(".lightbox-image").attr("src") === "")         
        $(this).remove(); 
 });
2 Likes

Everything is fine, until i try to open the gallery, it is just loading.

Link: http://lightbox-999d7f.webflow.io/

1 Like

Hey guys,

I’ve implemented this and it’s working great, but the captions don’t seem to be accepting special characters like quotation marks. They revert them over to ASCII. Any help here?

See the example at Gallery | The Seawall Trail | Cape Breton

Cheers,
Ethan

1 Like

Hey @ethanfenton,

I noticed that your site takes very long for loading. I believe its cause because of that many pictures that you are loading into the site.

1 Like

Hey Guys,

Is there anyway to have a single image like this:

image

Where you just click it and the lightbox opens?

I got the lightbox to work but I don’t want to show every image on the page, only a single thumbnail/link block like the image above then have the images appear inside the lightbox. is this possible?

3 Likes

Hello oramsdesign, I do not know what I’m doing wrong and it’s not working. I think it’s a lack of programming knowledge.
Here is my shared project. Could you, please, have a look and tell me what I am doing wrong?

https://preview.webflow.com/preview/helena-mazza?utm_source=helena-mazza&preview=d5c9de138fa54099996a4a26e052e765

The page o I am working is the Gastronomia Template to show lightbox images of Gastronomia CMS and after I work in the Portfolio Template.

https://www.helenamazza.com.br/gastronomia/trufas-veganas-de-coco
Thank you!

1 Like

you can do this by placing the above html code and your cms lightbox into a container with the background image set to your desired thumbnail image then reduce the opacity of your html code to 0 under effects. This should make the link clickable.

This is how I got it to work on a client site but the lightbox starts at the end, which is why I’m on this thread. Hope that helps and if you can figure out a work around for fixing the display order, let me know.

1 Like

Hi There!

I’ve copied the html code and out in the required fields of the cms. But it shows only the same image. What am I doing wrong?
43

1 Like

Has anyone figured this out in 2018 for video?

I’ve tried everything, nothing will load video…

My read-only: https://preview.webflow.com/preview/cho-site?utm_source=cho-site&preview=26a844c60434da1b64c4aeff3fdef3e3

I also followed Samielw’s tutorial on another post, that doesn’t bring up video either… It brings up the youtube player but it won’t pull the video.

Super frustrating, love this platform and want to use it to help build friend’s and client sites, but this does not make us look good…

Would love if @webflow would just make lightbox be able to connect to the CMS…

Ug…

1 Like

I have the exact same issue. Were you able to hide the empty fields?

1 Like

Try this piece of jquery in the “Footer Code”

$(".gallery-lightbox-embed:has(img[src=''])").remove();

Where gallery-lightbox-embed is the name of the embed element that the below code is within

1 Like

Yuhu, i have a problem :partying_face:

The scrollbar is jumping to the middle of the screen when i click on a image :cold_face:
What can i do??

Here is a video of my problem -----> click me

READ ONLY LINK
https://preview.webflow.com/preview/smart-stone-de?utm_source=smart-stone-de&preview=c272d85e901232ba37478c27e3f8bd6f

1 Like