fotorama jquery 默认图像从图像列表

Question

在我的html块中，我有三个图像。

<div class="image-container">
<div class="fotorama" data-width="1000" data-ratio="1000/667" data-max-width="100%" data-nav="thumbs" data-thumbmargin="10" data-allowfullscreen="true">
<a href="images/Superman_Black_Hole_Feat_JLA_077_010.jpg"></a>
<a href="images/Superman_Black_Hole_Feat_JLA_077_019.jpg"></a>
<a href="images/Superman_Black_Hole_Feat_JLA_077_021.jpg"></a>
</div>
</div>

是否可以设置图库中显示的图像？默认情况下，显示图像列表中的第一个图像，是否可以将上述列表中的第二个图像（即Superman_Black_Hole_Feat_JLA_077_019.jpg设置为图库窗口中显示的默认图像？

Answer 1

您需要在映像容器上设置startindex配置属性：

<div id="fotorama" class="fotorama" data-startindex="1" data-auto="false">
    <img src="http://lorempixel.com/100/100/food/1">
    <img src="http://lorempixel.com/100/100/people/2">
</div> 

在上面的情况下，将显示第二个图像（索引1，从零开始）。

演示：http://plnkr.co/edit/03zHgmDOby2j9uumLwjg?p=preview

或者，您可以使用show方法在库初始化后显示必要的图像。例如，要显示第二张图像：

var $fotoramaDiv = $('#fotorama').fotorama();
$fotoramaDiv.data('fotorama').show(1);