Fancybox를 사용하여 한 페이지에 여러 개의 갤러리를 만들려면 어떻게해야합니까?

팬시 박스의 class="imglist"과 data-fancybox="images" data-caption=""을 사용하여 모두 3 개의 갤러리를 만들려고합니다. 나는 도움을 위해 How to create separate Fancybox galleries on the same page? 다음을 시도했지만 작동하지 않는 것 같습니다. FancyBox v3.2.10을 사용하고 있습니다.Fancybox를 사용하여 한 페이지에 여러 개의 갤러리를 만들려면 어떻게해야합니까?

내 코드의 예 : 당신이 볼 수 있듯이

<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의 두 개의 서로 다른 갤러리를 할 때 8 개 이미지의 하나 개의 큰 갤러리에 rel="gallery01" 방법하지만 그들은 단지 모든 스택을 사용하려고 시도 이미지. 어떤 아이디어?

마지막으로 중요한 점은 멋진 상자에서 이미지를 볼 때 재생/일시 중지 및 전체 화면 버튼을 제거 할 수있는 방법이 있습니까? 나는 그 (것)들을 확실히 쓸모없고 un-needed 공간을 채택한 ㄴ다는 것을 찾아 낸다.

감사합니다.

출처

2017-12-07 Jack

갤러리는 동일한 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

출처

2017-12-07 08:08:49 Janis

가 감사를, 갤러리 제안 일했다! 이것이 중요한 문제이지만 버튼에 대해서는 다른 것들을 제거하지 않는 것 같습니다. 내 머리글에 스크립트 코드를 추가하고 있습니다. 미리보기 이미지를 공유하고 공유하고 확대/축소를 추가하고 닫기 버튼을 분명히 유지하고 싶습니다. – Jack

선택기 (예 :'$ ('[data-fancybox^= "갤러리"]'))는 요소를 반환합니다. 그렇지 않으면 기본값이 사용됩니다. 선택기를 사용할 수 있습니다 (예 :'$ ('. fancybox')'Demo - https://codepen.io/anon/pen/jagbdJ?editors=1010). – Janis

Fancybox를 사용하여 한 페이지에 여러 개의 갤러리를 만들려면 어떻게해야합니까?

답변

관련 문제