ユーザーが画像のサムネイルをクリックして大きな画像を表示できるように、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
jquery.fancybox.pack.js の 15 行目。
これが私がFancyboxを呼び出す方法です。おそらくそれが問題ですか?
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>
ここだけでなく、ページが読み込まれたときに表示される Fancybox がある別のページでも機能を利用できる限り、どのバージョンの fancybox を使用しているかは気にしません。