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:
- wave
- zipper
- curtain
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 ='https://workshop.rs'/></a> <img src='img2.jpg' alt='img2' /> <a href ='https://workshop.rs/projects/jqbargraph'></a> <img src='img3.jpg' alt='img3' /> <a href ='https://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
WoW! This is amazing and beautifull slider, i like using it.. but i have little problem, I can’t use all effects at same time, then i write in effects one of them ( curtain, zipper, wave) it works very well, but then i write all of them like this( effect: ‘curtain’, ‘zipper’, ‘wave’,) it does only effect ‘zipper’…
Can you help me?
You’s senceraly!
Excellent tutorial, thank you very much
are we free to use this library in our own web pages ?
very good
Hey, my design is fluid… Is there a way i can use the property width:100%; on the images? This is getting uncomfortable… sorry 🙂
After page post-back jqfancytransition not working
is there any tweak that will allow the use of TITLE property of IMG tag instead of the ALT property for text displaying?
That way we could still sue the ALT for SEO
@Charlotte
Please check source code on demo page.
This is not a comment – it is a question.
It works fine… with the exception of when I click on an image… it does not go to the designated link.
I have changed
navigation: true, // prev and next navigation buttons
links: true // show images as links
on both /js/main.js and js/jqFancyTransitions.1.8.min/js
Not sure what I am doing wrong…. Any help would be appreciated.
I have not published the site…. I can’t get the links to work.
If you don’t have the answers, can you point me into the right direction? Thanks so much for your help!
This is not a comment….
I have a question – where do I send my questions?
amazing! i wonder why i have found this only now:) super-easy to use, yet powerful enough to play with:) huge thanx for this one.
btw. i wonder is there any way to add more classic transition options? like slide, fade etc? i’m very bad at java and jquery, but love to adapt these to php+mysql 🙂
nice one.. i like this.. did you use code highlighter for code to highlight..
I have a website with a liquid design, as I can adactar because it has a fixed size in pixles?
how to import slide in my blog…?
Hello,
how to changhe the color of the fonts?
I want to changhe the “prev” button etc. and the numbers at the menu from white to black, because i have an white homepage.
Great Code and Function! Very Good!
Thank u!
how you make the title to display on the images in the down can u plz know me…….
Hi,
Great plugins,
Is there any way to change the effect in run-time?I have found that questions multiple times in the discussion but doesn’t find the answer.I want to use these effect one-after-one like Que.
please help,
thanks
Hi,
Very cool and easy to use plug in. It is almost perfect for what I want to do.
A few questions:
1) Is there a way to reduce the delay before the animation starts? E.g. in the demo it does say wait a few seconds and it is actually close to 6 seconds. I’d like to reduce this to 3 seconds.
2)Is it OK to not specify an effect? This seems to be the only way I can have left to right direction animation to come up consistently. Here is my instantiation:
$(‘#banner’).jqFancyTransitions({ width : 955, height : 200, strips : 60, delay: 3400, stripDelay: 80, direction: ‘left’, position: ‘top’ });
3)Animation seems to speed up after 10 minutes. I’m using ‘left top’ example in the demo. Is it possible to prevent this speed up?
Thank you for your help. Happy New Year!