「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。
手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。
以下、手順の詳細
画像をオーバーレイで表示する「LightBox」プラグインの設定
1. LightBoxのファイルをダウンロードする
まずは以下のサイトからLightBoxのファイルをダウンロードする
http://lokeshdhakar.com/projects/lightbox2/
2. 「LightBox.js」と「LightBox.css」ファイルを＜head＞内に設置
まず、ダウンロードしたファイルの中から「LightBox.js」と「LightBox.css」ファイルを＜head＞内に設置する。
【 html 】
1
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”を指定すれば完了。
関連記事
LIGHT BOX関連の記事
PICK UP
TIPS記事セレクション
Splendid article, it’s not regularly that I will wantcomment your pleasant article. You done a number of good points here.