Home Tutorial Jquery Image Slide Show using 'Space gallery' plug-in

 
 

Share on Google+Share on Google+
Image Slide Show using 'Space gallery' plug-in
Posted on: August 9, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for Image Slide Show using 'Space gallery' plug-in:


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.

Posted on: August 9, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com