fotorama Jquery Default Image From List of Images?

Question

In my html block I have three images.

<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>

Is it possible to set the image that displays in the gallery? By default the first image in a list of images displays, would it be possible to set the second images in the above list i.e. Superman_Black_Hole_Feat_JLA_077_019.jpg as the default image that displays in the gallery window?

Answer 1

You need to set startindex configuration attribute on image container:

<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> 

In above case the second image will be shown (index 1, zero-based).

Demo: http://plnkr.co/edit/03zHgmDOby2j9uumLwjg?p=preview

Or you can use show method to show necessary image after gallery is initialized. For example to show second image:

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