東京で働くWEBディレクター/デザイナーのカナダ ジャスパー旅行記など

Jqueryプラグイン「fotorama」で画像にリンクを貼る方法

Jqueryプラグイン「fotorama」で画像にリンクを張る方法

2015.12.07

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

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

fotoramaの使い方

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

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

fotoramaの設置コード例

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

fotoramaで画像にリンクを張る

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

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

参考例その1 – html記述

参考例その1 – css記述

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

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

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

参考例その2 – html記述

参考例その2 – css記述

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

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

web

RELATED ARTICLES

TOP