Just revisiting this … I’m putting in a modal as per your suggestion, to pop up like a lightbox would when an image is clicked to show a larger version.
The larger pop up image is determined by a separate field in my collection. However, I really only want the modal popup to occur for those blog posts that have items in that specific field. I don’t want it popping up for every post that has an image.
I am using some “trick” with hiding empty dynamic elements by adding one of this lines to head section like custom CSS (can be used with any tag or class you need):
With modal pop-up it is not so easy. But I have some crazy idea.
What if modal pop-up will be not a div with image inside, but image itself with padding around the actual content. Than you can apply this custom CSS rule to the pop-up image class and if there is no content for large version uploaded, it might not show pup-up at all. Possible issue - it probably will show differently with different image sizes.
Other option - javaScript code. But I am not a coder So here I can’t help.
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.
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.
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. 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:
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
thanks for your post. That looks exactly like what we are looking for!
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)?
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
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.
@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