Image galleries with fancybox?

Kirby 2 Solved ✅
#1

Is there an easy way to create multiple image galleries with fancybox?

#2

As I remember you can specify rel="gallery1" and rel="gallery2" and so on to separate different galleries.

Note: ID’s are single use and are only applied to one element.
Galleries are created from elements who have the same “data-fancybox-group” or “rel” attribute value.
http://fancyapps.com/fancybox/

#3

like @texnixe posted in Fancybox in Kirby?

http://fancybox.net/howto

/* 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();