Full CMS Lightbox!

Hi Mikey, I usually create a hidden page for building the manual versions of things like this for testing purposes so it wouldn’t bother me. :slight_smile:

I would either have the hidden page or find out what the javascript link is an link to it into the global custom code.

2 Likes

Hi @oramsdesign,

For some reason this has stopped working today. I’ve tried implementing it in a fresh site but the lightbox links have stopped working…

I have a feeling it’s due to a Webflow update, any work arounds? @PixelGeek

Best,

Cooper

2 Likes

Hi @CooperX,

Webflow now only implements javascript when needed. So to get around this:

  • Make a new hidden page
  • Make a normal Lightbox gallery with the official Lightbox Link Elements

This will make webflow implement the javascript into the website and your dynamic Lightboxes should work again.

I can’t seem to now edit my original post, so I have added it to my live webpage.

3 Likes

Is there a way to have rich text captions? I need to be able to make certain words bold, add paragraphs etc.

As you can see the caption is outputting as plain text where things like ampersands and apostrophes are illegal.

@oramsdesign

2 Likes

Hi @CooperX, I’m unsure about that sorry. As this uses the default lightbox javascript I can’t change that to add features that aren’t already there. I don’t think that you could Bold any of the text, but try typing just the apostrophes and ampersands the regular way instead of the unicode and see if that fixes that issue.

2 Likes

Hey Oram,

Ok thank you. The weird thing is I did write the apostrophes and ampersands the regular way and it then displays the unicode.

What do you think could be going wrong?

2 Likes

@CooperX hmm I’m not sure sorry, that is a bit beyond me.

2 Likes

@oramsdesign,

First, thank you for sharing this great solution with us! :slight_smile: it’s what I’ve been needing, but I’m unable to implement, unfortunately. I’ve read through the thread here several times, recreated your implementation down to the letter ( I think), but am unable to get this thing to properly work.

Specifically, the lightbox does not appear when I click on the published thumbnail. I don’t know what to make of it, and am burning too many cycles trying to trouble-shoot. I’ve looked at everyone else’s implementation (yours, @cwig12, @Koen), and am left even more confused - what am i not seeing, or able to see? is there some javascript you didn’t share that needs to go into the global custom code? If so, would you mind sharing that, please?. Your note back to @Mikeyjay11 mid-December regarding the change-up for the Javascript enhancement workaround indicated something about this.

I would greatly appreciate your help - or anyone else’s - to point me in the right direction here.

Here’s the link to the media gallery as is stands, published;
http://soulplay.webflow.io/media-gallery

Here’s the “hidden page”, the purpose of which I don’t understand and can’t find the equivalent on your demo site:
http://soulplay.webflow.io/hidden-lightbox-2016

Here’s the designer read-only Link:
https://preview.webflow.com/preview/soulplay?preview=4d2d970b11d3cf1bc817ca0fc546c0c2

Mahalo!

  • Derek

Some Screenshots:

2 Likes

Has something changed in Webflow as I have implemented this last week and it worked fine now after republishing my site it will not work and i can’t figure out why!?

2 Likes

Just solved my own problem because I miss read @oramsdesign notes now I’ve added in a ‘hidden’ webflow lightbox it works perfectly!

2 Likes

Hi @oramsdesign, this is excellent that you found a way around the CMS lightbox issue. I have a site with light boxes that the client wants to be able to update - do you offer a hire service where I could get you to edit my pages to make this work?
Thanks

1 Like

Hey all.

I’m having an issue using a single reference in place of the group field. For some reason it makes the images show up twice in the lightbox. I have tried removing spaces from the relevant product collection, it made no difference. Here is the code I’m using. You can see the finished lightbox in the header of this page. http://defelsko.webflow.io/product

Any ideas??

2 Likes

Guys and girls… some how my lightbox is not working anymore?!?
has anyone the same problem?
www.veriwisman.nl

Designer
https://preview.webflow.com/preview/gallerie?preview=572a8320a22870b39aac0cd12b0e90ca

3 Likes

Mine stopped working too!

I don’t know how to fix it!

2 Likes

Hey @oramsdesign,

first thank you for the really helpful guide to build a full cms lightbox within webflow. I implemented your solution and it works really fine.

My question is, if it is possible to add to the gallery, that shows up in the pop up, a image that will only show in the gallery and if this field is empty in the cms than it is not shown in the gallery?

In my project i have 3 thumbnail that open in a lightbox with grouped gallery. Now i would like to give the client the possibility to add an 4th image to the gallery, but not to the thumbnails.

best,
maurice


Shared Link

2 Likes

Is this someting we all want? Why does it have such less vote’s on the wishlist?!?
https://wishlist.webflow.com/ideas/WEBFLOW-I-501

2 Likes

Its not working anymore Maurice!

2 Likes

@Koen but i did manage it.
Check the ready only

2 Likes

Hey webflow-community,

in my test-project the lightbox don’t open! Can you tell me what I’m doing wrong, thx?!
https://preview.webflow.com/preview/test-cms-lightbox?preview=14e001e511a06eb79a4ed126e5cd3746

2 Likes

Hi @blueprinter

Try making a new page in your project and drag in a lightbox component on the page. This will add the lightbox javascript to your project.

Hope this helps :slight_smile:

5 Likes