lightBoxと同じ効果をjQueryで実現するjQuery lightBox プラグインを紹介

よく利用されるジャバスクリプトのLightBoxとjQuery。

ページ作成の際に両方いれていたら、どっちか動かなくなって使えなくなったとかいう事があるかもしれません。

そんな時にはLightBoxは画像拡大だけですので、いろいろ使えるjQueryに統一したいと思う事もありますよね。

実はjQueryにもLightBoxと同じ動作をさせるプラグインがあります。

それがこちらjQuery lightBox pluginです。

jQuery lightBox plugin（ダウンロードページへ）

jQueryでlightBoxと同様の動きをしていますので、いろいろjQueryの動作を利用したいという人はlightBoxの機能もjQueryへ統一できて便利だとおもいます。

利用方法

ダウンロードすると「jquery.js」「jquery.lightbox-0.5.js」というファイルとcss「jquery.lightbox-0.5.css」というファイルがありますのでそちらをヘッダー内にリンクさせ、$('#gallery a')の記述を追加します
例）
--------------------

<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のソースのほうはlightbox化させたい画像をid="gallery"でかこってあげます。
例）
--------------------
<divid="gallery"> <ul>
<li><a href="image/image1.jpg" title="画像1のタイトル"></a></li> <li><a href="image/image2.jpg" title="画像2のタイトル"><img src="image/thum_image02.jpg" width="" alt="" /></a></li>
</ul> </div>
--------------------

基本的には以上の実装で利用できるはずです。
ご利用したいかたは本家のサイトで詳しく確認してみてください

    Tweet