Streaming live at 10am (PST)

Fancybox Gallery bundle gallery from CMS field

So I have been able to implement fancybox js with webflow CMS from the other tutorials on here, just setting the attribute fancy-box is probably the easiest implementation. What I would like to do though is separate the different galleries. The problem is if I set attribute fancy-box gallery then it gets applied to all items in the CMS collection. So they all go together.

In this case I have a photo collection nested in photographers and want to have fancybox bundle photos for the different photographers. Instead of all the photos.

I have tried adding an embed for the running of the fancybox js script and then changing gallery to a dynamic option but the script won’t run. It only seems to run from the page level.

Is there a way to add a script snippet to bundle the photos in this case based on a collection item field?

Here is the share link
https://preview.webflow.com/preview/gregoryzarian?utm_medium=preview_link&utm_source=designer&utm_content=gregoryzarian&preview=0b0cb0b3899bc713fceb202a02ff6947&mode=preview

and live is https://gregoryzarian.webflow.io/

@Diarmuid_Sexton @Siton_Systems @webdev did you ever do this?

Thank you
Jeremy


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Yes, you just need to add adjust the jquery as below. You need to add a text block into each lightbox-link with the class collection-name and set the text to that item name (or whatever the unique identifier is) and you can hide the text then.

// SETS CAPTION AND SRC OF MAIN IMAGE
  $(".lightbox-link").each(function( index ) {
    $(this).attr({
     "data-fancybox": "gallery"+$(this).find(".collection-name").text(''),,
      href: $(this).find("img").attr('src'),
      "data-caption": $(this).find("img").attr('alt')
    })
  });

The above code I think has an extra “,” after .text(’ '), even after removing it, it doesn’t give the desired result.

I must be missing something here. I added the collection name and hooked the text dynamically. But still all of the images are showing in the fancybox.
image

Sorry, try this:

// SETS CAPTION AND SRC OF MAIN IMAGE
  $(".lightbox-link").each(function( index ) {
    $(this).attr({
     "data-fancybox": "gallery-" + $(this).find(".collection-name").text(),
      href: $(this).find("img").attr('src'),
      "data-caption": $(this).find("img").attr('alt')
    })
  });

Awesome thank you so much. That works perfectly and makes fancybox a great addition to the webflow arsenal. I notice it doesn’t play well with other scripts in combination but this makes fully functioning galleries a much easier prospect.