- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
“jqFancyTransitions” Slider
March 17, 2011
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: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; }