Streaming live at 10am (PST)

Full CMS Lightbox!


#32

this is the code you'll need

$('.w-lightbox:has(img:not([src]))').remove();

or if you use a class on the "embed element" HTML (i.e. lightbox-embed), then to remove the empty lightbox thumbnails, you would use the following code:

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

let me know if you need any more help.

all the best


#33

Hi Diarmuid,

i tried it like this, but i do something wrong i think?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


#34

can you send your webflow share link?


#35

http://gallerie.webflow.io/


#36

Hey @Koen,
How did you add arrows to go to the next page? Thanks!


#37

Link to previous and next post or page using CMS?
My favorite Sabanna made a great item about it! :wink:
go to the link!


#38

insert this piece of code into the footer code of you website - in the custom code tab in site settings

<script>
$('.w-lightbox:has(img:not([src]))').remove();
</script>

let me know how that goes


#39

You are the greatest!
i put at first on the footer code in the page script, and that did not work!
Now it works!
Thanks Diarmuid! Many Many thanks!


#41

Hey, just a heads up. With the new javascript enhancement implemented, if you are using this dynamic solution then you have to have the lightbox component installed on one of your pages or a hidden page. Otherwise the javascript won't launch and this lightbox will be rendered useless. Just a quick discovery, hope it helps!


#42

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.


#43

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


#44

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.


#45

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


#46

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.


#47

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?


#48

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


#49

@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:


#50

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!?


#51

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


#52

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