如何使用fotorama默认加载所有大拇指

时间:2013-11-08 11:14:24

标签: javascript jquery plugins fotorama

英语不是我的第一语言,对不起我的错误;)

我希望将所有缩略图放在一个块中,而不是滑块示例中(加号是图像)

NOT:

< ++++++++++++++++++ (带导航按钮的滑块)

我想:

++++++++++ ++++++++++++ +++

我用css实现了这一点(在white-space: nowrap;中禁用div.fotorama__nav fotorama__nav--thumbs fotorama__shadows--right),问题是默认情况下很多图片都没有显示,我怎样才能实现?

我或多或少得到这个(“+”是图像,“o”是卸载图像)

++++++++++ + oooooooo
OOO

有没有办法用fotorama来实现我的porpouse? 非常感谢tou

2 个答案:

答案 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纠正