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
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="http://www.w3.org/1999/xhtml" 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


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