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

jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示する方法をご紹介します。

Contents

複数画像を組合せてサイコロの様に回転表示するCSSの記述
jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示するJavaScriptの記述
複数画像を組合せてサイコロの様に回転表示するHTMLの記述
jquery.imagecube：複数画像をサイコロの様に回転表示するデモページ
ソース元：jQuery Image Cube

複数画像を組合せてサイコロの様に回転表示する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>

jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示する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>

複数画像を組合せてサイコロの様に回転表示する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-->