0
私はfancyboxの親指が正しく動作するようにしようとしています。jquery fancybox親指 - いいえ、いいえ - スライドショーなし
私はすべてのjs/cssファイルをインポートしましたが、クリックした画像(サムイとスライドショーなし)のみが表示されます。私は同じページ内のすべての画像をファンシーボックス(親指付き)と "alt"属性に各画像のタイトルとしてロードします。
HTML:
.....
<a class="fancybox-thumb" rel="fancybox-thumb" href="/test.jpg">
<img src="test.jpg" alt="text showing">
</a>
.....
......
<a class="fancybox-thumb" rel="fancybox-thumb" href="/awesome.jpg">
<img src="awesome.jpg" alt="Awesome">
</a>
Javascriptを
$('.fancybox-thumb').each(function() {
$(this).attr('rel', 'fancybox-thumb').fancybox({
helpers: {
type: 'image',
openEffect : 'none',
closeEffect : 'none',
title : {
type: 'inside'
},
overlay : {
opacity: 0.8,
css: {
'background-color' : '#000'
}
},
thumbs : {
width: 50,
height: 50
}
},
beforeLoad: function() {
this.title = $(this.element).find('img').attr('alt');
this.href = $(this.element).find('img').attr('src').replace('_thumb', '');
}
});
});
SOLUTION
$('.fancybox-thumb').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: true,
nextClick: false,
helpers: {
thumbs: {
width: 50,
height: 50
},
title : {
type: 'inside'
}
},
beforeLoad: function() {
this.title = $(this.element).find('img').attr('alt');
}
});