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

fancybox - 当点击图像（拇指）时如何让FancyBox加载更大的img /不同的URL

2 个答案: