我正在使用 Fancybox,因此用户可以单击图像缩略图并查看更大的图像。
我遇到的问题是页面加载时它并不总是有效。我将单击缩略图,Fancybox 不会显示较大的图像。但是,如果我刷新页面,它就可以正常工作。内容是动态生成的,所以我想知道是否需要刷新 DOM?
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'fade', // openEffect / closeEffect / nextEffect / prevEffect
closeEffect : 'fade', // Animation effect ('elastic', 'fade' or 'none') for each transition type
nextEffect : 'fade', // String; Default value: 'fade', 'fade', 'elastic', 'elastic'
prevEffect : 'fade',
openSpeed : '1000', // openSpeed / closeSpeed / nextSpeed / prevSpeed
closeSpeed : '1000', // The time it takes (in ms, or "slow", "normal", "fast") to complete transition
nextSpeed : '1000', // Integer; Default value: 250
prevSpeed : '1000',
padding : 3
});
});
</script>
<a class='fancybox' rel='gallery' href='".$data['photo'][$x]."'><img src='".$data['photo'][$y]."' style='margin-right: 2.5px; margin-left: 2.5px; vertical-align: top;'></a>
当它不起作用并且我单击缩略图时,这是我得到的错误...
TypeError: a[0] is undefined
在第 15 行的 jquery.fancybox.pack.js 中。
这就是我如何称呼 Fancybox,也许这就是问题所在?
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>
我不在乎我使用的是哪个版本的 fancybox,只要我在这里以及在另一个页面上都有一个 Fancybox 显示页面加载时的功能。