fancybox - 當點擊圖像（大拇指）如何讓FancyBox加載更大的圖像/不同的URL

Question

我有一個很長的縮略圖圖像列表。當用戶點擊其中一個圖像時，我想用fancybox在與圖像不同的url上加載較大的圖像。我怎麼做？

謝謝

Answer 1

我還沒有嘗試過，但嘗試這樣做。

$("a#example1").fancybox({ 
    // some other options, 
    'href'  : 'http://link/of/the/true/image.jpg' 
}); 

HTML這樣，

<a href="#" id="example1"><img src="/link/to/thumb.jpg" /></a> 

---

或者像這將工作HTML，

<a href="http://link/of/the/true/image.jpg" id="example1"> 
    <img src="/link/to/thumb.jpg" /> 
</a> 

jQuery的

$("a#example1").fancybox({ 
    'titleShow'  : false 
}); 

Answer 2

如果我正在嘗試這樣做，我只需製作兩張圖片，兩張圖片的文件名除了文件名中的標誌之外都有類似的文件名，比如根據它們的大小來表示-thumb和-large。通過這樣做，你只需要使用下面的腳本作爲指南切換的網址：

<script> 
var openFancyBox = function(url,w,h){ 
    $.fancybox({ 
     type: 'iframe', 
     href: url, hideOnContentClick: true, 
     showCloseButton: false, 
     overlayShow: true, 
     overlayOpacity: 0.15, 
     'scrolling': 'no', 
     centerOnScroll: true, 
     titleShow: false, ' 
     padding': 0, 
     'autoDimensions': false, 
     'margin': 0, 
     'width' : w, 
     'height': h 
    }); 
}; 
</script> 

然後您可以創建並調用您在飛行的fancybox：

openFancyBox('/path-to-my/image-thumb.jpg', 200, 50);