skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryベースのLightBox風ギャラリー「jQuery BigPicture」

｜ ｜ ｜ ｜ ｜ ｜ ｜

懲りずにLightBox風画像ギャラリー
jQueryのプラグインを使用したjQuery BigPictureです。

使用方法
jQuery BigPictureからファイル一式をダウロード。
またjQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" type="text/css" href="bigPicture.css" /> //core.cssとskin.cssを混ぜています
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bigPicture.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id名 a').bigPicture();
});
</script>

あとは上記で指定したidでくくれば完成です。
<div id="id名">
<a href="拡大用画像パス" title="キャプション"><img src="サムネイル画像パス" /></a>
</div>

さらに以下のようなオプションがあり、柔軟な機能拡張ができます。
$('#id名custom a').bigPicture({
'cls': 'my-theme', //オリジナルテーマ
'boxEaseFn': 'easeInQuint', //easingプラグインが必要
'boxEaseSpeed': 900,
'enableInfo': true, //キャプション表示

'infoPosition': 'top', //キャプション位置
'infoEaseFn': 'easeOutBack',
'infoEaseSpeed': 750
});

jQueryベースのLightBox風ギャラリー「jQuery BigPicture」サンプル

記事作成：2009年05月12日

前の記事：入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」
次の記事：JavaScriptライブラリjQueryで、ちらみせエフェクト