How to display multiple images aligned from back to front using spacegallery.js

Introducing how to display an image gallery using spacegallery.js. With this plugin, you can display multiple images arranged from the back to the front and move the images with a click.

Introduction

This article explains how to use spacegallery.js to display multiple images arranged from the back to the front. When a user clicks on an image, it moves forward, creating a simple effect.

What is spacegallery.js?

spacegallery.js is a jQuery plugin used to create a gallery displaying multiple images with a 3D effect. The images are arranged with depth, and they move dynamically with user interaction.

CSS to Display Multiple Images Arranged from the Back to the Front

Below is the basic CSS style to display images using spacegallery.js.
This is the CSS description for the gallery area (.spacegallery) with multiple images. Customize as needed.

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

JavaScript to Display Multiple Images Arranged from the Back to the Front Using spacegallery.js

The following JavaScript code is used to display an image gallery using spacegallery.js.
It loads the jquery.min.js, eye.js, utils.js, and spacegallery.js files. The images are displayed in a gallery using $(image area).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 to Display Multiple Images Arranged from the Back to the Front

The following HTML code is used to display an image gallery.
We have prepared 10 jpg images for the image gallery area id=”idDemo”. Please change as needed.

<div id="idWrap">
    <h1>Display 10 images arranged from the back to the front.<br />Click the images below to move them forward.</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-->

Demo Page to Display Multiple Images Arranged from the Back to the Front

You can see how this gallery works on the demo page.

Demo page displaying multiple images arranged from the back to the front

Source: Spacegallery – jQuery plugin

For more details on spacegallery.js and to download it, please access the following link.

Spacegallery – jQuery plugin

Conclusion

By using spacegallery.js, you can easily implement a 3D effect image gallery. There are many other gallery plugins available, so feel free to try them if you’re interested.

　
※Please use this at your own risk.
　Do not use the Google Analytics tag within the demo page tag.