Fancybox圖片圖庫

Question

我想要的是一個圖片，點擊後打開一個畫廊。我正在使用FancyBox，並且我想要Thumbnail Helper（帶圖像地圖）

就像這樣：http://jsfiddle.net/ffZ7B/343/ 當您單擊左邊的weel時，它會打開圖庫，但它不會顯示縮略圖。

我嘗試這樣做：http://jsfiddle.net/ffZ7B/344/

有誰知道如何做到這一點？

謝謝！

Answer 1

Thumbnail Helper是fancybox v2.x的全新功能，在以前的版本中不存在。你在jsfiddle中使用fancybox v1.3.4。

如果你想使用Thumbnail Helper，你必須升級到Fancybox v2.x，然後使用此代碼：

HTML：

<img src="images/imageMap.jpg" usemap="#map" /> 

<map name="map" id="map"> 
<area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01" /> 
<area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02" /> 
<area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" /> 
</map> 

JS：

$(document).ready(function() { 
$("area.fancybox").fancybox({ 
    helpers: { 
    thumbs : { 
    width : 50, 
    height : 50 
    } 
    } 
}); // fancybox 
}); // ready 

注意那我們使用data-fancybox-group="gallery"屬性來設置圖庫元素（rel將不能與area標籤一起使用，因爲它與v1.3.4一起使用。）您可能需要設置HTML5 DOCTYPE以進行驗證。

UPDATE：見working DEMO here - 注意（2013年1月15日）本演示將失敗，因爲使用jQuery v1.9.0是。檢查THIS作進一步參考。儘管你可以用jQuery v1.8.3重現一個工作演示。