jQuery

スマホにオススメのレスポンシブスライダーFotorama使い方

fotorama

今回は、スマホサイトや画像ギャラリー系サイトのスライダーにオススメのjQueryプラグイン【Fotorama】のご紹介です。

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

実装もとても簡単ですし、jsファイル等の【CDN】も用意してあります。
また、WordPressのプラグインとしても配布されているスライダーですので、様々な用途にご利用ができます。

実際に【Fotorama】を使ったデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

実際にデモサイトで、Fotoramaを使ってみた感想ですが、僕的にはデフォルトで利用しても、レスポンシブに対応していますので、レスポンシブのWebサイトやスマホサイトにピッタリのスライダープラグインと思いました。

また、フルスクリーンモード・ループ・自動再生を利用すれば、ギャラリー系のサイトに利用すれば便利かなーと思いました。

Fotorama 使い方

それでは、実際に【Fotorama】の使い方を説明していきたいと思います。
今回は、全てのファイルをCDNで読み込んでいますが、ご自身でダウンロードをして利用する場合は、こちらからダウンロードして下さい。

必要ファイルの読み込み

まずは、CDNjQuery本体と【Fotorama】のjs/cssファイルをhead要素内に読み込みます。

<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>

HTMLの記述

次にHTMLの記述をしていきます。
下記コードのようにクラス名に【fotorama】を付加するのを忘れないようにして下さい。。

<div class="fotorama">
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
  <img src="img/img-03.jpg">
  <img src="img/img-04.jpg">
  <img src="img/img-05.jpg">
  <img src="img/img-06.jpg">
  <img src="img/img-07.jpg">
  <img src="img/img-08.jpg">
  <img src="img/img-09.jpg">
  <img src="img/img-10.jpg">
</div>

上記までの記述で、jQueryスライダープラグイン【Fotorama】の実装の完了です。
HTMLなどが分かる方は、拍子抜けするほど簡単だと思います。
JavaScriptやCSSなどの記述もなくHTML側のdiv要素などにクラス名=fotoramaと記述するだけで実装出来ます。

また、CDNを利用すればわざわざダウンロードして、ファイルをFTPなどアップロードする必要もありませんのでとても楽かなーとは思いますので、オススメのスライダープラグインです。

実際に【Fotorama】を使ったデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

オプション

Fotoramaでは、様々なオプションが用意されておりますので、そちらも少しご説明したいと思います。
全てのオプションを見たい方は、こちらからご確認下さい。
基本的にオプションに関しましても、deta属性を利用して、直接HTMLに記述して適応されます。

画像の幅と高さを調整

画像の幅と高さを調整したい場合は、【data-width】【data-height】で指定します。

<div class="fotorama" data-width="960" data-height="600" >
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
</div>

レスポンシブ

基本的にデフォルトの状態で、レスポンシブに対応しているのですが、上記のように画像の幅と高さを指定すると、画像が固定になりますので、【data-ratio】を利用して画像の比率を指定します。

下記コードでは、画像の元サイズをそのまま指定していますが、【4/3】等の比率でも指定は可能です。

<div class="fotorama" data-width="960" data-height="600" data-ratio="1280/853">
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
</div>

サムネイルの表示

画像のサムネイルを表示する場合は【data-nav=”thumbs”】と記述します。

<div class="fotorama" data-nav="thumbs">
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
</div>

フルスクリーンモード

フルスクリーンモードのボタンを表示させたい場合は【data-allowfullscreen=”true”】と記述します。

<div class="fotorama" data-allowfullscreen="true">
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
</div>

自動再生・ループ

スライダーの自動再生を有効にしたい場合は【data-autoplay=”true”】と記述しループを有効にしたい場合は【data-loop=”true”】とします。

<div class="fotorama" data-autoplay="true" data-loop="true">
  <img src="img/img-01.jpg">
  <img src="img/img-02.jpg">
</div>

画像のキャプションの表示

画像のキャプションを表示させたい場合は、img要素に【data-caption=”キャプション”】と記載します。

<div class="fotorama">
  <img src="img/img-01.jpg" data-caption="キャプション">
  <img src="img/img-02.jpg" data-caption="キャプション">
</div>

画像にリンク先を指定

こちらのスライダープラグインは、HTML側のimg要素などにそのままa要素を指定してもリンクが正常に表示されません。
なので下記のようにHTMLとCSSを記載します。
【data-thumb】でサムネイル画像の指定をしていますが、サムネイル画像を表示させていない場合は、div要素のみでOKです。
また、CSS側のwidht/height/background-sizeですが、こちらはデモサイト用のコード記載していますので、ご自身のご利用する環境などで変更して下さい。

<div class="fotorama">
 <div data-thumb="img/img-01.jpg"><a href="http://glow-factory.com/" target="_blank"></a></div>
</div>
.fotorama a{
	display:block;
	width:100%;
	height:750px;
	background:url(img/img-01.jpg) no-repeat center;
	background-size:cover;
	}

この他にもスライダープラグイン【fotorama】のオプションもありますので、下記リンク先よりご確認下さい。

カスタマイズ デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS wp-email-login

WordPressでユーザーがメールアドレスでログインする方法

NEXT snippet-login-email

【WordPressスニペット】メールアドレスやユーザー名でも管理画面にログインする