サムネイル付きjQueryスライダーfotorama

色々なサムネイル付の画像ギャラリーでfotoramaにたどり着きました

いろんなスライドショーを試してみましたが、もっとも簡単で、もっとも汎用性が高いと感じましたので、非常にオススメです。

設置も楽です。下記の参考サイトがありますので、見ながら進めれば問題ありません。

公式サイト

注意点としては、CSSでセンタリングしようとしない事

参考サイトの説明も流し読みしてしまった為、画像の幅指定を無視して設置したら、画像が左寄せになっている。

.fotoramaにmargin:0 auto;でも見向きもしてくれなかった。何が問題か分からずに、諦めかけていたのですが、その前にもう一度公式サイトを良くみてみようと思って戻ってみたら、ちゃんと記載されてました。

画像の横幅の事

最初は、下記しか記載しなかったので画面のメインが800pxだとそれより小さな画像は、左寄せになってしまいました。じゃ～画像をMAXの800pxにしてしまえば、センタリングと同じじゃないか！と思いやってみて、PCでは問題なかったのですが、ipadだと画像が大きすぎて違和感がありました。

この状態でいくら.fotoramaにCSSで書き込んでも無駄でした。

<div class="fotorama">
<img src="1.jpg" alt="" /> <img src="2.jpg" alt="" /> <img src="3.jpg" alt="" />
</div>

そこで、上記を下記に変更でセンタリングの問題が解決しました。

<div class="fotorama" data-width="100%">
<img src="1.jpg" alt="" /> <img src="2.jpg" alt="" /> <img src="3.jpg" alt="" />
</div>

説明はしっかりと読んで進めた方が時間の短縮になると感じました。

画像のキャプションの表示にも対応しているが、サムネイル画像付だとキャプションが表示されない

仕方ないので、読み込みを少しでも早くする為にサムネイル用画像の小さな画像を使用していたのですが、キャプションを使用する所だけ大きな画像をそのままサムネイルに使用して、キャプション付にしました。下記ご参考までに。

通常のサムネイル設置の仕方

<div class="fotorama" data-nav="thumbs">
  <a href="./images/1.jpg"><img src="./images/thumbnails/1.jpg"></a>
  <a href="./images/2.jpg"><img src="./images/thumbnails/2.jpg"></a>
</div>

通常のキャプション設置の仕方

<div class="fotorama">
  <img src="./images/1.jpg" data-caption="One">
  <img src="./images/2.jpg" data-caption="Two">
</div>

下記だとキャプションが表示されない。

<div class="fotorama" data-nav="thumbs">
  <a href="./images/1.jpg"><img src="./images/thumbnails/1.jpg" data-caption="キャプション"></a>
  <a href="./images/2.jpg"><img src="./images/thumbnails/2.jpg"></a>
</div>

その為、キャプションがある所だけは通常の画像を使用した。

<div class="fotorama" data-nav="thumbs">
  <img src="./images/thumbnails/1.jpg" data-caption="キャプション">
  <a href="./images/2.jpg"><img src="./images/thumbnails/2.jpg"></a>
</div>

設置する時、タグの所で間を空けるとちゃんと表示されない

画像の枚数が多くなったので見やすくする為にタグをいれないで一行スペースを空けて設置すると、その一行のスペース以降ちゃんと表示されなくなってしまった。

<div class="fotorama" data-nav="thumbs">
  <img src="./images/thumbnails/1.jpg" data-caption="キャプション">
  <a href="./images/2.jpg"><img src="./images/thumbnails/2.jpg"></a>
  <a href="./images/3.jpg"><img src="./images/thumbnails/3.jpg"></a>

  <a href="./images/4.jpg"><img src="./images/thumbnails/4.jpg"></a>
</div>

画像や動画にも対応、レスポンシブWebデザインにも対応

詳しく解説してあるサイトがありました。

今回クライアントワークで実装した、サムネイル付きのjQueryスライダーfotoramaをご紹介します。
標準では機能のない、画像にリンク先を設定してみました。
出典：https://www.narugaro.com/…

設置も簡単で、デザインもシンプルなJQueryスライダー「Fotorama」。レスポンシブWEBデザインへの対応、タッチイベント(クリックやスワイプでのスライド実行)のカスタマイズも簡単にできるスマホサイトにもおすすめのJQueryスライダーです。
出典：https://wp-and.me/fotorama/

こちらのスライダープラグインは、レスポンシブ・スワイプでの画像移動・フルスクリーンモードなども対応しているスライダープラグインです。
さらに、画像だけではなく【HTML】【動画】などもスライドに対応しています。
出典：https://glow-factory.com/…