Fancybox Gallery bundle gallery from CMS field

Design help Custom code
1

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
2

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')
    })
  });
3

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

image
image823Ă—56 5.48 KB

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

4

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')
    })
  });
5

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.

6

Thanks for your code! Little improvement from me. It’s allow to show additional info in caption from CMS. Just add hidden embed code under pic with CMS field what you want to show.
Maybe there is an option not to show (’ ') (whitespace) if the found “.caption-place” field is empty? Thanks!

upd: Solved! also added optional style for .caption-credit

<script>
$(".lightbox-link").each(function( index ) {
  const captionPlace = $(this).find(".caption-place").text();
  const captionYear = $(this).find(".caption-year").text()
  $(this).attr({
    "data-fancybox": "gallery",
    href: $(this).find("img").attr('src'),
    "data-caption": $(this).find("img").attr('alt') + ('. ') +
      (captionPlace ? captionPlace + ('. ') : '') +
      (captionYear ? captionYear + ('.') : '') +
      ('<br/>') +
      ('<br/>') +
      '<div class="caption-credit-text">' +
      $(this).find(".caption-credit").text() +
      '</div>'
  })
  });
</script>
1 Like
7

Hi guys,

I’ve been dealing with something similiar to this topic.

I have a page where client wants a full scrollable page with CMS items. I have implemented lot of custom codes to avoid the limits of the native CMS and also I implemented FancyBox.

The problem is that the galleries connects all together and it’s opening galleries from different CMS items together with other CMS items. How to make it only connecting items from the one CMS separated?

There is my preview link if it’s help. It’s on the page Reasearch - Liquid.

https://preview.webflow.com/preview/jans-cool-site-758126?utm_medium=preview_link&utm_source=designer&utm_content=jans-cool-site-758126&preview=d4df5d39b7cbebb006dccd3cc36f201c&pageId=643ed89b38227878abc7c7ad&workflow=preview

Thanks!