Image Slide Show using 'Space gallery' plug-in

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

 
 

Share on Google+Share on Google+

Image Slide Show using 'Space gallery' plug-in

Ads

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.

SpacegallerySlideShow.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Spacegallery</title>
<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>
</head>
<body>
<div class="wrapper">
<h1>Spacegallery</h1>
<ul class="navigationTabs">
<li><a href="#Show" rel="about">Show</a></li>
<li><a href="#Description" rel="Description">Description</a></li>
</ul>
<div class="tabsContent">
<div class="tab">
<h2>Show</h2>
<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>
</div>
<div class="tab">
<h2>Description</h2>
<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>
</div>
</div>
</body>
</html>

OUTPUT

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

Download  Source Code

Click here to see demo

Advertisements

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