LightBoxのJQuery版 jQuery lightBox plugin
jQuery lightBox pluginは、LightBox 2のjQuery版です。
LightBox 2はPrototypeで動いているのですが、それをjQueryで動かせちゃうですよ。
自分はほとんどjQueryしか使わないので、LightBoxを使う時はこの方法で使用しています。
jQuery lightBox pluginの使い方
- jQuery lightBox pluginダウンロード
- 解凍したファイルにある「js」「css」「images」フォルダをアプロード。
- headタグ内に下記ソースを記述
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
HTMLソース例
<div id="gallery">
<ul>
<li><a href="photos/image1.jpg" title="画像1のタイトルが入ります。"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a></li>
<li><a href="photos/image2.jpg" title="画像2のタイトルが入ります。"><img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /></a></li>
<li><a href="photos/image3.jpg" title="画像3のタイトルが入ります。"><img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /></a></li>
<li><a href="photos/image4.jpg" title="画像4のタイトルが入ります。"><img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /></a></li>
<li><a href="photos/image5.jpg" title="画像5のタイトルが入ります。"><img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /></a></li>
</ul>
</div>
「id="gallery"」となっている部分と「('#gallery a').lightBox();」を同じ名前にすれば、どんな名前にしても大丈夫です。
追記：6/20 画像単体で呼び出し
$(function() {
$('.gallery1 a').lightBox();
});
$(function() {
$('.gallery2 a').lightBox();
});
$(function() {
$('.gallery3 a').lightBox();
});
$(function() {
$('.gallery4 a').lightBox();
});
$(function() {
$('.gallery5 a').lightBox();
});
XHTHML
呼び出したい画像を個別に class="gallery1" class="gallery2" ... とつけていくしかないと思います。
いつも勉強させて頂いてます。
初歩的な質問ですが、このプラグインのライセンスはどのようになっているのでしょうか？
creative commons を見る限りではライセンスを表記しなければならないように見られます。
サイトに実装しようと思っていますが、そのあたりわかれば助かります。
2010年07月02日 02:09