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
I just want to ask if its possible to put fade and slide effect on the slider?
Thanks! Over all, this plugin is great!
Hi there, I found your website by the use of Google even as looking for a similar matter, your website got here up, it appears great. I have bookmarked to my favourites|added to my bookmarks.
Do you have a video on how to do it?
I really try it and didn’t work for me, consider that I’m using 3DCart platform.
Regards
Hi,
Firstly, I like thank you for your guide and codes. They are very helpful and the results are really stunning.
Now, would you or anyone here know how to change the navigation “prev” and “next” into navigation images? Please let me know. Thank you.
Is there any way to resize the image along with the div panel. for example if the image width is 500px by 200px, and I set the panel widht as 240px by 180px I am only seeing part of the image. I even tried resizing the image to 240px by 180px programatically, but still I am only seeing the part of the image.
Hello
How can I make Rounded-border for images on IMAGE GALLERY WITH FANCY TRANSITIONS EFFECTS ??
Thank You
I loved the way you have made it simple. So am going to make it a part of my development. Thanks!
Please give me the simple css file for it. If it has features like on mouse over the prev and next bar appears, instead of previous and next of it has symbol, it will be great.
你把DEMO ,JS 什么的一起打包,然后提供下载不行吗,非要单独搞个JS 放谷歌上,不知道兼容性好不好。。
to open links in a new window, use a simple jquery script and give the element with class=”ft-slideshowHolder” – the attribute :”target” with the value :”_blank”
Great Great Fancy Slideshow, I was looking for something like this long time ago, is easy and gorgeous.
Thanks.
I see lots of questions but no answers. Has this software been abandoned?
Is there a way to make Fancy Transitions so that it can adapt to images of different sizes?
Many thanks…
Todd
看不懂。。。
very nice effect!!.. I’ll try this awesome stuff on my web for sure.. :).
Good work.
Hello it is an excellent effect but I cannot locate the navigation number class I´ve tried with .ft-button-ft-active, I want to change it to an image circle but it doesn´t change, can you help me?