画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」

画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。
jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。
画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」サンプル

使用方法
FLOATING IMAGESからファイル一式をダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.floatingimages.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<script>
$(document).ready(function(){
imgObject = [
//画像1つ目
{
imgName: "1.jpg", 
imgText: "テキスト",
imgLink: "リンク"
},
//画像1つ目ここまで
{
imgName: "2.jpg",
imgText: "テキスト2",
imgLink: "リンク"
}, ];

$('#container').floatingimages({
imgObject: imgObject,
clondedImageBorder: '2px solid yellow', //拡大画像のボーダー
containerWidth: '300px',//コンテナの幅
containerHeigth: '285px',//コンテナの高さ
timer: 3000, //設定時間
smallImageWidth: 150, //小さい画像の幅
smallImageHeight: 95,//小さい画像の高さ
realImageWidth: '300px', //表示する画像幅
realImageHeight: '200px',//表示する画像高さ
columnsPerRow: 1 //小さい画像を表示する列の数
});
});
</script>

上記記述後、表示する場所を書きます。
<div id="container">
<div id="viewPortPhoto">
<div class="hint"></div>
</div>
</div>

上記で完成です。
画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」サンプル

sponsors

「画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」