シンプルで美しいスライドギャラリーjQueryプラグイン「fotorama.js」

jQueryを使ったスライドギャラリーは、数多く存在していますがオプションが充実したシンプルなスライドを利用したい時などに使える「FOTORAMA」を使ってみました。

1.FOTORAMAよりデータ一式をダウンロード

2.jQuery本体を読み込みます。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

1	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

3.「fotorama.js」と「fotorama.css」を読み込みます。

<link  href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet">
<script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script>

1 2	<link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet"> <script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script>

4.HTMLを記述する

<div class="fotorama">
	<img src="images/img1.jpg">
	<img src="images/img2.jpg">
	<img src="images/img3.jpg">
</div>

</div>

fotoramaというクラス名を付けた親要素の中に、スライド表示したい画像を羅列すればOKです。

デモサンプル