使用jquery fancybox可以在多个图库之间导航吗？

Question

代码

<a rel="gallery1" href="{link to image}">Image 1</a> 
<a rel="gallery1" href="{link to image}">Image 2</a> 
<a rel="gallery1" href="{link to image}">Image 3</a> 

<a rel="gallery2" href="{link to image}">Image 1</a> 
<a rel="gallery2" href="{link to image}">Image 2</a> 
<a rel="gallery2" href="{link to image}">Image 3</a> 

，所以当你达到gallery1结束另一个导航箭头会出现，让你去库2

Answer 1

令人费解，但嘿它的工作原理

$('.photo').fancybox({ 
    overlayColor:"#24201D", 
    overlayOpacity:0.7, 
    cyclic:true, 
    titleFormat:function(title, currentArray, currentIndex, currentOpts){ 

     var html = ''; 

     // description 
     var description = currentArray[currentIndex].name; 
     if(description!=undefined) 
     { 
      html += unescape(description); 
     } 

     // position 
     var index = currentIndex+1; 
     var total = currentArray.length; 
     var style = currentArray[currentIndex].className; 
     var styles = style.split(' '); 
     for(i=0;i<styles.length;i++) 
     { 
      if(styles[i].indexOf('gallery')>-1) 
      { 
       var gallery = $('.'+styles[i]); 
       total = gallery.length; 
       continue; 
      } 
      if(styles[i].indexOf('image')>-1) 
      { 
       index = styles[i].replace('image','') * 1 + 1; 
       continue; 
      } 
     } 

     if(index==total) 
      $('#fancybox-right-ico').addClass('next'); 
     else 
      $('#fancybox-right-ico').removeClass('next'); 

     if(index==1) 
      $('#fancybox-left-ico').addClass('prev'); 
     else 
      $('#fancybox-left-ico').removeClass('prev'); 


     html += '<div class="of">'+index + ' of '+ total +'</div>'; 
     return html; 
    } 

}); 

HTML

<a rel="gallery" class="photo image1 gallery1" href="{link to image}">Image 1</a> 
<a rel="gallery" class="photo image2 gallery1" href="{link to image}">Image 2</a> 
<a rel="gallery" class="photo image3 gallery1" href="{link to image}">Image 3</a> 

<a rel="gallery" class="photo image1 gallery2" href="{link to image}">Image 1</a> 
<a rel="gallery" class="photo image2 gallery2" href="{link to image}">Image 2</a> 
<a rel="gallery" class="photo image3 gallery2" href="{link to image}">Image 3</a>