よく利用するJqueryプラグイン「fotorama」。
レスポンシブ対応で画像のスライドショーが簡単に設置できます。
また、オプションを利用することでフェードイン・フェードアウト・サムネイル等も設定できて大変便利。

使い勝手が非常に良いのですが、「そう言えば画像にリンクを張るのってどうするんだろう？」と思い、色々と調べてみた結果をまとめてみました。

fotoramaの使い方

「fotorama」自体の使い方はいたってシンプル。
配布元サイトにて、ソースコード一式をDLしてきて、公式サイトに掲載をされてる下記の通りにソースコードを記述すれば動くはずです。
※相対パス、絶対パス指定は適宜変更してください

1. Jqueryとcssをhead内で宣言
2. イメージデータを設置してclass=”fotorama”でマークアップ
3. その他オプションがある場合は設定

fotoramaの設置コード例

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

<!-- 3. Enjoy! -->

フェードイン、フェードアウト、画像サイズの大きさを指定する等のオプションも、公式サイトにデモと一緒に解説がされています。

fotoramaで画像にリンクを張る

上述の通り、簡単に設置が出来てレスポンシブ対応と言うことなしなプラグインなのですが、よくある制作例としてそれぞれの画像にリンクを貼りたいと思います。

色々とネットを調べてみると解説をされている方がおりましたので、以下ソースを引用させて頂きます。

参考例その1 – html記述

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

参考例その1 – css記述

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

spanクラスで背景画像を指定しつつ、文字列はtext-indentで画面外へ飛ばす方式のようですね。

「サンプルも掲載されていて有難い！」と思い、早速上記を実装してみましたが、他のプラグインと競合をしているのか私が作ったWEBサイトでは上記のやり方では画像にリンクを張ってクリックすることが出来ませんでした・・・。

更にネットで事例がないかどうか調べてみると、海外のフォーラムにて別のソースコードにて画像にリンクを張る方法を紹介されている方がいました。

参考例その2 – html記述

<div class="fotorama">
  <div data-img="1.jpg"><a href="http://google.com/"></a></div>
  <div data-img="2.jpg"><a href="http://apple.com/"></a></div>
</div>

参考例その2 – css記述

.fotorama__html div,
.fotorama__html a {
  display: block;
  height: 100%;
  /* Transparent links are not clickable in IE,
     but non-existent background fixes this.
    (Put an empty 1×1 image here to avoid
     errors in console.) */
  background: url(_.gif);
}

私の場合ですが、参考例その2のやり方できちんと画像にリンクが挿入されました。
cssの方に英文で注意がありますが、1×1pxの透明gifを設置しないとIEでエラーになるようですので、念のためスペーサーgifを設置しておきました。

こういうやり方もあるよ、と言う事で何かのお役に立てれば。