2014-05-14 3 views
2

한 페이지에 많은 그림이있는 멋진 갤러리가 있고 다른 "rel"속성을 사용하여 그룹에 멋지게 보여주기 위해 Fancybox를 사용하고 있습니다. 그러나 "rel"을 무시하고 모든 것을 하나의 그룹에 참여시키는 "view all"옵션을 만들고 싶습니다. 나는 100 개 이상의 이미지를 가지고 있고 효율적이지 않을 것이므로 js로 HTML을 바꾸고 싶지 않습니다. 또한 Fancybox에 (동일한 이유로) 표시 할 항목 배열을 만드는 것을 피하고 싶습니다. 그래서 "rel"이 아닌 Fancybox를 속일 수있는 방법이 있나요?하지만 어쩌면 특정 클래스 또는 다른 속성으로 그룹화 할 수 있습니까?rel 속성 이외의 것으로 Fancybox 2를 그룹화 할 수 있습니까

$('.gallery a').fancybox(); 

그래서 내 이미지는 다음의 경우 등에서 확인해로 3 개 그룹을 그룹화 : 내가 가장 간단한 형태로 내 이미지를 대상으로

<div class="gallery"> 
    <a rel="group1" class="showall" href="image01-full.jpg"><img src="image01.jpg"/></a> 
    <a rel="group1" class="showall" href="image02-full.jpg"><img src="image02.jpg"/></a> 

    <a rel="group2" class="showall" href="image03-full.jpg"><img src="image03.jpg"/></a> 
    <a rel="group2" class="showall" href="image04-full.jpg"><img src="image04.jpg"/></a> 

    <a rel="group3" class="showall" href="image05-full.jpg"><img src="image05.jpg"/></a> 
    <a rel="group3" class="showall" href="image06-full.jpg"><img src="image06.jpg"/></a> 
</div> 

: 같은

내는 (매우 단순화 된) HTML 보인다 이 예제. 그룹별로 "showall"등과 같은 그룹으로 그룹화 할 수 있습니까? 또는 유일한 방법은 모든 항목의 데이터 배열을 작성하고 필요할 때 옵션으로 제공하는 것입니다.

당신을 감사합니다!

+0

어떤 플러그인을 사용하는 - Fancybox 또는 fancybox-2? jsFiddle을 만들 수 있습니까? 또한, SO에 대해 질문하기 전에 직접 뭔가를 시도해야합니다. – martynas

+0

@martynas : OP는 'fancybox-2' 태그를 가지고 있습니다;) – JFK

+0

동시에 다른 그룹 설정을 할 수는 없으며, 분리 된 그룹에서 다른 그룹으로 토글 이벤트를 트리거해야 할 수도 있습니다 단일 (all) one. 나는 당신에게 아이디어를 줄 수있는이 글을 썼다. http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox/ (데모 포함) – JFK

답변

5

"rel"을 "data-fancybox-group"으로 바꿀 수 있습니다.

참조 exemples : http://fancyapps.com/fancybox/#examples

+0

하지만 HTML에 액세스 할 수 없으면 변경하지 않아도됩니까? fancybox를 초기화 할 때 몇 가지 매개 변수를 설정해야합니까? – trainoasis