How do I make multiple galleries on one page using Fancybox?

I'm trying to make 3 galleries for my website all using Fancybox's class="imglist" with data-fancybox="images" data-caption="". I've tried following How to create separate Fancybox galleries on the same page? for help but it doesn't seem to work. I am using FancyBox v3.2.10.

An example of my code:

<h3 class="dropdown clear">Print Design</h3>
<div id="print" class="imglist">
    <a href="images/work/img1.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb1"></div></a>
    <a href="images/work/img2.jpg" class="fancybox" rel="gallery01" data-fancybox="">
        <div class="thumb thumb2"></div></a>
    <a href="images/work/img3.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb3"></div></a>
    <a href="images/work/img4.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb4"></div></a>
</div>
<h3 class="dropdown clear">Photography</h3>
<div id="photo" class="imglist">
    <a href="images/work/photo1.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb1"></div></a>
    <a href="images/work/photo2.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb2"></div></a>
    <a href="images/work/photo3.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb3"></div></a>
    <a href="images/work/photo4.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb4"></div></a>
</div>

As you can see I attempted to use the rel="gallery01" method but they just all stack into one big gallery of 8 images when I want two different galleries of 4 images. Any ideas?

Last but not least on a side note, is there any way to remove the play/pause and fullscreen buttons when viewing images in fancy box? I find them to be quite useless and just take up un-needed space.

Thank you for your time.

Solution

Galleries are created by adding the same data-fancybox attribute value, therefore replace rel="gallery01" with data-fancybox="gallery01" (and similarly for the rest of links).

You can use buttons option to customize buttons in the toolbar, example:

// Options for all groups
$('[data-fancybox^="gallery"]').fancybox({
  thumbs : {
    autoStart : true
  },
  buttons : [
    'zoom',
    'close'
  ]
});

Demo - https://codepen.io/anon/pen/XzwOyw?editors=1010

Also, see documentation and samples here - http://fancyapps.com/fancybox/3/docs/#usage