画像を様々なエフェクトでフローティングさせるJavaScript「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>

サンプル