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>

さらに以下のようなオプションがあり、柔軟な機能拡張ができます。


$('#custom a').bigPicture({
  'cls': 'my-theme', //オリジナルテーマ
  'boxEaseFn': 'easeInQuint', //easingプラグインが必要
  'boxEaseSpeed': 900,
  'enableInfo': true, //キャプション表示
  'infoPosition': 'top', //キャプション位置
  'infoEaseFn': 'easeOutBack',
  'infoEaseSpeed': 750
});

サンプル

Javascriptサンプルページ一覧

skuare.net