Lightbox2の設置 - ホームページ・Web制作全般 - 専門家プロファイル

三木 太郎
WASABI 代表取締役社長
兵庫県
ITコンサルタント

注目の専門家コラムランキングRSS

対象:ホームページ・Web制作

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

 

 

スタンダードになりつつある、lightboxはそれだけ普及している為クライアントからの要望も少なくありません。

 

設置もそれほど難しくない為、メールで回答している内容をちょっと変えて記述してみます。

 

 

1 下記から「Lightbox 2」をダウンロードします。

 

http://www.lokeshdhakar.com/projects/lightbox2/#download

 

2 解凍すると1つのファイルと3つのフォルダが出てきます。

 

3 「js」「css」「images」をアップロードします。

 

4 headの中に下記を記述します。

 

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

 

5 スタイルシートのパスもヘッダー内に記述します。

 

例:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

 

6 Lightboxを使いたい画像のタグを下記の様にします。

 

例:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

 

7 複数枚ある場合は、下記の様に記述すると画像内に別の画像に移動するリンクが出来ます。

 

例:

<a href="images/shop_info01l.jpg" title="image #1のタイトル" rel="lightbox[roadtrip]">image #1</a>

<a href="images/shop_info02l.jpg" rel="lightbox[roadtrip]" title="image #2のタイトル" >image #2</a>

<a href="images/shop_info03l" rel="lightbox[roadtrip]" title="image #3のタイトル" >image #3</a>

 

備考

lightbox.cssの記述を変更する事により、#overlay(黒くなる背景の色)や#imageDataContainer(画像のまわりの白いフチの色)を変更出来たり、imagesフォルダの中にある画像を変更することでボタンなどを変える事が出来ます。

 

FTPを利用する為、必ずバックアップを取ってから作業を始める位が注意点です。