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 ]

peterelvis
April 25, 2012

the whole thing works okay.just a quick question.how do i adjust the size
Nick
April 28, 2012

How to remove the numbers 1, 2, 3 from your beautifull slideshow ?
jonathan
April 28, 2012

Hi i wanted to know how can i make the alt tag change the font color, size, etc and its position thanks!!!!!
Ifo
May 1, 2012

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)
Ifo
May 1, 2012

Please reply about that soon as it possible. Thanks!
Ron morales
May 1, 2012

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’);
Martin
May 2, 2012

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..
Essay
May 4, 2012

The images are showing fine, but the slideshow is not working. The images are just stacked one after the other.
eyal
May 4, 2012

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 ?
Essay
May 4, 2012

@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.
Ifo
May 6, 2012

hmmm… Ivan Lazarevic? Do You read our comments?
AJ
May 14, 2012

hi there! nice works… one Q…where i need to change, if want the script choose random effect?

thanks.

AJ.
Roro
May 16, 2012

Hi , I’ve a problem with resizing picture, when i change picture, it returns at its first width and height. How can i do it ?