I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. That’s how was born jqFancyTransitions.

My main idea was to build some ’strip curtain’ effect and I start from that. But, while I was building this some other effects just pop up and I decided to adjust code and include some of those effects. Now, there are ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect. You can see how it works on examples and documentations page.
At the beggining you will need to download jQuery and jqFancyTransitions and include them on your page similar like this :
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.js" type="text/javascript"></script>
After that you will need some placeholder with some images for your slideshow. Text from alt tag will be used in title bar in your slideshow.
<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>
When you set everything time is to call jqFancyTransition and tell him where to do his job. You will probably need to set width and height for your gallery. That can be done with next code:
<script>
$(document).ready( function(){
$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
});
</script>
The code above is enough to made your fancy transitions gallery 400px wide and 300px high. If you want you can change transition effect with one of predefined values:
Of course, you can made custom effect with set of options that you can use to set speed, number of strips, direction, type of effect, etc. Bellow is list of all parameters and their values that you can use.
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 beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance 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
You can try to change those options and see what kind of effect you will get. Basically, you can change position and direction parameters and you will see variety of jqFancyTransitions effects. Also you can check examples and documentation page where you can see few examples with photos made by my friends Goran Jovanovic, Igor Srdanovic, Ivan Jekic and Marko Manojlovic who is also design layout for that page.
IMAGES AS URLS
Since 1.7 version images can be urls. All you have to do is to add url below images. Similar to this:
<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<a href ='http://workshop.rs'/></a>
<img src='img2.jpg' alt='img2' />
<a href ='http://workshop.rs/projects/jqbargraph'></a>
<img src='img3.jpg' alt='img3' />
<a href ='http://workshop.rs/projects/moobargraph'></a>
</div>
After that just add links: true in call.
Changelog
- 1.5
navigation
- 1.7
images can be urls
- 1.8
class for active navigation number ( ft-button-IDOFHOLDER-active )
description bar is not part of ‘navigation’ option
April 25, 2012
the whole thing works okay.just a quick question.how do i adjust the size
April 28, 2012
How to remove the numbers 1, 2, 3 from your beautifull slideshow ?
April 28, 2012
Hi i wanted to know how can i make the alt tag change the font color, size, etc and its position thanks!!!!!
May 1, 2012
Hi, Thanks for share this nice effect slideshow.
BUT, there is some problem with display it in new FF and Chrome. Firstly works fine, after 30-60s effects start cuting and hangs up ;/ its doenst looks nice… After refresh page all is ok, until 30-60s… And in loop the same problem. (All ver. of JS works the same)
May 1, 2012
Please reply about that soon as it possible. Thanks!
May 1, 2012
Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
peopleurl:484Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
484
$(’#example’).jqFancyTransitions({ position: ‘top’, direction: ‘random’ });
Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
485
486 $(’#effCurtainAlternate’).click( function(){
487 $(’#example’).jqFancyTransitions({ position: ‘curtain’, direction: ‘alternate’ });
488 $(’#positionDyn’).html(’curtain’);
May 2, 2012
Really nice work, love the transitions. Could you make some adjustments? Would like to use it for an responsive website.. So the images need to be flexible in width and height..
May 4, 2012
The images are showing fine, but the slideshow is not working. The images are just stacked one after the other.
May 4, 2012
Hi ,
i have problem with the size of the images .
there is option not change the size of my image and save on Proportion of the picture ?
May 4, 2012
@eyal, check the code, you will see where you have width and height. Change those to your specifications.
Please, I have a problem with the display in Internet Explorer. It’s aligned to the left. However, it displays well in Firefox and Chrome. Please help. Thanks.
May 6, 2012
hmmm… Ivan Lazarevic? Do You read our comments?
May 14, 2012
hi there! nice works… one Q…where i need to change, if want the script choose random effect?
thanks.
AJ.
May 16, 2012
Hi , I’ve a problem with resizing picture, when i change picture, it returns at its first width and height. How can i do it ?