spacegallery.jsを使って奥から前へ整列した複数画像を表示させる方法｜DAD UNION

spacegallery.jsを使って、奥から前へ整列した複数画像を表示させる方法をご紹介します。
奥から前へ整列した複数画像（ギャラリー）を表示します。画像をクリックすると整列した画像が前へ移動します。

Contents

奥から前へ整列した複数画像を表示させるCSSの記述
spacegallery.jsを使って、奥から前へ整列した複数画像を表示させるJavaScriptの記述
奥から前へ整列した複数画像を表示させるHTMLの記述
奥から前へ整列した複数画像を表示するデモページ
ソース元：Spacegallery – jQuery plugin

奥から前へ整列した複数画像を表示させるCSSの記述

※複数画像（ギャラリー）エリア.spacegalleryのCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.spacegallery {
	position: relative;
	overflow: hidden;
	width:600px;
	height:500px;
}
.spacegallery img {
	position: absolute;
	left: 50%;
}
.spacegallery a {
	position: absolute;
	z-index: 1000;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(images/blank.gif);
}
-->
</style>

spacegallery.jsを使って、奥から前へ整列した複数画像を表示させるJavaScriptの記述

※jquery.min.js、eye.js、utils.js、spacegallery.jsファイルを読み込みます。$(複数画像エリア).spacegallery()で、複数画像（ギャラリー）表示を行います。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#idDemo").spacegallery();
});
</script>

奥から前へ整列した複数画像を表示させるHTMLの記述

※複数画像（ギャラリー）エリアid=”idDemo”に10枚のjpg画像を用意しました。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>10枚の画像を奥から前に整列して表示します。<br />以下の画像をクリックすると奥から前に移動します。</h1>

    <div id="idDemo" class="spacegallery">
		<img src="images/i1.jpg" alt="" />
		<img src="images/i2.jpg" alt="" />
		<img src="images/i3.jpg" alt="" />
		<img src="images/i4.jpg" alt="" />
		<img src="images/i5.jpg" alt="" />
		<img src="images/i6.jpg" alt="" />
		<img src="images/i7.jpg" alt="" />
		<img src="images/i8.jpg" alt="" />
		<img src="images/i9.jpg" alt="" />
		<img src="images/i10.jpg" alt="" />
	</div><!--/idDemo-->
    
</div><!--/idWrap-->