2012-06-26 4 views
1

이 글은 Google 그룹스에 답이 없습니다. Fancybox에 같은 버그가 있습니다.여러 앨범을 통해 팬시 박스 반복하기

한 페이지에 더 많은 이미지 갤러리가 있습니다. 다음 이미지로 이동하면 다음 prev 버튼 등으로 다른 갤러리의 이미지로 이동합니다.

라이트 박스로 그것은 같은 것을 할 수있다 :

<a href="url" rel="fancybox[gallery1]" >link</a> 

을 나는 이미지 갤러리에 gallery1의 모든 이미지를 얻을 수 있습니다. 내 앨범은 동적이어서 나는 그것을 할 수 없다. 내 자바 스크립트 파일에 .

이것이 가능합니까?

어떻게이 탐색을 제어 할 수 있습니까?

<div class="Album" /> 
<div class="AlbumImg"> 
    <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a> 
    <div id="Gallery0"> 
     <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a> 
    </div> 
    <div id="Gallery0"> 
    <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a> 
    </div> 
    <div id="Gallery0"> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a> 
    </div> 
    <img class="first" src="Tokyo" title="Tokyo" /> 
    </a> 
</div> 

<div class="AlbumImg"> 
    <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a> 
    <div id="Gallery1"> 
     <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a> 
    </div> 
    <div id="Gallery1"> 
    <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a> 
    </div> 
    <div id="Gallery1"> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a> 
    </div> 
    <img class="first" src="Tokyo" title="Tokyo" /> 
    </a> 
</div> 

이것은 모든 앨범에 여러 이미지가있는 코드입니다. 첫 번째 앨범의 마지막 이미지를 클릭하고 다음으로 이동하면 두 번째 앨범의 첫 번째 그림으로 이동합니다. 하지만 같은 아줌마의 첫 번째 이미지로 돌아가려면

+0

다른 갤러리와 함께 페이지의 'HTML'을 추가 할 수 있습니까? – albin

+0

@albin - 코드가 추가되었습니다. 감사 – ahsu

답변

0
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg"> 

이 방법이 효과가 있습니까? '-'를 잊지 마세요.
jquery 코드를 제공 할 수 있습니까?

붙여 넣은 코드는 오류가 많이 포함
1

...

는 동일한 id 여러 div을의가 있고, 모두 <div class="AlbumImg">은 타의 추종을 불허하는 폐쇄가있는 속성, 따옴표에 포함되지 않습니다 태그 </a>. 나는이 모든 것이 당신의 모범에 중요하다는 것을 확신하지는 않지만 분명히 살펴보아야합니다. 그리고 Ruben이 말했듯이 팬시 박스은 라이트 박스와 마찬가지로 rel 속성과 함께 작동해야합니다.

<div class="albums"> 
    <div class="gallery1"> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
    </div> 
    <div class="gallery2"> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
    </div> 
</div> 

을 그리고 당신은 사이클에 갤러리를 원하는 경우 fancybox에 매개 변수를 전달해야 :

코드는 다음과 비슷한 모습이 될 것입니다. documentation을 참조하십시오. 다음과 같이해야합니다 :

$(document).ready(function() { 
     $('a').fancybox({ 
      'cyclic':true 
     }); 
});