jQuery：Fancybox插件重定向

Question

我正在使用fancybox显示一个小的QR码，然后您可以点击代码并将其显示在灯箱中。问题是，当您单击缩略图时，您将直接进入图像，而不是将其显示在灯箱中。

这是我的代码：

<a href="http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text" rel="fancybox" class="fancybox">
    <img src="http://chart.apis.google.com/chart?chs=50x50&cht=qr&chld=|1&chl=sample_text" alt=""/>
</a>
<script>
$(".fancybox").fancybox( {
    openEffect: 'elastic',
    closeEffect : 'elastic',
});
</script>

这是我在jsfiddle中的代码：

http://jsfiddle.net/zyjfC/1/

Answer 1

看起来触发花式框的链接会查找扩展类型。 （通过测试，没有查看源代码。）

如果您对此感觉不错，可以尝试通过在href结尾处添加参数来欺骗脚本

所以你的href看起来像这样

  

http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text的＆安培; .JPG

这是一个解决这个问题的小提琴

JSFiddle

完全代码，因为SO讨厌没有代码的jsfiddle链接

<a href="http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text&.jpg" rel="fancybox" class="fancybox">
    <img src="http://chart.apis.google.com/chart?chs=50x50&cht=qr&chld=|1&chl=sample_text" alt=""/>
</a>

$(".fancybox").fancybox( {
    openEffect: 'elastic',
    closeEffect : 'elastic',
});