My Vector Space

  人生は寄り道してなんぼ

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

  jquery-11     

多くのLightBoxプラグインがprototypeで動くものが多い中、JQueryで実装することのできる「LightBoxプラグインです。

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

細かくみていくと、

LightBoxのファイルをダウンロードする
まずは以下のサイトからLightBoxのファイルをダウンロードする   http://lokeshdhakar.com/projects/lightbox2/
ダウンロードした「LightBox.js」と「LightBox.css」ファイルを<head>内に設置
 【 html 】
 1
  <link rel="stylesheet" href="lightbox/css/lightbox.css">
 3
  <script src="lightbox/js/lightbox.js"></script>
対象となる画像の<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