サムネイル付きjQueryスライダーfotoramaのオプション設定(画像にリンク先)

fotorama

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

  1. head内で宣言
  2. htmlでスライドする画像を設定
  3. オプション設定
  4. 画像にリンク先を設定

1.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ファイルを読み込みます。


2.スライドする画像を設定

<div class="fotorama-wrap">
  <div class="fotorama">
    <img src="./images/1.jpg">
    <img src="./images/2.jpg">
  </div>
</div>

宣言と、上記を記述するだけでスライドとして機能します。


3.オプション設定

  <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>
    

4.画像にリンク先を設定

<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);">画像1</span></a></div>
			<div data-thumb="./images/thumbnails/2.jpg"><a href="http://url.html""><span style="background-image:url(./images/2.jpg)">画像2</span></a></div>
</div>
</div>

今回はスライド画像にリンク先を設定してみました。他にスマートなやり方があるかもしれませんが、わたしが思いついたのはこんなかんじです…。
この場合、spanに対して下記のスタイルを当ててあげます。

.fotorama span {
	background:transparent no-repeat center;
	width:800px;
	height:600px;
	display:block;
	text-indent:-9999px;
}

こんなかんじで、リンクを設定することができます。ぜひ、試してみてください!

2 注釈 “サムネイル付きjQueryスライダーfotoramaのオプション設定(画像にリンク先)

コメントを残す

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