天城スタジオ

簡単に画像を拡大表示するjQueryの紹介

 

クリックするとサムネイル画像が拡大するjQuery

 

  この手のスクリプトは沢山ありますが、 すごく便利で使い勝手の良いlightboxを発見したので紹介します。

  ワードプレスではプラグインがあるので問題ないのですが、 ワードプレスのプラグインに依存しないlightboxです。

 

    元々のソースは無料で配布されいますので、 まずlightboxをダウンロードする必要があります。 海外のサイトですが、 説明などが書いています。

  http://lokeshdhakar.com/

ダウロードページが見つからない人は、 下記より直接ダウンロードページへ移動してください。

http://lokeshdhakar.com/projects/lightbox2/

ダウンロードが完了したら中身を確認しましょう。

 

lightboxフォルダの中には、 色々なファイルがありますが、 必要なのは   jsフォルダ

• lightbox.js

  imgフォルダ

• close.png
• loading.gif
• next.png
• prev.png

  cssフォルダ

• lightbox.css

  だけです。

 

  もしjQuery使っていない場合は、 jQueryの本体も必要です。

  jquery-1.11.0.min.js

それらを全てアップロードして、

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

 

 上記をheaderタ内に記述し   サムネイルの「imgタグ」の「rel」要素に 単体の場合「lightbox」

rel="lightbox"

  グループの場合「lightbox[roadtrip]」

rel="lightbox[roadtrip]"

    と記述すれば完了です。 ディレクトリなどに注意して、 間違いなくアップロードと記述されていれば、 下のように画像が拡大されようになります。

  CSSを変更することで表示スタイルを変えることができますが、 すでに完成されたlightboxなので、 そのまま使っても問題ないというところが、 このlightboxの優れているところです。

  上のサンプル画像では画像サイズがリサイズされないようにカスタマイズされています。 デフォルトだと高さ「height」が画面の100％で固定されているので、 原寸サイズで表示されるようにカスタマイズしています。

 

  方法はlightbox.jsファイルの２１３行目あたりの下記をコメントアウトするだけです。

 

maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

 

 

  またデフォルトでは画像のタイトルが出ないようになっていますが、 「imgタグ」内にdata-title要素をつけることで画像にタイトル（caption）をつけることが出来ます。

data-title="画像の名称"

 

    もちろんCSSやJSファイルを好みにカスタマイズすることもできます。

 

    尚、紹介したlightboxは頻繁にバージョンアップされるようなので、 お気をつけてください。

 

    以上、簡単に画像を拡大表示するjQueryの紹介でした。