«jqFancyTransitions» Slider

A slider with a variety of unique transition effects. For full specifications visit the official website: http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects

JavaScript

We should include jQuery framework and jqFancyTransiotions.1.8.js by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jqFancyTransiotions.1.8.js"></script>

Initialization script we place in the

section. You will probably need to set width and height for your gallery. That can be done with the next code:

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

You can also define some additional parameters:

effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay between strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appearance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links

HTML

Below you can see general HTML script representation:

     <img src='img1.jpg' alt='img1' />
     <img src='img2.jpg' alt='img2' />
 <img src='img3.jpg' alt='img3' />

If you want to set links for the image, then the code will look this way

 <img src='img1.jpg' alt='img1' />
  
     <img src='img2.jpg' alt='img2' />
      
     <img src='img3.jpg' alt='img3' />
      

CSS

#slideshowHolder {
  width:px;
  height:px;
  overflow:hidden;
}