API fotorama デモ

Fotoramaの標準機能ではサポートしていないつぎの機能について、APIを使いJabascriptとCSSを追加してカスタマイズします。

タイトルをコンテンツの外に表示

タイトル（キャプション）をFotoramaステージ（コンテンツ）の外に表示するカスタマイズ例です。画像などコンテンツのタイトル（キャプション）は、Aタグのdata-title属性とdata-author属性で２つ記述します。
タイトルの表示順は、初めにdata-title、つぎに改行されdata-authorです。１つに書きたい場合は、data-title属性を使いますが、data-author属性は省略できません（省略の例：data-author="")。
DIVタグのクラス名fotoramatitleはJavascriptのFotorama設定で、タイトルが表示されるPタグのクラス名fotorama-captionはCSS設定でそれぞれ定義されています。

←見出しをクリックします（以下同様）

<div class="fotoramatitle" data-nav="thumbs" data-width="500" data-navposition="top" data-fit="contain" data-allowfullscreen="true" data-auto="false" data-autoplay="true" style="background:#000000;width:500px">
  <a href="images/m/pixabay03-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド１～バナナ・芭蕉"><img src="images/m/pixabay03s.jpg"></a>
  <a href="images/m/pixabay12-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド２～孔雀"><img src="images/m/pixabay12s.jpg"></a>
  <a href="images/m/pixabay13-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド３～砂漠"><img src="images/m/pixabay13s.jpg"></a>
  <a href="images/m/pixabay15-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド４～秋の林道１"><img src="images/m/pixabay15s.jpg"></a>
  <a href="images/m/pixabay16-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド５～秋の林道２"><img src="images/m/pixabay16s.jpg"></a>
</div>
<p class="fotorama-caption" style="background:#000000;margin-top:0; line-height: 1.3;width:500px"></p>

<!-- タイトルをコンテンツの外に表示 Javascritは</body>の直前に配置します 
  クラスセレクタ名fotoramatitleでFotorama設定 -->
<script type="text/javascript">
 $('.fotoramatitle')
   .on('fotorama:show', function (e, fotorama) {    
     fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
     var activeFrame = fotorama.activeFrame;
     fotorama.$caption.html(
       '<strong>' + activeFrame.title + '</strong><br>' + activeFrame.author
     );
  })
  .fotorama(); //クラスセレクタ名fotoramatitleでFotorama設定
</script>
</body>


<style type="text/css">
.fotoramatitle,
.fotorama-caption {
    width: 600px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.fotorama-caption {
    text-align: center;
    line-height: 1.1;
    color: #838484;
    font-family: "ＭＳ ゴシック",sans-serif;
    font-weight: 700;
 
    strong {
        font-weight: normal;
        color: #eee;
    }
 
}
</style>

アクティブインデックス（枚数）を表示

アクティブインデックス（いわゆる、何枚目/何枚中の表示）を自動で表示するカスタマイズ例です。 DIVタグのID名fotoramaIndexおよびアクティブインデックス（枚数）が表示されるMARKタグのID名ActiveIndexNoは、JavascriptのFotorama設定で定義されています。このカスタマイズはCSSはありません。

１２３４５

<div id="fotoramaIndex" data-width="500" data-fit="contain" data-allowfullscreen="true" data-auto="false" style="background:#000000;width:500px" >
  <a href="images/ario/P3030069.jpg" data-caption="スライド１">1</a>
  <a href="images/ario/P3030070.jpg" data-caption="スライド２">2</a>
  <a href="images/ario/P3030071.jpg" data-caption="スライド３">3</a>
  <a href="images/ario/P3030072.jpg" data-caption="スライド４">4</a>
  <a href="images/ario/P3030073.jpg" data-caption="スライド５">5</a>
 </div>
<p style="margin-bottom: .5em;"><mark id="ActiveIndexNo" style="background:navy;color:#ffffff;padding:3px"></mark></p>
</div>

<!-- アクティブインデックスを表示 Javascritは</body>の直前に配置します 
 IDスセレクタ名fotoramaIndexでFotorama設定 -->
<script type="text/javascript">
   $(function () {
	$('#fotoramaIndex')
	      .on('fotorama:show', function (e, fotorama, direct) {
		console.log(e.type, direct);
		$('#ActiveIndexNo').text((fotorama.activeIndex + 1)
					+ '/' + fotorama.size);  // ↑ fotorama.activeIndex:アクティブインデックス番号
		})                        // ↑ fotorama.size:総枚数（総フレーム数）
		.fotorama();  //IDスセレクタ名fotoramaIndexでFotorama設定
	});
</script>
</body>

なし

タイトルにアクティブインデックスを埋め込み枚数表示

タイトルにアクティブインデックスを埋め込み、タイトルと何枚中何枚目を、コンテンツの外に表示するカスタマイズ例です。前項「タイトルをコンテンツの外に表示」と「アクティブインデックス（枚数）を表示」を併せたカスタマイズです。

<div class="fotoramatitleIn" data-nav="thumbs" data-width="500" data-fit="contain" data-allowfullscreen="true" style="background:#000000;width:500px">
  <a href="images/m/pixabay03-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド１～バナナ・芭蕉"><img src="images/m/pixabay03s.jpg"></a>
  <a href="images/m/pixabay12-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド２～孔雀"><img src="images/m/pixabay12s.jpg"></a>
  <a href="images/m/pixabay13-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド３～砂漠"><img src="images/m/pixabay13s.jpg"></a>
  <a href="images/m/pixabay15-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド４～秋の林道１"><img src="images/m/pixabay15s.jpg"></a>
  <a href="images/m/pixabay16-675x450.jpg" data-author="photos by (c) 2016 Pixabay" data-title="スライド５～秋の林道２"><img src="images/m/pixabay16s.jpg"></a>
</div>
  <p class="fotorama-caption" style="background:#000000;margin-top:0; line-height: 1.3;width:500px"></p>

<!-- タイトルをコンテンツの外に表示 Javascritは</body>の直前に配置します 
 クラススセレクタ名fotoramatitleInでFotorama設定 -->
<script type="text/javascript">
 $('.fotoramatitleIn')
   .on('fotorama:show', function (e, fotorama) {    
     fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
     var activeFrame = fotorama.activeFrame;
     fotorama.$caption.html(
     '<strong>' + activeFrame.title + '</strong><br>'
     + '<mark style="background:#000000;color:#ffffff;padding:2px">' 
     +  (fotorama.activeIndex + 1) + ' / ' + fotorama.size + ' -</mark> '
     + activeFrame.author
     );
  })
  .fotorama();  //クラススセレクタ名fotoramatitleInでFotorama設定
</script>
</body>


<style type="text/css">
.fotoramatitle,.fotoramatitleIn,
.fotorama-caption {
    width: 600px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.fotorama-caption {
    text-align: center;
    line-height: 1.1;
    color: #838484;
    font-family: "ＭＳ ゴシック",sans-serif;
    font-weight: 700;
 
    strong {
        font-weight: normal;
        color: #eee;
    }
 
}
</style>

API デモ

タイトルをコンテンツの外に表示

アクティブインデックス（枚数）を表示

タイトルにアクティブインデックスを埋め込み枚数表示