JavaScript覚え書きでダイナミックなページを実現するためのライブラリである。

　画像がニュイーっと出てくるあれを実現する方法。

http://www.skuare.net/2007/11/jquerylightboxjavascriptjquery.html　に書いてある方法を試した。この記事がなくなる事もあるだろうから、ここにやった事を書いておく。

1. プラグインをダウンロード　http://leandrovieira.com/projects/jquery/lightbox/　そしてサーバにupload
2. head部分に下記を記載

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

1. head部分に下記を記載~

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

1. lightboxを使う方法をset

　このプラグインは a タグでlightboxが起動するようである。~

 <script type="text/javascript">
 $(function() {
 // 各aタグに、rel="lightbox"を記載して起動する方法。
 $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
 // cssのIDで起動する方法。aタグ全て起動するので、単純リンクでも起動しようとする。
 $('#gallery a').lightBox(); // Select all links in object with gallery ID
 // クラスで指定する方法
 $('a.lightbox').lightBox(); // Select all links with lightbox class
 // 全部のaタグで起動。
 $('a').lightBox(); // Select all links in the page
 });
 </script>

aタグの中にtitle=　を書くとキャプションになる。

例）

 $('a[@rel*=lightbox]').lightBox({ 
 　imageLoading:'../../jquery/images/lightbox-ico-loading.gif',
 　imageBtnPrev:'../../jquery/images/lightbox-btn-prev.gif',
 　imageBtnNext:'../../jquery/images/lightbox-btn-next.gif',
 　imageBtnClose:'../../jquery/images/lightbox-btn-close.gif',
 　imageBlank:'../../jquery/images/lightbox-blank.gif'
 　}
 );
 });

　lightbox(の中にoptionを書いて体裁を変える事が出来る。それと、ボタンイメージはプラグインの中で決められた相対ディレクトリを参照するようになっているので、それを上書きする。指定できるOptionはプラグインの中に書かれている。

こちらはまた異なるプラグイン

• http://blog.webcreativepark.net/2008/03/24-223837.html

-