jSwitch Image Gallery

jSwitch is a customizable jQuery image gallery engine wich allows create outstanding sliding image galleries. Look and feel was inspired by Blackberry PlayBook.

1. Download and Unzip

Use last stable version from our site

2. Place your HTML

At first you need to create list of all your images, in one container, and put it into your page BODY.

<div id="myGallery">
<ul>
  <li><img src="images/image1.jpg" alt="My photo 1" /></li>
  <li><img src="images/image2.jpg" alt="My photo 2" /></li>
  <li><img src="images/image3.jpg" alt="My photo 3" /></li>
  <li><img src="images/image4.jpg" alt="My photo 4" /></li>
  ...
</ul>
</div>

3. Include Library

Next you need to include jQuery and jSwitch library into your page. Place this code inside your HEAD section

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jswitch.js"></script>

4. Launch gallery

Now everything is ready for launching script. Simple put jSwitch call to your jQuery code section, for example:

$(document).ready(function(){
   $('#myGallery').jswitch();
});	

5. Finishing

To finish installing, put this CSS to your stylesheet file. Note, that "width" and "height" parameters are very important, so don't miss them.

#myGallery{
   width:960px;
   height:360px;
   overflow:hidden;		
   position:relative;	
   padding:0;
   margin:0;
   background:#000;
}