簡単にフリップコンテンツを実装する

こんにちは、ウェブラボ技術メモです。

今回は簡単にフリップコンテンツを実装できるプラグイン「jQuery.Flipster」を紹介したいと思います。

フリップコンテンツと聞くと導入に敷居が高そうに聞こえますが、全然そんなことはありません！！すごい簡単に実装できてしまうんです！！

では早速実装していきます。

プラグインは下記よりダウンロードしてください。

・Github
https://github.com/drien/jquery-flipster

まずはjquery本体、jquery.flipsterを動かすのに必要なファイルを読み込ませます。

■外部ファイル読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.flipster.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.flipster.css">

次にコンテンツ部分を記述します。

下記のように各パネルはリストタグで、それを内包する要素にクラスまたはIDを与えます。

■コンテンツ部分

<div class="flipster1">
<ul>
<li><img src="img/img01.jpg" width="300" height="200" alt=""></li>
<li><img src="img/img02.jpg" width="300" height="200" alt=""></li>
<li><img src="img/img03.jpg" width="300" height="200" alt=""></li>
<li><img src="img/img01.jpg" width="300" height="200" alt=""></li>
<li><img src="img/img02.jpg" width="300" height="200" alt=""></li>
<li><img src="img/img03.jpg" width="300" height="200" alt=""></li>
</ul>	
</div>

javascript部分は</body>の上に記述してください。

先ほど与えたクラスまたはIDをここで指定します。

■javascript部分

$(function() {
	$('.flipster1').flipster({
		style: 'coverflow' //ここでレイアウトをかえる。（coverflow|carousel|flat|wheel）
	});
});

これだけで実装できちゃうんです。簡単ですね。

せっかくなので用意されているレイアウト4種類全てのDEMOを用意しました。

DEMOはこちら

ぺらぺら、くるくると気持ちよく操作できますね。

しかもこのプラグインはレスポンシブ対応で、スマホでも、タブレットでも同じ動きができます。

また、オプションも色々とあるので自分好みの設定にもできます。（Github参照）

気になる対応ブラウザは、

Chrome
Safari & iOS Safari
Firefox
IE 10+
IE 8-9 （一部サポート）
とのこと、念の為IE 8-9で確認してみましたがこれは対応していないようなものと考えた方がいいですね。

古いブラウザなんて知らない！とにかくサイトをカッコ良くしたい！！と言う人には色々と役立つ機会があるのではないでしょうか？

以上、今回の技術メモでした。