英语不是我的第一语言,对不起我的错误;)
我希望将所有缩略图放在一个块中,而不是滑块示例中(加号是图像)
NOT:
< ++++++++++++++++++ (带导航按钮的滑块)
我想:
++++++++++ ++++++++++++ +++
我用css实现了这一点(在white-space: nowrap;
中禁用div.fotorama__nav fotorama__nav--thumbs fotorama__shadows--right
),问题是默认情况下很多图片都没有显示,我怎样才能实现?
我或多或少得到这个(“+”是图像,“o”是卸载图像)
++++++++++
+ oooooooo
OOO
有没有办法用fotorama来实现我的porpouse? 非常感谢tou
答案 0 :(得分:1)
您必须使用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>
小提琴:http://jsfiddle.net/artpolikarpov/tnWLv/embedded/result,html,css,js/
答案 1 :(得分:0)
使data-thumbwidth =“ 1px”和css .fotorama__nav__frame--thumb {width:100px!importnant}(例如)
或
data-navwidth =“ 20000px”并使用CSS纠正