1

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.

Allan
  • 12,117
  • 3
  • 27
  • 51
Jack
  • 13
  • 1
  • 3

1 Answers1

4

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

Janis
  • 8,593
  • 1
  • 21
  • 27
  • Thank you, the gallery suggestion worked! That's the important problem down but as for the buttons, it doesn't seem to be removing the others. I'm adding the script code into my header. I'd like to keep the thumbnails, share, add the zoom and obviously keep the close button. – Jack Dec 08 '17 at 19:04
  • Make sure that selector (e.g. `$('[data-fancybox^="gallery"]')` in my example) returns your elements. If it does not, then default values will be used. You can use any selector, for example - `$('.fancybox')` Demo - https://codepen.io/anon/pen/jagbdJ?editors=1010 – Janis Dec 08 '17 at 19:15