spacegallery：奥から前へ整列した複数画像を表示させるJs

奥から前へ整列した複数画像を表示します。
画像をクリックすると整列した画像が前へ移動します。

1．CSSの記述

<style type="text/css">
<!--
.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>

2．読込むJsとJavaScriptの記述

<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>

3．HTMLの記述例

<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-->

奥から前へ整列した複数画像を表示するデモページ

ソース元：Spacegallery – jQuery plugin

ギャラリー系の複数画像の見せ方って色々ありますね。
その他またありましたらご紹介します。