List items in a Dynamic Collection? Lightbox with CMS? Embedded code? SEO?

Hi DanUK1,

I am a Jpanaese and english is not my native language. So, it takes lots of time to fully understand each video itself and go through all the video to find out the solution for my problem. Especially need to finish the project within certain time period is big problem. You may say it is not my problem,.
Webflow is suppressed to make the web pages without programing language within relatively short time,. So, I started to use it.

Yes, I will do it (I am doing it when ever I have a time) if these video is well organized listing and well labeled like course, i.e. begginer, intermediate, advance, and some description of the subject. Not like Q &A, it’s time consuming.

Oh well I will try to find out any way, may be this is the only the way.
Just I wanted use my time littler more efficiently in a give time table.

Any news on this? I need to use a lightbox that opens the CMS images in a modal…

2 Likes

Have we had any progress on this yet?
Considering that your can pick the Lightbox link image based on a collection field, I can’t see why setting the actual popup media to a second collection field would be a problem to implement.

2 Likes

That’s the last feature I am missing/ I need to migrate my current page to the CMS … :wink:

Same here… really looking to use the Webflow Lightbox widget, then tell the lightbox where to pull the image from, as I don’t see how this is possible currently? If not, does someone have any tips on how to actually create a custom Lightbox widget as a workaround (keep in mind that I’m not a coder, so hopefully there’s an easy way…)

Hello @LynnUX you may find @sabanna trick tip helpful to create a custom lightbox linked to a Collection :smile:

Awesome, this is perfect… thank you!! :slight_smile:

Hello. At Jonajo Consulting, we also faced the same issue trying to create a lightbox for a dynamic collection in webflow. We were able to hack some custom Javascript which you can insert in the collection page template, so that you can still use webflow’s built-in lightbox.

Here is the code which we added:

//populates url for lightbox
var scriptLightBox = document.getElementsByClassName("w-json");
var urlValue = document.querySelectorAll("img.lightbox_thumbnail_image");
for(j=0;j<urlValue.length;j++)
{
var jsonParse = JSON.parse(scriptLightBox[j].text);
var url = urlValue[j].style.backgroundImage;
actualUrl=url.replace('url(','').replace(')','').split("\"").join("");
var obj=jsonParse.items[0];
obj.url=actualUrl;
scriptLightBox[j].text=JSON.stringify(jsonParse);
}

For a thorough explanation on how we did this, please see my blog post that describes the issue:

http://blog.jonajo.com/posts/webflow-lightbox-collections-hack/

Let me know if you have any questions.

6 Likes

Thank you for this. It is a great hack. Hopefully webflow will solve this within their system but I’m going to give this a go following your blog

I have followed your steps, and created the same structure, however one part has me confused, the link block and image within the link block, what are these referencing? Also just confirming the custom javascript code is placed in the header? On the custom code page. Your website is very effective. And very visually appealing

thank you
Jeremy

Hi Kristian,

thanks for your post. That looks exactly like what we are looking for! :smile:

Unfortunately, I did not manage to implement it based on the information from your post. Which element should have the class “lightbox_thumbnail_image”?

Do you have the possibility to share a “read-only webflow link” to your website (or to a dublicate version of your website that only contains the cms lightbox)?

That would be great!!!

Thanks a lot and all the best,
Michael

1 Like

Hi jbleroux,

did you figure out a way it works for you?

Thanks,
Michael

Do I have to change any variables in the JS code?

I have to paste it before tag, right?

THANKS ;)!

No I didn’t figure it out. Michael. It’s not working for me. Maybe I’ll try to email him directly if he doesn’t check these forums. I second that Kristian. It is often easier to figure out with some sort of webflow link thanks

Hey @michael & @jbleroux don’t forget to wrap the javascript in <script></script> tags :smiley:

Bravo @Kristian_Widjaja! #javascriptninja :wink:

1 Like

Thanks @waldo , in the example do you see what dynamic item the link block and image are linked to. It seems to duplicate the gallery lightbox and lightbox image.

always
Jer

@michael @Waldo do you think the change from example-bg.png to image-placeholder.svg is making the difference? I can’t figure it out. Might just have to go the long work route and do @sabanna 's lightbox fix

Hi there. Here is the read-only webflow link. I’ll put it up for a limited time, until I create a duplicate site for it:

https://preview.webflow.com/preview/buildzig?preview=98067572f14a6ad3f9b8deec6de5d154

I assume you have already read my blog post about this as well.

The custom javascript is in the footer of the collections page.

3 Likes

Thank you Kristian your site is great and the effect is awesome.

Hi Kristian,

that’s great stuff!

I (almost) managed to rebuilt your lightbox. Just one thing is missing … how do you manage that only those pictures are shown that are selected in the respective project? You don’t use filters, right?

Thanks a lot! :smiley:

Michael