jQuery LightBox Plugin
シェア
ツイート
最終更新日：
jQuery LightBox PluginはLiteBoxをjQueryで動かせるプラグインで、
jQueryをよく使う方にはいいと思います。
≫サンプル
目次
jQuery lightBox pluginのダウンロード
まず
≫http://leandrovieira.com/projects/jquery/lightbox/
こちらのサイトから
jQuery lightBox plugin(zipファイル)をダウンロードします。
ダウンロードしたzipファイルの中の
「js」「css」「images」フォルダを
アップロードすればOK
jQuery lightBox pluginの使い方
使い方は
headタグ内に
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<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>
</ul>
</div>
と記述すればOK
※「id=”gallery”」の部分と「(‘#gallery a’).lightBox();」の部分は同じ名前ならなんでもOK。「class」でも指定できます。
jQuery lightBox pluginの設定
細かく設定を変えたい場合は
jquery.lightbox-0.5.js内の
settings = jQuery.extend({
// Configuration related to overlay
overlayBgColor: '#000',// 背景色
overlayOpacity: 0.8,//透明度
// Configuration related to images
imageLoading: 'images/lightbox-ico-loading.gif',// ローディング画像
imageBtnPrev: 'images/lightbox-btn-prev.gif', // 「前へ」画像
imageBtnNext: 'images/lightbox-btn-next.gif', //「次へ」画像
imageBtnClose: 'images/lightbox-btn-close.gif',//「閉じる」画像
imageBlank:'images/lightbox-blank.gif', //？？画像
containerBorderSize: 10, // LightBox本体の外枠の大きさ
containerResizeSpeed: 400,//リサイズ時のスピード。指定はミリ秒で設定。
// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
txtImage:'Image', //左下に表示されるテキスト部分
txtOf: 'of',// 左下に表示されるテキスト部分
// Configuration related to keyboard navigation
keyToClose:'c',// 「閉じる」のキーボードのキー割り当て
keyToPrev:'p',//「前へ」のキーボードのキー割り当て
keyToNext:'n',// 「次へ」のキーボードのキー割り当て
imageArray:[],
activeImage: 0
},settings);
部分をいじればOK
追記：クリッカブルマップでjQuery lightBox pluginを使う
≫サンプル
クリッカブルマップを使用するときも
jQuery lightBox pluginを使って使用できたのでその方法をメモ
クリッカブルマップを使用するときの変更点は以下の2箇所です。
- 「(‘#gallery a’).lightBox();」の部分を
<script type="text/javascript"> $(function() { $('area.gallery').lightBox(); }); </script>に変更。
※$(‘area.gallery’).lightBox();の部分はクラスでもidでもどっちでもＯＫ。
※areaとid名(クラス名)の間にはスペースを空けない。 - 適用させたい部分のソースは
<ul> <li><img src="photos/thumb_image1.jpg" alt="" width="72" height="72" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="17,14,62,59" href="photos/image1.jpg" alt="画像1タイトル" title="画像1タイトル" class="gal1" /> </map></li> <li><img src="photos/thumb_image2.jpg" alt="" width="72" height="72" usemap="#Map2" /> <map name="Map2" id="Map2"><area shape="circle" coords="37,38,18" href="photos/image2.jpg" alt="画像2タイトル" title="画像2タイトル" class="gal1" /> </map></li> </ul>
こんな感じです。
※areaのtitle=には画像のタイトルを記述
JavaScriptのおすすめ参考書
ポチップ
ポチップ
