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
in one word : wouahou !
Hey! Great plugin, thanks ๐ I have a question. Is there a way to create extra buttons, or links, somewhere on the page, with ability to control the gallery? You know, user clicks link with number of image, for example somwhere in the text in the next paragraph, and selected image is shown. I need the same behaviour as default navigation bar has… but created manually, with $(item).click()function.
Any idea? Is it possible?
Thanks in advance.
@Noah
Set
strips: 1
and you will get some less flashy effect : )Any way to make the images transition more traditionally, like fade in/out, or slide in from the left without the use of “strips”? Your slideshow is the only one I’ve found with next and forward buttons, as well as numbered slides, that allows for linked images. The strip effects are just a little too flashy for my taste. I’m not being negative, I think you did an incredible job on this, by the way!
nice one thanks its wrking
how do i activate the numbers ?
Wow. Very nice. Thanks you!
Hi!
I’ve tried to use the plugin but as it uses jquery, and I have another components using mootools… the result was not successful ๐
I have followed the “jQuery.noConflict()” instructions (http://docs.jquery.com/Using_jQuery_with_Other_Libraries) to use both, and changed the script of fancy transitions to use jQuery instead of $, but depending on the order of the .js including at the head, I have jquery features, or mootools features, but never both of them.
Does any one have had the same issue?
Or… any idea?
Lot of thanks!!
Hi is there anyway to start / stop the plugin .
Iยดam loading different divs on the samepage using this plugin. And I would like to pause it. And then start it again when the current div is shown, is that possible ?
/Bo
@david @Dave
That can be done with CSS. Check previous comments I think that you’ll find answers.
Hi
I want the ability to have a caption on my images but I dont want the navigation numbers how do I remove these, any ideas?
Thanks
Great effects
some one kindly help me out on the css on the navigation ie numbers below slider… i would like to have something like some boxes and not the numbers
thanks
You are absolutely right. I really should have been able to figure that out myself. It’s working great now. Thanks so much!
@Ivan
Oh, true. Sometimes I’m just blind. ^_^ Thanks for your quick answer!
@tamilly
Demo page use default behavior and positioning of navigation. Maybe some other CSS that you have on your page cause a problem. Also, you should try to use
!important
to properties you want to change.@mojito
It looks nice on your site, I really like it.
@Patrik
I think that you can find answer in previous comments. Basically, you just have to put background image in css for navigation buttons.
Really absolutely great so simple to use. One of the best slideshows and I have to say THANK YOU !
Hi Ivan,
Fantastic plugin! Thank you so much for your hard work. I was wondering if I can change the navigation buttons ‘Prev’ and ‘Next’ with images instead of text. Do you know if that is possible? Thanks in advance.
Patrik.
… ammm… it seems it’s just too many coding hours… I just fixed it ๐
thanks Ivan for Your work!
Hi, i must be doing sth wrong than…:
http://www.agencja-mojito.pl/test/ms/
please help.
thx ๐
great, thanks.
There is only one bad idea. Why was it necessary to have the navigation links a unique class names?
Example:
if (params.links) $(‘#’+ el.id). append (“ “);
Why not … <a href = '"+ links [el.id] [0] +"' class = 'ft' id = 'ft-"+ el.id + j +"'… ?
Hi Ivan,
Thank you so much for such a great plugin! It works quite well.
How does one get the navigation numbers to move down? And position them much like you are showing in the Photo slider example on your demo page at the top? I’ve tried using “#ft-buttons-IDOFSLIDER” and “a.ft-button-IDOFSLIDER” in my css and it has not worked. I’ve also tried changing the ‘padding-top’ and ‘padding’ values in the below code in your js file, which hasn’t worked either.
$(“”).insertAfter($(‘#’+el.id));$(‘#ft-buttons-‘+el.id).css({‘text-align’:’right’,’padding-top’:5,’width’:opts[el.id].width});
$(‘.ft-button-‘+el.id).css({‘padding’:5});
Thanks in advance!
Great Job !
Wonderfull effects
@Ivan,
Thanks for testing it. I’ll have to see if it’s an issue with my instance of VMWare/XPSP2/IE6 that’s causing the problems. At least I’ve got some hope… since I REALLY want to use this transition (a simple fade in/out seems boring, now!).
Thanks again.
@maria
In comment above yours hcker2000 explain how to achieve that. For now it’s the only way, but will be implemented in next release.
@John S.
I also have VMWare and jqFancyTransitions work fine on your site in IE6 (I’m using IE tester).