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 ]

Lazarevic Ivan
February 16, 2010

Mike, I assume that your question is for Wordpress plugin http://workshop.rs/2009/12/fancy-transitions-featured-gallery-for-wordpress/ . Answer is yes, you can show posts from one category since 1.3.0. version.
Stand
February 24, 2010

Hi Ivan,

These items may infringe your copyright
http://themeforest.net/item/envidia-html-css/87942
http://codecanyon.net/item/sexy-slider/87148
Shahzad
February 26, 2010

very nice work

all effects are from tom to bottom or bottom to top
can we have some thing left to right or right to left?
Mirhet
February 28, 2010

Hi Ivan. I was wondering if this plugin only made to be used on Wordpress or it can be used on hand coded personal web sites, such as portfolio. Thank you in advance.
Lazarevic Ivan
February 28, 2010

@Shahzad
Not for now, maybe in jqFancyTransitions2 : )

@Mirhet
This is jQuery plugin so you can use it whenever you want. Just follow instructions from post.
pyrhav
February 28, 2010

Hi!
I just want to ask you to correct this part from your post which says ”
$(’#slideshowHolder’).jqfancytransitions({ width: 400, height: 300 });
” to ”
$(’#slideshowHolder’).jqFancyTransitions({ width: 400, height: 300 });
” because if one writes jqfancytransitions all in lower case just like you have in the directions, the plug-in won’t work. It’s not that important coz after you put some thought to it you figure out the mistake but I think it might be confusing for unexperienced users who follow your directions or copy/paste. 10x.

P.S. Great job, very beautiful and useful.
Mirhet
February 28, 2010

@Ivan. Hvala na informacijama . BTW, odlican i koristan plugin. Great job man!!!
Christo
February 28, 2010

Sweet stuff!
Is there anyway of styling the caption without using tags inside your alt text attribute? That would cause a fairly hefty html error!

Looking forward to being able to add links to the images!
Email me when that happens if possible!
Tendai Machaka
March 1, 2010

Love the work man… really great stuff.
Yogi
March 1, 2010

Awesome jQuery plugin, this is what I’ve been looking for!
Thanks for sharing this awesome plugin.
Ahmed
March 1, 2010

It’s really nice plugin, but also it breaks any lightbox or fancybox plugin. Do you have any idea about that?
tomek
March 1, 2010

To whose who want have images as links.

Try adding something like this to your jquery code:
$(”#slideshow”).click(function() {
window.location = ‘http://www.unicef.org/’;
});

Additionally, you may want change cursor style to create impression that an image is clickable:
#slideshow {cursor: pointer;}
Carlo
March 3, 2010

Hi,

I love the plugin. It was working for me earlier today but right now it’s not working anymore. How come? I check using firebug and it seems that background url is undefined. I only installed Contact Form 7 after this and made changes on the template and other pages.. nothing major. Can you help please?
Plugo
March 3, 2010

Thanks for this great stuff. Really cool and useful plugin.
Lazarevic Ivan
March 3, 2010

Thanks you all for your comments. I’m working on improvement of jqFancyTransitions so your suggestions are welcome.

@Stand
Thanks for informing me this is very interesting for me. I know that every good idea is followed up by copycats. I’m just glad that people like and use my work.
PS: Your post was marked as spam so I didn’t see it before.

@Carlo
I think that your question is related with Wordpress plugin which have separate post on this site so please check there.
Sabrina
March 4, 2010

@tomek but how do you do this to every photo a other link???
marko
March 4, 2010

Bravo drugari!!!!!!!!
David
March 5, 2010

hello, I have a question. Can I use this script in a commercial template for redistribution?
thx
Lazarevic Ivan
March 5, 2010

David, it’s not a problem you can use freely if you leave credits in .js file. Also, I’m very interested to see that template so maybe you can show us : )
David
March 5, 2010

Ok cool, when completed and approved, I will send you the link
thx!