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
hmmm… Ivan Lazarevic? Do You read our comments? 😕
@eyal, check the code, you will see where you have width and height. Change those to your specifications.
Please, I have a problem with the display in Internet Explorer. It’s aligned to the left. However, it displays well in Firefox and Chrome. Please help. Thanks.
Hi ,
i have problem with the size of the images .
there is option not change the size of my image and save on Proportion of the picture ?
The images are showing fine, but the slideshow is not working. The images are just stacked one after the other.
Really nice work, love the transitions. Could you make some adjustments? Would like to use it for an responsive website.. So the images need to be flexible in width and height..
Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
peopleurl:484Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
484
$(‘#example’).jqFancyTransitions({ position: ‘top’, direction: ‘random’ });
Uncaught TypeError: Object # has no method ‘jqFancyTransitions’
485
486 $(‘#effCurtainAlternate’).click( function(){
487 $(‘#example’).jqFancyTransitions({ position: ‘curtain’, direction: ‘alternate’ });
488 $(‘#positionDyn’).html(‘curtain’);
Please reply about that soon as it possible. Thanks!
Hi, Thanks for share this nice effect slideshow.
BUT, there is some problem with display it in new FF and Chrome. Firstly works fine, after 30-60s effects start cuting and hangs up ;/ its doenst looks nice… After refresh page all is ok, until 30-60s… And in loop the same problem. (All ver. of JS works the same)
Hi i wanted to know how can i make the alt tag change the font color, size, etc and its position thanks!!!!!
How to remove the numbers 1, 2, 3 from your beautifull slideshow ?
the whole thing works okay.just a quick question.how do i adjust the size
We’re a bunch of volunteers and opening a new scheme in our community. Your web site offered us with useful info to work on. You’ve done a formidable activity and our entire neighborhood can be thankful to you.
You can definitely see your expertise in the paintings you write. The world hopes for more passionate writers like you who are not afraid to mention how they believe. Always follow your heart.
I have been using this Jquery and works for me. I only have one transition effect though. Was not able to have multiple effects. Here is the page I added the slideshow: http://www.ferris.edu/HTMLS/colleges/technolo/homepage.htm
Didn’t work atall ….plz help i hv done all the stuffs correctly i guess…..:(
I’m trying to add this but for some reason the direction and position parameters don’t work. I have downloaded and am using both the jQuery 1.4.2 library as well as your 1.8 jqFancyTransitions library and it doesn’t work. If I add the position property it doesn’t work at all. And no matter what I set direction to, it always animates from the bottom only. All of the other parameters seem to be working fine. Any idea?
This code is fine,but the web link doesnt open in new page, instead it opens in the same page. anchor tag , target attribute is not working ? can you suggest something for that?
not working……
ma code…
$(document).ready( function(){
$(‘#slideshowHolder’).jqFancyTransitions({ width: 400, height: 300 });
});
</script
wanted to ask, if i can use that code for an official website without having any problems with the law? do i have to mention owner anywhere or sth, or is this already done in the plugin?
btw great gallery!
greetings