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

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

使用方法
(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「(mb)MaskedGallery」サンプル

sponsors

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

記事作成:
記事URL:

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