英语不是我的母语,所以对我的错误感到抱歉;)
我希望将所有缩略图放在一个 block 中,而不是放在 slider 示例中(加号是图像)
不是:
<+++++++++ >(带导航按钮的 slider )
我想要:
++++++++++
+++++++++
+++
我用CSS实现了这一点(在div.fotorama__nav fotorama__nav--thumbs fotorama__shadows--right
中禁用white-space: nowrap;
),问题是许多默认情况下不显示图像,我该如何实现?
我或多或少明白这一点(“+”是图像,“o”是卸载图像)
++++++++++
+呜呜呜
哦
有什么办法可以用 fotorama 实现我的鼠海豚吗? 非常感谢你
最佳答案
您必须使用 Fotorama API、事件和方法(尚未记录):
<div class="thumbs">
<a href="1.jpg"><img src="1-thumb.jpg"></a>
<a href="2.jpg"><img src="2-thumb.jpg"></a>
</div>
<script>
$('.thumbs').each(function () {
$('a', this).each(function () {
var $a = $(this);
// set ids, will use them later
$a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
});
var $thumbs = $(this),
$fotorama = $thumbs.clone();
$fotorama
.on('fotorama:show', function (e, fotorama) {
// pick the active thumb by id
$('#' + fotorama.activeFrame.id)
.addClass('active')
.siblings()
.removeClass('active');
})
.addClass('fotorama')
.removeClass('thumbs')
.insertBefore(this)
.fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});
// get access to the API
var fotorama = $fotorama.data('fotorama');
$thumbs.on('click', 'a', function (e) {
e.preventDefault();
// show frame by id
fotorama.show(this.id);
});
});
</script>
fiddle :http://jsfiddle.net/artpolikarpov/tnWLv/embedded/result,html,css,js/
关于javascript - 如何使用 fotorama 默认加载所有拇指,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19857713/