画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」

画像ギャラリーに多く使われるLightBoxは、開かれたとたんに閉じてしまうユーザーが結構いるようです。
今回紹介するjQueryプラグインの(mb)MaskedGalleryは画像ギャラリーの上に透過PNGでマスクをつけられ、印象的な画像の見せ方が可能です。

使用方法

(mb)MaskedGalleryからファイル一式をダウロードします。


<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="mbMaskedGallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#id名").mbMaskGallery({
		type:"normal", //randomもあります
		galleryMask:"photo.png", //マスクする画像
		galleryColor:"black",　//マスクの背景色
		galleryLoader:"loader.gif",　//ローディング画像
		loaderOpacity:.3, //ローダーの透明度
		loader:true, //ローダーを表示するかどうか（false）
		fadeTime: 200, //フェードの時間
	});
});
</script>

上記を記述したら対応するidで画像をくくれば完成です。


<div id="demo" class="galleryCont" >
	<img src="画像パス">
	<img src="画像パス" url="リンク先">
	～画像分～
</div>

サンプル

Javascriptサンプルページ一覧

skuare.net