さて、fancyboxギャラリーの例の簡単な例を実行することはできません。クリックすると、画像ページに移動し、beforeLoadイベントがアクティブになりますが、ボックスに画像が表示されません。
jqueryバージョン1.8.3とtwitter2.3.1を使用しています
スクリプト自体はページの最後に追加されます。
<script type="text/javascript">
$(document).ready(function() {
// $('ul.thumbnails').find('a.fancybox').click(function(e) {
// e.preventDefault();
// });
$('ul.thumbnails').find('a.fancybox').fancybox({
beforeLoad : function() {
console.log('Loaded');
}
});
console.log('fancybox start');
//This example works!!!
// $.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
// title : 'Custom Title'
// });
});
</script>
[
<a href="/realestate/image/7150209096969e5da60a8e7283afc453.png/800" class="thumbnail fancybox">
<img style="width: 360px; height: 270px;" alt src="/realestate/image/7150209096969e5da60a8e7283afc453.png/360">
</a>
,
<a href="/realestate/image/8f31e46f9ab617d00541f1bc60e2e3b1.png/60" class="thumbnail fancybox">
<img style="width: 60px; height: 60px;" alt src="/realestate/image/8f31e46f9ab617d00541f1bc60e2e3b1.png/60">
</a>
,
<a href="/realestate/image/0a98662cc5df0c8b1bc97a9a7e8b9707.png/60" class="thumbnail fancybox">
<img style="width: 60px; height: 60px;" alt src="/realestate/image/0a98662cc5df0c8b1bc97a9a7e8b9707.png/60">
</a>
]