“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.

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:

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

CSS

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