New Fancybox 3 gallery code


Registered User
148 posts

Hi CC
has anyone got to grips with the new Fancybox 3 2017 (not the old v3 beta)
the old code for galleries was as follows

To 'enable' this (ie. gallery), all you need to do is open the page in a wysiwig or notepad and add the following

data-fancybox-group="gallery" within the <a href> of each and every image in your gallery so the code generated by RFF....

<a href="images/gallery/Chrysanthemum.jpg" class="responsive-picture galleryImage fancybox"><picture><img alt="Placeholder Picture" srcset="./images/gallery/Chrysanthemum.jpg"></picture></a


becomes....

<a href="images/gallery/Chrysanthemum.jpg" data-fancybox-group="gallery" class="responsive-picture galleryImage fancybox"><picture><img alt="Placeholder Picture" srcset="./images/gallery/Chrysanthemum.jpg"></picture></a>

the new code is this (from the fancybox website)

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a>

/* This will create two galleries */

$("a.grouped_elements").fancybox(); .....................etc

Can this be inserted into the RFF code some how?
As you can tell i cant do code otherwise I wouldn't be asking the question!!!!

Any response welcome
So we’re all good then : )


Senior Advisor
11,003 posts
Online Now

I don't know Fancybox, and I don't know how far you've got with adding the gallery to RFF. For that, I would need to see the project file. But the attribute you are adding after export could be added as a custom attribute, within RFF. Just open the attributes in the design pane, select 'custom', and write in 'data-fancybox-group' as the name, and 'gallery' as the value.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
148 posts

Hi Inger
Thanks for the reply.
I was adding code after export as i was using the older RSD and you had to insert the original bit of code as described to every image after export.
I didn't know about the attribute thing in RFF.
So by adding this attribute will it apply it to all images. Not got it open in front of me at the moment or do you have to apply the attribute to every image. Not sure how it works.
If you are online tomorrow I could probably do with some help again or I'll post if I get it sorted
Appreciated
Tim
So we’re all good then : )


Senior Advisor
11,003 posts
Online Now

Give all the images the same class, and then apply the attribute to that class.
I won't be much online tomorrow, I'm afraid. And if I am, it will be with a tablet pc. But there are other people here that will be able to help. :)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
148 posts

Hi Inger
Got it to work
in attributes it was 'data-fancybox' only then 'gallery' or 'group1' or 'group2' etc for multiple galleries on one page.
ill up load a file and instruction on how to do it so others can do it. The code wont be pretty but it will work!!! maybe some one can have a go at cleaning it up!!
Thanks T.
So we’re all good then : )

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.