jquery.imagecube.jsを使って複数画像を組合せてサイコロの様に回転表示する方法｜DAD UNION

この記事では、jquery.imagecube.jsを使って複数の画像をサイコロのように回転させて表示する方法を詳しく解説します。ぜひ試してみてください。

まず、jQueryとjquery.imagecube.jsを使って画像をサイコロのように回転させるデモを作成するために必要なファイルやコードを準備します。今回のサンプルでは、6枚の画像を使用してサイコロの各面に表示させます。

Contents

必要なファイルの準備
CSSの設定
HTMLの設定
JavaScriptの設定
jquery.imagecube：複数画像をサイコロの様に回転表示するデモページ
ソース元：jQuery Image Cube
まとめ

必要なファイルの準備

以下のファイルを用意してください。

jquery.min.js（jQueryの最小化版）
jquery.imagecube.js（サイコロ回転表示を実現するプラグイン）
jquery.easing.1.3.js（アニメーションのイージングをサポートするプラグイン）

　
これらのファイルはインターネットからダウンロードすることができます。

CSSの設定

まずは、回転表示エリア（#idCube）と画像のCSSを設定します。以下のコードを使用して、必要に応じて変更してください。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
#idCube{ 
  width:300px;
  height:300px;
  margin:0 auto;
}
a img{
	border: none;
}
#linksCube img{
	width: 100%;
	height: 100%;
}
-->
</style>

HTMLの設定

次に、HTMLファイルを設定します。サイコロの様に回転表示するエリア（id=”idCube”）と画像を6枚用意しました。以下のコードを参考にしてください。

<div id="idWrap">
	<h1>複数の1枚画像をサイコロの様に回転して表示します</h1>

    <div id="idCube">
    <img src="images/i1.jpg" width="300" alt="" />
    <img src="images/i2.jpg" width="300" alt="" />
    <img src="images/i3.jpg" width="300" alt="" />
    <img src="images/i4.jpg" width="300" alt="" />
    <img src="images/i5.jpg" width="300" alt="" />
    <img src="images/i6.jpg" width="300" alt="" />
    </div><!--/idCube-->


</div><!--/idWrap-->

JavaScriptの設定

最後に、JavaScriptを設定します。
jquery.min.js、jquery.imagecube.js、jquery.easing.1.3.jsファイルを読み込みます。$(“サイコロの様に回転表示エリア”).imagecube({オプション})でサイコロの様に回転表示エリアに対して回転方向オプション等を設定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.imagecube.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#idCube").imagecube({randomSelection:['up', 'down', 'left', 'right']});
});
</script>