如何重置fotorama中的activeIndex?

时间:2014-08-12 11:15:11

标签: fotorama

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link  href="http://fotorama.s3.amazonaws.com/4.6.0/fotorama.css" rel="stylesheet">
<script src="http://fotorama.s3.amazonaws.com/4.6.0/fotorama.js"></script>

<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

如上所述,如果我想用一组新图像替换图像轮播,例如。 3和4,我将破坏fotorama,替换图像,然后再打开fotorama。

var $fotoramaDiv = $('.fotorama').fotorama();

// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');

fotorama.destroy();

$('.fotorama').html('<img src="http://s.fotorama.io/3.jpg"><img src="http://s.fotorama.io/4.jpg">');

// 3. Turn it on again.
$('.fotorama').fotorama();

这似乎很有效,因为fotorama会记住我正在浏览的图像的索引位置。例如。在原始图像轮播中,我从第一张图片转到第二张图片,这意味着activeIndex现在为1,然后我销毁了fotorama,并创建了一个新的图像3和4,如代码所示,当轮播被激活时索引从1而不是0开始,我正在查看图像4.我知道这些信息存储在activeIndex中,但即使我在销毁原始照片之前将其设置为0,新的fotorama也不会从0开始。 / p>

1 个答案:

答案 0 :(得分:1)

最好使用API​​功能加载新图像并返回第一张图像:

// Load new images
fotorama.load([
  {img: '1.jpg', thumb: '1-thumb.jpg'},
  {img: '2.jpg', thumb: '2-thumb.jpg'}
]);

// Go to the first image
fotorama.show(0);

有关API和选项的更多信息,请访问:http://fotorama.io/customize/api/