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 AND -large 。通过这样做，您只需使用以下脚本作为指导来切换 url：

<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);