fancybox標題作爲元素和縮略圖幫手

Question

我想利用標題作爲元素腳本以及縮略圖助手。如果我爲兩者使用相同的類名稱，例如..（.fancybox-thumb），則只有title作爲元素起作用。

在此先感謝您的幫助。

標題元素

$(".fancybox-thumb") 
     .attr('rel', 'gallery') 
     .fancybox({ 
      beforeLoad: function() { 
       var el, id = $(this.element).data('title-id'); 

       if (id) { 
        el = $('#' + id); 

        if (el.length) { 
         this.title = el.html(); 
        } 
       } 
      } 
     }); 

縮略圖幫手

$(".fancybox-thumb") 
     .attr('rel', 'gallery') 
     .fancybox({ 
      prevEffect : 'none', 
      nextEffect : 'none', 
      helpers : { 
       title : { 
        type: 'outside' 
       }, 
       thumbs : { 
        width : 60, 
        height : 60 
       } 
      } 

     }); 

如果我使用相同的類名，即雙方..（.fancybox拇指），只有標題爲元素的作品。

<div id="main" class="wrapper clearfix">    
     <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6111/6285920681_67917e8062_b.jpg" title="walk in the park (ewitsoe)"> 
     <img src="http://farm7.staticflickr.com/6111/6285920681_67917e8062_m.jpg" alt="" /> 
    </a> 

    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" data-title-id="title-1"> 
     <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="" /> 
    </a> 
    <div id="title-1" class="hidden"> 
     This is 1st title. <a href="http://google.com" target="blank">Some link</a> 
    </div><!--title-1--> 
</div> <!-- #main --> 

Answer 1

集成兩個API選項，如一個腳本里面：

$(".fancybox-thumb").attr('rel', 'gallery').fancybox({ 
    prevEffect: 'none', 
    nextEffect: 'none', 
    helpers: { 
     title: { 
      type: 'outside' 
     }, 
     thumbs: { 
      width: 60, 
      height: 60 
     } 
    }, 
    beforeLoad: function() { 
     var el, id = $(this.element).data('title-id'); 
     if (id) { 
      el = $('#' + id); 
      if (el.length) { 
       this.title = el.html(); 
      } 
     } 
    } 
});​ 

當然，不要忘了加載的fancybox的縮略圖幫手CSS和JS文件如：

<!-- Add fancyBox - thumbnail helper --> 
<link rel="stylesheet" type="text/css" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.1.3" /> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.3"></script> 

編輯：您可以創建不同的畫廊，將畫廊元素分組在不同的父級容器等

<div id="gallery1" class="gallery"> 
    <p>gallery one</p> 
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg">one</a> 
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg">two</a> 
</div> 
<div id="gallery2" class="gallery"> 
    <p>gallery two</p> 
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg">one</a> 
    <a class="fancybox-thumb" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg">two</a> 
</div> 
<div id="gallery3" class="gallery"> 
    <p>gallery three</p> 
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg">one</a> 
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg">two</a> 
</div> 

注意，我使用的相同class父容器但不同ID，這將被用於彼此區分畫廊。

然後用一個小的jQuery，創建的fancybox的畫廊，而不需要不同的腳本爲他們每個人：

// loop through each parent container and set rel attribute accordingly 
$("div.gallery").each(function() { 
    var thisID = this.id; 
    $(this).find(".fancybox-thumb").attr("rel", thisID).fancybox({ 
     // API options here 
    }); 
}); // each​​​​​ 

看到一個jsfiddle demo