Image gallery with fancy transitions effects

December 15th, 2009 | Projects, jQuery | 777 Comments

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.

Demo pagesee how it works Downloadtry it for yourself

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 ='http://workshop.rs'/></a>
 <img src='img2.jpg' alt='img2' />
 <a href ='http://workshop.rs/projects/jqbargraph'></a>
 <img src='img3.jpg' alt='img3' />
 <a href ='http://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

Comments [ 777 Comments ]

harpreet bhatia
March 24, 2010

really nice. But I’m a bit confused in setting title with the width of 813px.
Theo
March 24, 2010

Great image gallery plugin !

Thanks for sharing !
Jason
March 24, 2010

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?
Lazarevic Ivan
March 26, 2010

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 : )
mAs
March 26, 2010

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?
Nate
March 26, 2010

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.
Sabrina
March 26, 2010

It’s amazing!!!!!!
Viki
March 27, 2010

Can this script be used in commercial web-templates for sell and redistribute?
Is there any license or it’s totally free?
Joel Wallis
March 28, 2010

What? URLs are added below the images? Why you don’t make the jqFancyTransitions engine to check if the node type is image or an anchor. If is an anchor, get the href and the image children and make an anchor on the image?

I think that one anchor below the image is a children job (sorry for sincerity).
Jason
March 28, 2010

That’s really awesome you were able to add the anchors around the images. Thanks for that!

Is there an easy way to add a class to the active image on the navigation numbers?
Lazarevic Ivan
March 29, 2010

@mAs
Image will be repeated if is smaller then box size and there is no option to control that.

@Nate
It’s tested with jQuery 1.2.3, 1.3.2 and 1.4.2. versions.

@Viki
Sure, it’s completely free, just leave credits in source file.

@Joel Wallis
It’s creators’ freedom to choose method of feature implementation, but thanks for comment.

@Jason
Not for now, but I’ll probably implement that in near future.
Nigel
March 30, 2010

This looks great, but I cannot get it to work using the Wordpress plugin method. I have uploaded 3 images to posts and included the ftImage field entry then added the to my index.php on the Mystique theme.

What I get is the 3 images appearing at the top of my page one after another, so there seems to be a problem.

I noticed that on the Settings->Fancy Transitions page, the code displayed seems to be missing “php” at the start of the line:

<?include should be <?php include

My index.php is:
Hexfusion
March 30, 2010

I think a nice functionality would be to to have title have its own function instead of being grouped with navigation. My only complaint is that you need navigation for title other than that really nice work.
Patrice Robitaille
April 1, 2010

@mAs
It’s true, it will be great if we can have an option to control if image will be repeated or not.
Firefly
April 1, 2010

Is there a way to do a simple fade with this. Anything you can adjust in the .js to make that work. Awesome plugin by the way… love it!
Firefly
April 1, 2010

I figured it out…

Changed the “0″ value in the strips animations to the height variable like so:

$(’#ft-’+el.id+itemId).css({ height: opts[el.id].height, opacity: 0, ‘background-image’: ‘url(’+img[el.id][imgInc[el.id]]+’)’ });
$(’#ft-’+el.id+itemId).animate({ height: opts[el.id].height, opacity: 1 }, 1000);

It’s a crude fix, but my client last minute wanted it to fade and not use the canned transitions. Thanks for the plugin!
Lazarevic Ivan
April 4, 2010

@Nigel
I think that somebody posted the solution on Wordpress plugin post so please check there, this post is for jQuery plugin : )

@Hexfusion
That’s mistake since new version and I’ll fix it really soon. I noticed that but I was busy with Coin Slider.

@Firefly
It’s important that client is satisfied : ) And just add strips: 1 if you didn’t.
marc
April 4, 2010

I doesnt work for me. I see images above each other but nothing happens.:(
marc
April 4, 2010

ok, now it works, but i have to add ‘ftholder’ and ‘ft’ divs in the html. It didnt work with ’slideshowholder’. It will be great if you will add feature to display title without navigation. Anyway, thank you!
Lazarevic Ivan
April 6, 2010

marc, it seems that you talking about wordpress plugin, please check http://workshop.rs/2009/12/fancy-transitions-featured-gallery-for-wordpress/