この記事では、サムネイル付きの画像ギャラリーにスライダー機能をつけたい時に便利なjavascriptプラグインFOTORAMAをご紹介しています。
この記事は、商品ページなどで商品画像が多い時に

- サムネイルを表示しつつ商品画像はスライダーで切り替えたいてい
- スマホでスワイプで切り替えたい
- フルスクリーンでも同じような操作性が欲しい
と思ったときに色々探した結果、FOTORAMAが一番簡単だったので、その時の導入方法をまとめたものです。
FOTORAMAにはサムネイル表示する機能がありますが、別途自前でサムネイル表示させている場合に、サムネイルクリックでスライダー表示位置を切り替える方法についてもご紹介します。
サムネイル付きスライダーの作成する方法
最近では、画像スライダーといえばslickかswiperという流れですが、サムネイル付きギャラリーでスライダーもつけたい時に、slickとかswiperを使うと結構面倒です。
以前、slickでサムネイル付きスライダーの実現方法について以下の記事でご紹介しました。
この方法は、便利なのですが、商品紹介ページなどのすでにあるHTMLに組み込もうとした時に、既存のstyleが邪魔してうまくいきませんでした。
FOTORAMAの入手先
FOTORAMは以下の公式サイトから入手できます。
でも、ダウンロードしなくてもCDNで読み込めるので、特にダウンロードしなくてもOKです。
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
FOTORAMAの使い方
使い方は公式サイトにある通りにすればよく、とても簡単です。
<script>
$(function () {
// 1. Initialize fotorama manually.
var $fotoramaDiv = $('#fotorama').fotorama();
// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');
// 3. Inspect it in console.
console.log(fotorama);
});
</script>
<div id="fotorama"
class="fotorama"
data-auto="false">
<!-- ↑ Important attribute. -->
<img src="1.jpg">
<img src="2.jpg">
</div>
HTMLを書く時の注意点
- imgタグじゃないとダメなようです。
⇒ul/liタグやdivタグだとスライダーとして上手く認識しません。 - imgのsrcは必須です。
⇒lazy-loadなどでsrcを使わない記述になっていると、スライダーとして上手く認識されません。
ページ読み込み時にスライドが全て見えてしまう
jsのスライダーによくある問題があります。その問題とは、ページ読み込み時にjsが読み込まれるまでの期間、スライド画像がすべて表示されてしまう現象です。javascriptをフッターで読み込むとHTMLが表示された後でスライダーが有効になるためです。
この現象は、slickだとslick-initializedを使う方法で回避できますが、FOTORAMAの場合は決まった方法というのは無いようです。
公式にあるけど動かない回避策
公式サイトに載っていた作者が提示した回避策は以下の通りです。
引用元: https://github.com/artpolikarpov/fotorama/issues/182
.fotorama > div {
/* Hide your blocks */
display: none;
}
.fotorama > div:first-child,
.fotorama .fotorama__wrap > div {
/* Show only first one before ready,
and everything after successfull initialization */
display: block;
}
おそらく上記だと動かないので、以下の様なCSSの方が実情に合っているかと思います。
FOTORAMA初期化前に画像が見えてしまう問題の回避策
考え方としては、FOTORAMA初期化前のHTMLの一枚目のスライド(img)だけ表示して、あとは非表示にします。ポイントは、直下セレクタを使っていることで、jsが有効になるとdivの階層が複数間に挟まるので、この指定はFOTORAMA初期化前しか意味を持ちません。つまり、FOTORAMAが有効になると存在しないセレクタになることを利用して、FOTORAMA初期化後に残っていても影響しない記述方法になっています。
.fotorama > img{
/* Hide your blocks */
display: none !important;
}
.fotorama > img:first-child {
/* Show only first one before ready,
and everything after successfull initialization */
display: block !important;
}
よく使うオプション(スライダー)
data-allowfullscreen=”native”
全画面表示を有効にするオプション
data-nav=”thumbs”
サムネイル表示を有効にするオプション
data-transition=”crossfade”
スライダーの切り替えアニメーションの指定
data-autoplay=”7000″
スライダーの切り替え時間
よく使うオプション(スライド)
data-caption=”説明”
キャプションを入れる
応用編:サムネイル画像とFOTORAMAを連動させる
ちょっとわかりにくいですが、FOTORAMAにあるサムネイル機能ではなく、slickでサムネイル連動スライダーを作成した時のようにサムネイルを自前で用意して、サムネイルがクリックされたらFOTORAMAのスライダーの表示を連動させるというものです。
FOTORAMAのサムネイルは、一列しか表示できないので、スライダーとは別にサムネイルをすべて表示して、スライダーと連動させる場合には必要な処理になります。
javascript
jQuery(function(){
var $fotoramaDiv = $('.fotorama').fotorama();
var fotorama = $fotoramaDiv.data('fotorama');
var thumbnailItem = ".preview .preview__content"; // サムネイル画像アイテム
//サムネイル画像アイテムをクリックしたときにスライダー切り替え
$(thumbnailItem).on('click',function(){
var index = $(this).attr("data-image-id");
fotorama.show(index);
console.log(fotorama.activeIndex);
});
});
HTML
<ul class="preview">
<li class="preview__content" data-image-id="itempage-itemImage1">
<div class="itempage-item__subImage">
<img src="https://41533.jpg" alt="" title="">
</div>
</li>
<li class="preview__content" data-image-id="itempage-itemImage2">
<div class="itempage-item__subImage">
<img src="https://c8688.jpg" alt="" title="">
</div>
</li>
</ul>
まとめ
FOTORAMAは 2015年のリリースから更新されていないためか、あまり話題にも上らないプラグインですが、古さも感じないとても使いやすいプラグインだと思います。
SlickやSwiperだと複雑なオプション指定が必要ですが、FOTORAMAだととても簡単にレスポンシブに対応したサムネイル付きの高機能なスライダーを実現できます。
大量の画像をスライダーで表示したいときには、とても便利なプラグインだと思います。