的fancybox 2.1.0排除觸發圖像從畫廊

可能重複：
Fancybox multiple links to same gallery without duplication 的fancybox 2.1.0排除觸發圖像從畫廊

我使用的fancybox 2.1.0使用jQuery 1.8.3加載了圖片的畫廊但它的工作方式並不完全如我所願。我有一個很大的主圖像，然後是一組畫廊縮略圖。點擊主圖像或縮略圖打開fancybox圖庫。

的問題是主要的圖像還設有縮略圖，所以當畫廊推出我得到的第一個圖像重複：1.JPG，1.JPG，2.JPG，3.JPG等

我希望主圖像觸發畫廊的燈箱，但不包括在其中，但我似乎無法做到正確。會真的很感激任何建議！

我的標記：

<a class="product-image fancybox" data-fancybox-group="gallery" id="main-image" title="" href="1.jpg"> 
    <img id="image" src="1.jpg" height="320" width="320" alt="" title="" /> 
</a> 

<ul> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1"> 
     <img src="1.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title=""> 
     <img src="2.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title=""> 
     <img src="3.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 

</ul>

我的腳本：

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
    $j('.fancybox').fancybox({ 
     nextEffect: 'fade', 
     prevEffect: 'fade', 
     helpers: { 
      title : { 
       type : 'float' 

      } 
     } 
    }); 
});

來源

2013-01-15 BigRob

檢查你的答案被引用的文章。 – JFK

試試這個： HTML（刪除主IMG fancybox類）和追加rel到data-fancybox-group

<a class="product-image" data-fancybox-group-rel="gallery" id="main-image" title="" href="1.jpg"> 
    <img id="image" src="1.jpg" height="320" width="320" alt="" title="" /> 
</a> 

<ul> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1"> 
     <img src="1.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title=""> 
     <img src="2.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 
    <li> 
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title=""> 
     <img src="3.jpg" width="100" height="100" alt="" /> 
    </a> 
    </li> 
</ul>

種

$('a.product-image').click(openFancybox); 

function openFancybox(){ 
$.fancybox.open($(this).attr('data-fancybox-group-rel')); 
}

見文件here API方法 [很酷，該代碼未測試]）] 好運

來源

2013-01-15 13:21:51 mica

的fancybox 2.1.0排除觸發圖像從畫廊

回答

相關問題