【TIPS】画像をオーバーレイで表示する「LightBox」プラグイン

　　     

「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。

手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。

以下、手順の詳細

画像をオーバーレイで表示する「LightBox」プラグインの設定

1.  LightBoxのファイルをダウンロードする

まずは以下のサイトからLightBoxのファイルをダウンロードする

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

2.  「LightBox.js」と「LightBox.css」ファイルを＜head＞内に設置

まず、ダウンロードしたファイルの中から「LightBox.js」と「LightBox.css」ファイルを＜head＞内に設置する。

 【 html 】

 1

  <link rel="stylesheet" href="lightbox/css/lightbox.css">

 2

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 3

  <script src="lightbox/js/lightbox.js"></script>

3.  対象となる画像の＜a＞タグに、rel="LightBox"を指定

次に、対象とする画像の＜a＞タグに、rel=”LightBox”を指定すれば完了。

 【 html 】

 1

  <a href="#" rel="lightbox">

 2

    <img src="sample.jpg">

 3

  </a>

参考サイトhttp://www.webantena.net/javascriptjquery/jquery-plugin-lightbox2-5/  

関連記事LIGHT BOX関連の記事