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

懲りずにLightBox風画像ギャラリー
jQueryのプラグインを使用したjQuery BigPictureです。
jQueryベースのLightBox風ギャラリー「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」サンプル

sponsors

「jQueryベースのLightBox風ギャラリー「jQuery BigPicture」」をシェアする

記事作成:
記事URL:

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