jQuery Smplbox

Sample

ライトボックス風の表示をするプラグインです。
これを元にカスタマイズすることを前提にしているため、機能やデザインはシンプルです。

<h3>通常</h3>
<a href="image01.jpg" class="thumbnail smplbox" title="菊"><img src="image01.jpg" width="1024" height="768" alt=""></a>

<h3>スタイル名変更・ヘッダー非表示</h3>
<a href="image02.jpg" class="thumbnail smplbox2" title="砂漠"><img src="image02.jpg" width="1024" height="768" alt=""></a>

<h3>表示位置固定</h3>
<a href="image03.jpg" class="thumbnail smplbox3" title="アジサイ"><img src="image03.jpg" width="1024" height="768" alt=""></a>

<h3>グループ化</h3>
<a href="image01.jpg" class="thumbnail smplbox4 group" title="菊"><img src="image01.jpg" width="1024" height="768" alt=""></a>
<a href="image02.jpg" class="thumbnail smplbox4 group" title="砂漠"><img src="image02.jpg" width="1024" height="768" alt=""></a>
<a href="image03.jpg" class="thumbnail smplbox4 group" title="アジサイ"><img src="image03.jpg" width="1024" height="768" alt=""></a>
<a href="image04.jpg" class="thumbnail smplbox4 group" title="クラゲ"><img src="image04.jpg" width="1024" height="768" alt=""></a>
<link rel="stylesheet" href="jquery.smplbox.css">
<script src="jquery.smplbox.js"></script>
<script>
$(function(){
	// 通常
	$('.smplbox').smplbox();

	// スタイル名変更・ヘッダー非表示
	$('.smplbox2').smplbox({
		film_id: 'smplboxOverlap2',
		header: false
	});

	// 表示位置固定
	$('.smplbox3').smplbox({
		position: 'fixed',
	});

	// グループ化
	$('.smplbox4').smplbox({
		group: true,
		group_class: 'group',
		position: 'fixed'
	});

});
</script>

jQuery Smplbox ../index

File

Sample

Option