Streaming live at 10am (PST)

Full CMS Lightbox!


#103

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!


#104

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.


#105

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

https://css-tricks.com/almanac/properties/o/object-fit/


#106

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 -


#108

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


#109

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.


#110

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.


#111

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


CMS LIghtbox - Remove Empty Thumbnails
#112

DELETE EMPTY LIGHBOXES THUMBNAILS

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

#113

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

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


#114

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 https://www.seawalltrail.com/gallery

Cheers,
Ethan


#115

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.


#116

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?


#117

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!


#118

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.


#119

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


#120

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…