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
Hi there!
Im trying to implement the gallery, but doesn´t works…the images the images are placed one above the other!!
seems that the javascript is not being called for some reason
here´s the link :S
http://www.tierradeotros.com/noticias.php
Thank you so much for share your work…kisses 🙂
Hello, I’ve added functionality to random images every time page is reloaded to version 1.8. If you are interested send me email and I can send it to you (I haven’t found your email here).
Thanks for perfect plugin!
Can you put video or flash in a slide and delay the first slide significantly?
@Daniel
Thanks for reporting, I’ll see what I can do.
@Carol
I looks OK to me. How can I reproduce that behavior ?
Please ,
sometimes the effect does not work correctly. Site: http://migre.me/ZHKT How to solve?
Please respond
Thank you very much
Regards
Hi Ivan,
The script is amazing, thank you. It works great and it is easy to install but I discovered a problem. When I click on any of the links (prev, next, slide number) while the script is making a transition it seems that some index is left with a wrong value and from then on all the images are displayed combined with the next or previous image. The behavior is easy to reproduce. Look at front page of this site http://gjala.com
If you wait for a transition to start and then click on a link most of the times you will see the images combined.
I tried to look through the script but it proved to be a little hard to follow (for me). Can you please fix this problem or give me some indications on how to fix it?
Other than this small problem the script is great. Thank you for sharing it.
thank you so much!!
Betsy, just remove comma (,) after strips: 30
Love the script… I have installed it in the header here: http://www.aediconstruction.com/index_jquery.html
It works great in safari and firefox (win and mac) but doesn’t work in IE 6 or 7… am I missing something? thanks!
@eudemon
You can achieve that if you remove lines 120-136 from jqFancyTransitions.1.8.js
@zerosky, @Adriana
There is no option for random order.
@dmg
I agree : )
It would be great if this plugin could load images on the fly using AJAX instead of loading for example 20 images immediately.
I’m using these effect in http://www.radius.com.mx/audiotech, is there any chance to present the images in random order?
Thanks a lot!
hi, thank you for your great work
but i have one problem
i want it to continue slideshow even when an arrow moves onto the picture, how do i do that
also is there an option to resize the image when it’s above certain pixies?
than you
Please disregard above message.
It works, did not realize that i should remove effect: ‘curtain’
Thanks!
Thank you for the response Ivan.
I have tried that option setting, and it seems this makes each individual blind turn left,
however the direction that the image appears always alternates.
I have tried various combinations, maybe i am missing something…?
Is there anyway to have the curtain effect make the image appear from left to right direction only?
Thanks again for any help!
Wonderful plugin, but I have the same problem as strangebrew above – nothing I change under ‘position’ or ‘direction’ has any effect whatsoever on the animation?
Love this 🙂 awesome work!
I want the pictures to random effect!
how to get our pictures to be fitted with panels?
I love these effects. I use jquery cycle a lot and have gotten used to it. Is there anyway these effects could be ported to the jquery cycle plugin?
@zerosky
Did you try to set direction to random ?
@strangebrew
Try with:
position: 'curtain',
direction: 'left'
Hi,
I cant seem to get the curtain effect going in only one direction.
It always seems to alternate direction.
Tried changing various options, but nothing seemed to make the curtain effect go from left to right only (or viceversa).
Any advice would be great, thank you.
That is great!Now only one effect。How to make random effect?I want random effects。Can you tell me?
another question, can i add thumbails for the navigation?