- 三木 太郎
- WASABI 代表取締役社長
- 兵庫県
- ITコンサルタント
対象:ホームページ・Web制作
- 小菅 太郎
- (ITコンサルタント)
- 原島 洋
- (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を利用する為、必ずバックアップを取ってから作業を始める位が注意点です。