Carpe Diem

備忘録。https://github.com/jun06t

画像を3D回転で表示させる

画像を3D回転させられるjQueryプラグイン「Professor Cloud」の使用方法です。 まずは公式ページで体験してみてください。 cloudcarousel.png Cloud Carousel - Professor Cloud 別のプラグインを使えば、デモのようにマウスホイールでグルグル回すこともできます。 ◆必要な .js ファイルjquery-1.x.x.min.jscloud-carousel.1.0.x.jsjquery-mousewheel.js //マウスホイールでグルグル回す場合 各ファイルをダウンロードしたら適当なフォルダに置いてください。 サンプルソース
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.x.js"></script>
 
<script>
$(document).ready(function(){						   
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text"),
			mouseWheel: true,
			bringToFront: true,
			reflHeight: 50,  
		}
	);
});
 
</script>
 
</head>
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            <!-- You can place links around these images -->
            <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>
        
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
        
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>
主に編集するのはピンク色の部分です。.js ファイルの指定と、scriptタグのところで動作を指定し、divタグのところに画像を入れていきます。 詳しいオプションは公式サイトのインストラクションに載っています。 上記のサンプルでは、公式サイトの状態に ・マウスホイールでグルグル回せる ・画像クリックしたら正面に持ってくる ・リフレクション(下部に反射してる)効果 を実装しています。 ◆注意点 ハマった点をいくつか。 ・.js ファイルをしているするとき、jQueryの位置は最初に cloud carouselはjQueryプラグインなので、当然ながらjQueryを先にロードしないと足りないメソッドだらけでエラーになります。 ・最新のjQuery ファイルだと、リフレクションが使えない このリフレクションにはcanvas要素を使用しているのですが、最新のjQueryだと(現在v1.8.1)canvasの扱いを少しいじっているみたいです。サンプルソースのような1.4.2だと問題なく動作しました。 ソース: Cloud Carousel - Professor Cloud 3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」