JavaScript

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

  /

spacegallery.jsを使った画像ギャラリーの表示方法を紹介します。このプラグインを使うことで、奥から前に向かって整列した複数の画像を表示し、クリックで画像を移動させることができます。

Contents

はじめに

spacegallery.jsを活用し、奥から前へ整列した複数画像を表示する方法について解説します。ユーザーが画像をクリックすると、画像が前に移動するエフェクトを簡単に実現できます。

spacegallery.jsとは

spacegallery.jsは、jQueryプラグインの一つで、複数の画像を3D効果で表示するギャラリーを作成するためのものです。画像が奥行き感を持って整列し、ユーザーの操作でダイナミックに動きます。

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

以下は、spacegallery.jsを使用して画像を表示するための基本的な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の記述

以下のJavaScriptコードは、spacegallery.jsを使って画像ギャラリーを表示するためのものです。
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の記述

以下の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-->

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

デモページでは、実際にこのギャラリーがどのように機能するかを確認できます。

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

ソース元：Spacegallery – jQuery plugin

spacegallery.jsの詳細情報やダウンロードは以下のリンクからアクセスできます。

Spacegallery – jQuery plugin

まとめ

spacegallery.jsを使えば、シンプルに3D効果のある画像ギャラリーを実装できます。その他のギャラリー系のプラグインも多数存在するので、興味があればぜひお試しください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

spacegallery 画像スライダー ギャラリー
関連記事