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?
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).
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);