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
It’s amazing!!!!!!
Just trying it out.
It would be nice if you let us know what version of jQuery it works with.
Also, the only effect that works for me is zipper.
I’m using effect: effect: ‘wave’, and nothing happens, but if I change it to zipper it works fine.
Hi, great plugIn!
But I have a question: i’m loooking for a control of the images in slideshow: position, repeat or not, in the case of the measure of the pic are various and different from the box.
Can you help me?
Since 1.7 version images can be urls. Check post for explanation and demo page to see how it works. I hope you’ll like it : )
This is so cool. It’s so unique.
You should really think about adding some kind of feature that allows you to assign links to the images. That’d be so cool.
Any plans for this?
Great image gallery plugin !
Thanks for sharing !
really nice. But I’m a bit confused in setting title with the width of 813px.
Hvala Ivane na ovom dodatku.
Nice… but how about the links on the image itself??? 😎
I have it so far that the images link to another site. But i can’t seem to fix it so that every single image is linkt to a different site..
Sorry guys, I was on vacation so I didn’t have a time to finish new version sooner.
Version 1.5 is here and the biggest upgrade is that jqFancyTransitions have navigation now. All you have to do is download jqFancyTransitions 1.5 and add
navigation: true
in call.Check demo page to see how it works.
If you want to change style of prev and next buttons use .ft-prev and .ft-next classes.
This is very clever. Great effects and plugin for jQuery. Cheers
wow..great plugin, thanks ivan
I was also wondering about a version with a nav. I can modify the code myself to add one, but if Ivan has one done it’s probably better.
Hi Ivan, great plugin.
Is there a way to have controls to navigate to the next image, like most of the traditional slider plugins?
Also when will we see a new version?
Well, a very good tool. But… How can i setup the legends CSS?
Great plugin and great effects, keep it up
Thanks Ivan,
What a great image slider! Seems to be working great, think I may try using this for an up and coming client website.
From looking at the other comments I was able to find the class for the image title is .ft-title, which is handy to know for styling this element.
Thanks Again.
hi
why this code no work for me!
please put the any sample
Hi Ivan,
This is truly a fantastic piece of work. I was just wondering if you have given any thought to dynamic load of pictures? How about loading only two images initially, so that they don’t block requests for other stuff and the webpage is rendered properly and fast. Then remaining images would be loaded during the slideshow. I have no idea if that can be easily incorporated in your plugin.
It’s look very nice. I will try to using this to development become a Featured Content for WordPress. Hope it will work
Hi
I use this code why not work!?
Untitled Document
$( document).ready(function(){
$(“#ft”).jqFancyTransitions();
});
Hi liked your plugin a lot. But I am not able to run it I see all my images positioned one below another. Any idea where I might be going wrong or if you could provide with a sample with html?