KH-WEBLOG TOP > WEBメモ > JavaScript > jQuery LightBox Plugin

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箇所です。

  1. 「(‘#gallery a’).lightBox();」の部分を
    <script type="text/javascript">
       $(function() {
           $('area.gallery').lightBox();
       });
    </script>
    

    に変更。
    $(‘area.gallery’).lightBox();の部分はクラスでもidでもどっちでもOK。
    areaとid名(クラス名)の間にはスペースを空けない。

  2. 適用させたい部分のソースは
    <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=には画像のタイトルを記述

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事