My Vector Space

人生は寄り道してなんぼ

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

  jquery-11     

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">
 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関連の記事

PAGE TOP