Streaming live at 10am (PST)

Full CMS Lightbox!

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

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

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

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

Hi @Diarmuid_Sexton

I completely stuck. I’m sure that it’s easy and obvious, but I’ve sped few hours (!) and still cant clear empty fields…
I guess I’m not referring to the correct element in the jqure ‘Footer Code’. Could you explain it to me, like to 5 year old kid.? :slight_smile:

Which element should be named ‘gallery-lightbox-embed’ #1 or #2? I’ve tried both few times. And do I understand correctly that name equals class name?

Ps. Page with gallery is ‘Lista szydeleks Template’ and my project is here:
https://preview.webflow.com/preview/nanichete?utm_source=nanichete&preview=7412df6be27de743bb08beaac3aab035

Thank you in advance for any suggestion,

1 Like

This is great! Is there any way to make this so that it dynamically applies to individual CMS items.

I have a CMS Collection for my work portfolio. I sometimes have photos as part of the work presentation, but it’s normally only video.

I’d like to create a way to pull in 9 photos in a grid that has a thumbnail and full res image through lightbox.

I’ve done:

  1. Created a Photo Collection CMS Collection that I can upload Photo 1, Thumbnail 1, Photo 2, Thumbnail 2, etc.
  2. I’ve created a CSS Grid, inside of it, I’ve placed the workaround that you referenced here, modifying the code for each grid item.

Problem is, I can’t find a way to isolate the items to pull from a specific collection item under the Photo Collection I created.

Any ideas?

1 Like