fancybox-thumbs와 함께 fancybox-media 사용

Question

Fancybox를 사용하면서 Fancybox를 사용하여 (결합 된) 이미지 및 YouTube 비디오 갤러리를 만들려고합니다. (- 당신이 권자를 클릭하면 PS, 나는 릭 롤 당신에게 노력하지 않고있어 첫 번째 링크), 그것은 열어 당신이 비디오의 링크를 클릭하면

• 가 : 나는 두 가지 문제로 실행했습니다 하지만 엄지 손가락을 표시하거나 그룹의 다른 항목을 탐색 할 수 없습니다.
• 이미지 링크 (두 번째 또는 세 번째 링크)를 클릭하면 생성 된 모든 미리보기 이미지가 표시됩니다. 동영상의 미리보기 이미지를 포함하여 ...하지만 동영상의 미리보기 이미지를 클릭하면 동영상으로 건너 뛰지 않습니다.

생각들? 여기

$('.fancybox-thumbs').fancybox({ 
    prevEffect: 'none', 
    nextEffect: 'none', 
    closeBtn : true, 
    arrows : true, 
    nextClick : true, 
    helpers : {thumbs: {width: 50, height: 50}} 
}); 

$('.fancybox-media') 
    .attr('rel', 'media-gallery') 
    .fancybox({ 
     openEffect : 'none', 
     closeEffect: 'none', 
     prevEffect : 'none', 
     nextEffect : 'none', 
     arrows  : true, 
     helpers : {media: {}, buttons: {}} 
}); 

내가 지금까지 가지고 무엇을 : http://jsfiddle.net/6j7wxr8e/

Answer 1

먼저 통지가 fancybox 갤러리의 모든 요소가 모두 공유해야 같은 선택과 같은 rel 속성 (또는 같은 data-fancybox-group 속성)

예에서 선택자 .fancybox-thumbs과 .fancybox-media은 같은 rel 속성을 공유하든 관계없이 같은 갤러리에 속할 수 없습니다. 동일한 선택자을 공유하지만 다른 rel 속성 값을 가진 요소에도 적용됩니다. 이해가 되니?

그래서 당신의 요소

<a class="fancybox"> 
<a class="fancybox"> 
<a class="fancybox"> 

이 같은 fancybox 초기화 할 수 있기 때문에 당신은 하드 코드에 rel 속성을 필요로하지 않을 수 있습니다처럼 같은 선택를 공유하십시오 :

$('.fancybox').attr('rel', 'media-gallery').fancybox(); 

을 .. . 클래스의 모든 요소에 동일한 rel 속성 (media-gallery)을 설정합니다.fancybox.

그런 다음 수 그룹 fancybox 도우미 미디어, 엄지 손가락, 버튼 등 등을 포함하는 하나의 초기화 스크립트의 모든 API 옵션,

jQuery(document).ready(function ($) { 
    $('.fancybox').attr('rel', 'media-gallery').fancybox({ 
     prevEffect: 'none', 
     nextEffect: 'none', 
     closeBtn: true, 
     arrows: true, 
     nextClick: true, 
     helpers: { 
      thumbs: { 
       width: 50, 
       height: 50 
      }, // requires to include thumbs js and css files 
      media: {}, // requires to include media js file 
      buttons: {} // requires to include buttons js and css files 
     } 
    }); 
}); 

참조하여