Streaming live at 10am (PST)

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


#31

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


#32

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


#33

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


#34

Hi jbleroux,

did you figure out a way it works for you?

Thanks,
Michael


#35

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

I have to paste it before tag, right?

THANKS :wink:!


#36

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


Dynamic Lightbox with CMS Workaround - Works Perfectly
#37

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

Bravo @Kristian_Widjaja! #javascriptninja :wink:


#38

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


#39

@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


#40

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.
http://blog.jonajo.com/posts/webflow-lightbox-collections-hack/

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


#41

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


#42

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


#43

Are those fields important as well?


#44

When I include another reference from the image to the project, I can set the filter to "project is current project" and it works perfectly ... but maybe there is an even easier solution (as I can't find any filter settings in your project) :smiley: ..

Or do I need a ..
(1) Multireference in the projects collection to the respective images and
(2) Reference in the image collection to the respective project

(PS: Actually, in my test project ... I only need the reference field in the image collection to that I could set a filter to get the relevant images that are linkes to a project. Maybe you your describe how you did the selection, as it seems to be easier to have only one multi-reference field in each project collection :D)


#45

Success! thank you very much. It works like a charm. This will save hours and hours of work and I can easily duplicate it.


#46

It's great - I love it :D!

How did you filter the relevant pictures for the gallery? And what kind of references do you use in the project and image collection?


#47

I am designing actor/ performer sites with one page scrolls so I don't have to get that complicated. One gallery is plenty but that javascript works like a charm. Now just wish i could do the same for the videos. The videos work better in lightboxes too.

always
Jer


#48

@jbleroux Hi Jeremy,

To create the relationship, I created another collection called Gallery Images, which I then refer to as a multi-reference field from Projects. Once that was set up, it was pretty easy to create the gallery, which was done by my non-technical Marketing staff. I know I have a couple of fields remaining in that database that are not used anymore, so I hope those were not too confusing.

So, the main images needed are:

  • A Thumbnail Image (a Project item)
  • A Fullbleed higher res image (A Project item)
  • Gallery Images (Multi reference to the Image Gallery collection)

For data entry, it's best to add the images to the gallery first before trying to refer to them from the Project.

Using the multi-reference field, I needed no additional filtering.

There is another Javascript Hack I used to limit the number of visible lightbox images on the project page to just 6, instead showing all of them I'll write another blog post about that later, but you can see it in the code.


#49

Hi,

your lightbox hack is awesome!!!

I still have one issue with the filter using a multi-reference field:

When I add a multi-reference field in the the project collection that includes the relevant images from the image collection - that is not enough to only show those images. All images are shown.

https://preview.webflow.com/preview/lightboxtest-d12ec9?preview=94249374a75545052e9c102dc604d0a8

The only solution that works for me so far is to create a single reference field in the image collection that includes the relevant project that the image belongs to. With this single reference, I can create a "project equals current project" filter to show the images that are linked to the relevant project.

Of course, your solution sounds much easier to administrate and I would love to implement your solution .. :smiley:


#50

SOLVED :wink:

I selected the wrong collection in the first step ... when you create the dynamic list you have to select the multi-reference colletion and NOT the normal image collection.

Thanks @jbleroux :smiley: