Fancyboxを使用して1ページに複数のギャラリーを作成するにはどうすればよいですか？

Question

Fancyboxのclass="imglist"とdata-fancybox="images" data-caption=""を使って、すべて私のウェブサイト用に3つのギャラリーを作ろうとしています。私は助けのためにHow to create separate Fancybox galleries on the same page?に従ってみましたが、うまくいかないようです。私はFancyBox v3.2.10を使用しています。

私のコードの例は：あなたが見ることができるように

<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> 

は、私は4の2つの異なるギャラリーをしたいとき8枚の画像の一つの大きなギャラリーにrel="gallery01"方法が、彼らはただ、すべてのスタックを使用しようとしました画像。何か案は？

残念なことに、ファンシーボックスで画像を表示するときに再生/一時停止ボタンとフルスクリーンボタンを削除する方法はありますか？私は彼らには無用であり、不必要なスペースを取ることがわかります。

ありがとうございます。

Answer 1

ギャラリーは同じdata-fancybox属性値を追加して作成されるため、rel="gallery01"をdata-fancybox="gallery01"に置き換えてください（残りのリンクについても同様です）。

あなたはbuttonsツールバーのボタンをカスタマイズするためのオプション、例えば、使用することができます。

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

がデモ - ここにドキュメントやサンプルを参照してください。またhttps://codepen.io/anon/pen/XzwOyw?editors=1010

を - http://fancyapps.com/fancybox/3/docs/#usage