お問い合わせはコチラから

画像スライドショー FOTORAMA jsプラグイン

サイト運営

この記事では、サムネイル付きの画像ギャラリーにスライダー機能をつけたい時に便利な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を書く時の注意点

FOTORAMAの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だととても簡単にレスポンシブに対応したサムネイル付きの高機能なスライダーを実現できます。

大量の画像をスライダーで表示したいときには、とても便利なプラグインだと思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました