Streaming live at 10am (PST)

CMS Lightbox - Why is it not working?


#1

When i add the light-box component to a blog category template page i’m given the option to select an image from my collection item. When i select the image from the collection item the light box link block shows the smaller image, but when i click it does not enlarge the image. I’m given the option to add an image from my collection item as a thumbnail, but where do i add the larger image for the lighbox? It works perfectly fine if i upload an image from the uploader, but i want my light box images to come from my dynamic items within my collections. Why does this not work? The light box vanished off the screen as soon as i select an image.

https://preview.webflow.com/preview/runners-up-splash-page?preview=a16194d209b9da46a9991c43a0bc5975


Here is my public share link: https://preview.webflow.com/preview/runners-up-splash-page?preview=a16194d209b9da46a9991c43a0bc5975


#2

CMS lightbox does not work. It is not yet a feature of Webflow.

Here’s a workaround - Dynamic Lightbox with CMS Workaround - Works Perfectly


#3

Really? You have to be kidding me. Why do they tease me with the option on a dynamic page? I guess i’ll look at this tutorial or just write me some jquery that can enlarge the image. Thank You.


#4

Please search the Wishlist for features that are not yet in Webflow, and if there isn’t one for your requested feature yet, you can create a wishlist request.

You can also subscribe to wishlist items to stay updated to announcements regarding the wishlist item.

For possible workarounds (if any), please use the Search feature on the forums.


#5

Do you have previews of the project that are live? The preview links seem to not link to a website.


#6

https://preview.webflow.com/preview/adenco?preview=0cd3a685b1621f85ddcbd3de6d71855f

This is the code used to remove the empty lightboxes. You need to place this code in the footer. I have it in the site settings custom code footer.

<script>
  
  	$(".lightbox-embed:has(img[src=''])").remove();
  
</script>

Good luck