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
The animation and every thing is good
but, i am fresher to WD i am unable to understand where to use these content
give clear view to us
Does not work properly with jquery 1.7.2
cool stuffs. it’s great.
thank you very match ..
Only three words: Simple, beautiful, perfect
For everyone having issues using this plugin in IE9, to get it to work you simply have to use the jquery-1.4.2.min library as used in his demo site. Anything newer than this version will cause it to fail!
Problem Solved!!
Developer, please update your site to include this info or make it compatible with the newer version of jQuery 🙂
Thank you so much.very nice
So powerfull! So easy to build! Thank you. Cheers.
Pozdrav,
prvo sve pohvale, fantastican plugin 🙂
Imam dva pitanja. Posto mi title ne treba uklonio sam sljedeci kod titles[el.id][i]=$(item).attr(‘alt’)?$(item).attr(‘alt’):”; Eh sada naravno js ima gresaka buduci da hoce da uradi animate na nepostojecem elementu. Onda sam pobrisao citavu liniju koda gdje je bio if(titles[el.id]…. i tako sam eliminisao gresku. Da li je to sve sto sam trebao izbaciti ili ima jos nesto?
Drugo pitanje. Kako da napravim navigaciju, ne ono next-prev nego da imam brojeve tipa 1,2,3,4 kao sto je na vasem primjeru uradjeno?
Hvala unaprijed 🙂
Howard, it’s because there are two layers for images. One is when whole image is shown and you’ve set border-radius there. But second layer is made of lot of smaller divs who cover first layer.
Only suggestion that I have for now is to try to wrap slider holder with another div, set border-radius there and overflow: hidden.
i’ve been looking for a jQuery plugin for the family website I’m creating – this is exactly what i need. thank you very much!
love, love, love the transitions effects of this plug-in!!! I have a quick question: Why does the code of the plug-in change the border radius of the image holder div after the effect has completed but does not effect the border radius during the effect cycle?
Meaning when my page first loads the rounded corners are there. When the first effect (curtain) cycles and the rounded corners on the div are default squared. Then the effect cycles again and the rounded corners appear then disappear after the effect cycles. Hope that makes sense.
Again, thank you for the great work you’ve done and I hope you can shed some light on this for me.
Thank you!
Howard
Thank, its so useful.
Really superb!!!!!!!
Thanks a LOT to the developer and also webmaster.
I’m many sorry about complaint on RAM grabbing in previous post.
It seems that RAM outreaching was because of my code not because of this plugin.
Thank you again for such a good code sharing.
Jonathan,
Great thanks for sharing.
I try version jqFancyTransitions.1.8.js under IE 9 and i notice that this plugin by half a day can grab 1.5 GB of RAM.
Is this IE feature or not and if yes how this can be fixed?
Thanks
this slider can work in template my blog,,
thanks a lot of brother. . .
🙂
How do you stop the images from repeating. I’ve tried several things but none work.
Great plugin. Gona use it but found one bug. Images with a space in the name doesn’t work. It skips them an only rotate the one without space.
To answer your earlier question, I believe that in any workshop group, be it advanced, intermediate or beginning, you get writers with variety of background knowledge, skills, and experience. And some people are great at critiquing, even if they havent written much. Between learning from each other and going to the afternoon workshops (open to all participants), Im confident the conference will be beneficial. And Im thrilled to have you in my class!
Great article, I found it very useful. Perhaps you have heard of fixazipper.org? They have plenty of free tutorials on zipper repair, most incorporate videos as well. We have repaired a number of zippers on my childrens clothes with the help of their how-to’s, you should really check them out.
great plugin!thanx!i m new to all html, css js still after spending 3 hours and reading all the comments i finally got it! but how to make transitions in a random way? i read the comments but didnt find one please help!!!!
Can this be used freely?
Great ! Many thanks !