Cloud Carousel - 画像を回転＆拡大表示できるJQuery プラグイン

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>
 

<script>
$(document).ready(function(){
    // 
    $("#carousel1").CloudCarousel(
        {
            xPos: 128,
            yPos: 32,
            buttonLeft: $("#left-but"),  //左ボタン
            buttonRight: $("#right-but"),//右ボタン
            altBox: $("#alt-text"),
            titleBox: $("#title-text")
        }
    );
});


</script>

        <!-- コンテナー定義 -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
            <!-- すべての画像 -->
            <!-- 画像のリンクの追加も可能 -->
            <img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
        
        <!-- ボタン -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
        
        <!-- 画像のalt、title表示する場所 -->
        <p id="title-text"></p>
        <p id="alt-text"></p>