Image gallery with fancy transitions effects

December 15th, 2009
Projects, jQuery
274 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>
$('#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

Mary Vaughn
August 25, 2010

ok I would like to know what to name the div….I can’t get this to work..I copied the “view source” exactly and I followed the directions but still can’t get it to work. can you send me the info I would need to download…there is a lot of choices which is confusing for a beginner like me…thanks
Mary Vaughn
August 25, 2010

here is the site….but its not working ( these are temp images…) help please….
John
August 26, 2010

Oh, and I’m also having the same issue as Daniel from above.
When the “next” or “previous” buttons are pressed during a transition, the images end up combining.

You can sort of see it on the demo page with the top gallery. It gets kind of buggy, but it doesn’t stick in the way Daniel’s and mine do. It’s almost like it corrects itself?
Nick
August 26, 2010

Awesome work. Using as an alternative to Flash banners on mobile devices.

One note, the image links do not work on the iPhone/iPad.
Nick
August 26, 2010

I correct myself, added links:true. Links now working on iOS!
Jimmy
August 27, 2010

I was wondering is it possible and how to have the prev & next show on hover instead of being displayed all the time.
Fawaz
September 2, 2010

Good Work Ivan !!
your plugin proved very useful for me. but i experienced an issue. Well, i put images ['high Quality'] in the div. everything is working fine: navigation , links, rotation… but size of the displayed images is not right. like the size of my image is 1600 x 1200, as i kept the gallery size 1024 x 786. And images are partially shown in gallery div. as aspect ratio is set.
Got my point ???

Need you suggestions
ThanX once again
Lazarevic Ivan
September 2, 2010

@Nick
I didn’t have a chance to test on iPhone/iPad. I’m glad that works : )

@Fawaz
This plugin will not change size of your images. You can set only size of holder.
techmetro
September 2, 2010

hi ivan, i have a problem with your script, i want to put it into an iframe, and into this, i want to put my images as URLS, but the links doesnt open in another window, these open in the same iframe, i tried to activate the _blank target in the HTML, but it doesnt work, what can i do with this? can u help me?
Nil
September 2, 2010

Hi Ivan,
Nice Works!!
But when mouse is brought on the top of animation box, the animation effects stop, is this something by design?

Thanks