今回クライアントワークで実装した、サムネイル付きのjQueryスライダーfotoramaをご紹介します。
標準では機能のない、画像にリンク先を設定してみました。
head内で宣言
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="./js/fotorama.js"></script> <link rel="stylesheet" href="./css/fotorama.css" />
上記のように、jQuery（わたしは、たいてい1.8.2を使用しています…）とダウンロードしてきたjsファイル、cssファイルを読み込みます。
スライドする画像を設定
<div class="fotorama-wrap">
<div class="fotorama">
<img src="./images/1.jpg">
<img src="./images/2.jpg">
</div>
</div>
宣言と、上記を記述するだけでスライドとして機能します。
オプション設定
<div class="fotorama" data-autoplay="3000" data-loop="true" data-width="100%" data-height="380" data-minheight="200" data-nav="thumbs" data-transition="crossfade" data-keyboard="true" data-allowfullscreen="false" data-shadows="false" data-thumbwidth="120" data-thumbheight="40" data-click="false" data-arrows="true" data-swipe="true">
<img src="./images/1.jpg">
<img src="./images/2.jpg">
</div>
</div>
スライドにオプションを付加することができます（他の記述方法もあるようですが、わたしはこの書き方で実装しました）。
主なオプション一覧
- 大きさ
スライド画像の大きさを設定します。
<div class="fotorama" data-width="800" data-height="600"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </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" data-allowfullscreen="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- 動画再生
YouTubeなどを使って、動画を再生します。
<div class="fotorama"> <a href="http://youtube.com/watch?v=C3lWwBslWqg">Desert Rose</a> <a href="http://vimeo.com/61527416">Celestial Dynamics</a> </div>
- HTMLを記述
HTMLで記述したものをスライドさせます。
<div class="fotorama"> <div>One</div> <div><strong>Two</strong></div> <div><em>Three</em></div> </div>
- フィットさせる
画像を幅に応じてフィットさせます。
<div class="fotorama" data-fit="cover"> <img src="./images/1.jpg"> <img src="./images/2.jpg" data-fit="cover"> </div>
- フェード効果
フェード効果をつけます。
<div class="fotorama" data-transition="crossfade"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- キャプション
画像にキャプションを表示します。
<div class="fotorama"> <img src="./images/1.jpg" data-caption="One"> <img src="./images/2.jpg" data-caption="Two"> </div>
- データURL
スライドの中の特定の画像の時のURLを設定します。
<div class="fotorama" data-hash="true"> <img src="./images/1.jpg" id="one"> <img src="./images/2.jpg" id="two"> </div>
- ループ
ループ再生します。
<div class="fotorama" data-loop="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- 自動再生
自動で再生が始まります。trueの部分を数値にすると、秒数を設定することができます。
<div class="fotorama" data-autoplay="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- シャッフル
画像ギャラリーをシャッフルします。
<div class="fotorama" data-shuffle="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- キーボード操作
キーボードの矢印でスライドを動かします。
<div class="fotorama" data-keyboard="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- 矢印、クリック、スワイプ
スライドを矢印、クリック、スワイプで動かします。
<div class="fotorama" data-arrows="true" data-click="true" data-swipe="true"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
- ナビゲーション位置
ナビゲーションの位置を変更します。
<div class="fotorama" data-navposition="top"> <img src="./images/1.jpg"> <img src="./images/2.jpg"> </div>
画像にリンク先を設定
<div class="fotorama-wrap"> <div class="fotorama" data-width="800" data-height="600" data-nav="thumbs" data-thumbwidth="200" data-thumbheight="80"> <div data-thumb="./images/thumbnails/1.jpg"><a href="http://url.html"><span style="background-image:url(./images/1.jpg);">画像１</span></a></div> <div data-thumb="./images/thumbnails/2.jpg"><a href="http://url.html""><span style="background-image:url(./images/2.jpg)">画像２</span></a></div> </div> </div>
今回はスライド画像にリンク先を設定してみました。他にスマートなやり方があるかもしれませんが、わたしが思いついたのはこんなかんじです…。
この場合、spanに対して下記のスタイルを当ててあげます。
.fotorama span {
background:transparent no-repeat center;
width:800px;
height:600px;
display:block;
text-indent:-9999px;
}
こんなかんじで、リンクを設定することができます。ぜひ、試してみてください！
「サムネイル付きjQueryスライダーfotoramaのオプション設定（画像にリンク先）」への2件のフィードバック