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