다른 장소의 이미지가있는 Fancybox 갤러리

Question

나는 이미지 갤러리 (모든 이미지 함께)와 하나의 별도 이미지가있는 (HTML) 페이지가 있습니다.

나는 내가

<div id="separateImage"> 

에 별도의 이미지를 넣어

<div id="imageGallery"> 

의 이미지 갤러리의 모든 이미지를 넣어 나는

$('#imageGallery a').fancybox(); 
$('#separateImage a').fancybox(); 

Fancybox 잘 작동 자바 스크립트가 이미지 갤러리와 별도의 이미지 모두. 이미지 갤러리를 순환 할 수 있지만 별도의 이미지는 순환의 일부가 아닙니다. 이미지 갤러리와 별도의 이미지를 통해 모든 이미지가 순환되도록하려면 어떻게해야합니까?

나는 https://www.inkling.com/read/javascript-jquery-david-sawyer-mcfarland-2nd/chapter-7/advanced-gallery-with-jquery

에 설명 된대로 앵커에

rel="gallery" 

를 추가하려했지만 모든 이미지는 동일한 DIV (ID)에있는 경우 분명히이 유일한 작품!?

Answer 1

문제는 두 개의 서로 다른 선택기에 fancybox를 결합하는 것입니다 :

$('#imageGallery a') 및 $('#separateImage a')하지만 갤러리를 만들기 위해, 모든 요소들은, 같은 div 여부 내에있는 같은 선택의 사용 여부 각각의 수동으로 각 요소 div을 분리 하드 코드하지 않고 (fancybox의 버전 2.x) 그래서

, 당신은 할 수 :

$("#imageGallery a, #separateImage a") 
    .addClass("fancybox") 
    .attr("rel", "gallery") 
    .fancybox({ 
     //API options 
     padding: 8 // example 
    }); 

이제 위치에 관계없이 모든 요소는 클래스 및 rel 속성을 공유합니다.

는 fancybox의 JSFIDDLE