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
Very nice plugin I love it.
good
Hi,
Every thing works great.But how to make the links to open in a new page.Though I made the target=”_blank” it still opens in the same window.Is there any work around for this.
Thanks
I really appreciate it !
I juste want to find how is possible to have a picture for the prev and next buttons, can you help me ?
Thanks
Great plugin! Is there a random option, so that it’ll cycle through more than 1 effect?
Hi! This is a really nice work, but I’ve a issue.
If I click on the numbers(fast)in order to change the slide, the animation looks a bit weird, Is any form to avoid this?
I was thinking in put in some place a “wait until animation ends” but I really haven’t idea how can I doing it. Thanks š
Pretty good rotator, but how do you setup the css for the alt atribute?
got it working beautifully! made simple changes to js/jq 1.8 file and css. thanks!
how to open a new window, I add target=”_blank”, but not work, thanks!
nice work, but you must your description update because we downloading jqFancyTransitions.1.8.min.js actually but at your description you wrote still js/jqFancyTransitions.js
please give script code, cannot get this to work. “slideshowHolder” is actually “ftHolder? yes???? need instruct on where to put this. thanx.
why is it not working for android mobiles like htc and samsung galaxy Y ??
Nice work, this is exactly what I was looking for! Thank you!
I really appreciate it, This is exactly what I was looking for….This plugin of yours saved me a lot of time, Thanks
i want to know if i can use the fancy transitions in 2 different holders with different option each one
Very good plugin, thank you very much mate š
Love the smoothness of the effects.
Any way to add a callback when an image transition is done?