0 
<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，新照片也不会从 0 开始。

4

1 回答 1

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/

于 2014-08-31T22:08:09.900 回答