Share on Google+Share on Google+

Image Slide Show using 'Space gallery' plug-in

In this tutorial , we will create a slide show using 'Space gallery' plug-in .

Image Slide Show using  'Space gallery' plug-in

In this tutorial , we will create a slide show using 'Space gallery' plug-in .In this example , two tabs are given. in one tab 'Space gallery' slide show is implemented , when you click on front image it fade out with zoom and next image in queue will be displayed. Second tab contains the details about this slide show.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="SpaceGallery/eye.js"></script>
<script type="text/javascript" src="SpaceGallery/spacegallery.js"></script>
<script type="text/javascript" src="SpaceGallery/layout.js"></script>
<div class="wrapper">
<ul class="navigationTabs">
<li><a href="#Show" rel="about">Show</a></li>
<li><a href="#Description" rel="Description">Description</a></li>
<div class="tabsContent">
<div class="tab">
<p>Click on the images bellow to see it in action.</p>
<div id="myGallery" class="spacegallery">
<img src="images/jquery1.jpeg" alt="" />
<img src="images/jquery2.jpeg" alt="" />
<img src="images/jquery3.jpeg" alt="" />
<img src="images/jquery4.jpeg" alt="" />
<img src="images/jquery5.jpeg" alt="" />
<div class="tab">
<p>This example contains 2 plugins i.e. spacegallery.js & layout.js and 3 CSS files
 i.e. layout.css , spacegallery.css & custom.css. This SlideShow shows images in
 space Gallery.</p>


When you click on front image, it will fade out with zoom.

Download  Source Code

Click here to see demo


Posted on: August 9, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null