Image gallery with fancy transitions effects

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.

jqFancyTransitions2

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

  • jqBarGraph – jQuery graph plugin (157)
    jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]
  • Gradienter: Add gradient to elements (24)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • mooBarGraph: AJAX graph for MooTools (18)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]

1,034 comments on "Image gallery with fancy transitions effects"

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?

Shahzad on February 26, 2010 at 3:38 pm

Hi Ivan,

These items may infringe your copyright šŸ™
http://themeforest.net/item/envidia-html-css/87942
http://codecanyon.net/item/sexy-slider/87148

Stand on February 24, 2010 at 5:59 am

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.

Lazarevic Ivan on February 16, 2010 at 1:38 pm

Hi Ivan.

Is there any form to show only the posts of one category?

Mike on February 15, 2010 at 2:47 am

@Sabrina @Madi
I have plan to add features that you asking for, but I’m not sure when that will be.

Lazarevic Ivan on February 11, 2010 at 10:13 am

How can I upgrade your script? I need buttons like a prev picture, next picture, play slide show, stop slid show.

Madi on February 10, 2010 at 10:14 pm

Hello,

Very nice!!!!!

I realy want to get a link on the image it self.. is it hard to fix that????

Thnx!!!!

Sabrina on February 8, 2010 at 5:09 am

.ft-title is class for title, so you can use CSS on that class. I’m not sure what’s happen with Lightbox 2 and this plugin, you should check if there is jQuery conflict maybe.

Lazarevic Ivan on January 25, 2010 at 3:51 pm

Ivan, great…

Thank you so much for your help… it is now working on my site (http://www.kokpinlab.com/). I have one question though, the title text is now aligned to the left, is there any method that I can aligned to the right instead or to format its text size.. etc using CSS?

I am also using Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/) for my photo gallery. I realized that the Fancy Transition javascript breaks the Lightbox 2 code, meaning that the lightbox effect will be disabled on my photo gallery. Do you have any suggestions on this?

Thank you so much.

PhotoLab on January 24, 2010 at 9:10 pm

@Andrea
This plugin doesn’t have classic fading effect, there is a lot of other plugins with fading effects only.

@marc stephan
That part of code looks OK. You should check do you have right path to jqFancyTransitions.js file.

@PhotoLab
jqFancyTransitions.js is little different for WordPress plugin. It doesn’t take title from img alt tag, it takes it
from span bellow img. So it should looks like this:

<img src="http://www.kokpinlab.com/wp-content/uploads/2009/08/KokPinLab_Header_Design_Airport.jpg" />
<span>New Test Image 1 Testing where is the text</span>

instead:

<img alt="New Test Image 1 Testing where is the text" src="http://www.kokpinlab.com/wp-content/uploads/2009/08/KokPinLab_Header_Design_Airport.jpg" />

Lazarevic Ivan on January 24, 2010 at 12:49 pm

Hi Ivan,

Thanks for the great script. I like it very much.

I have tried to implement it on my WordPress blog, however, I do not know why the title does not show up. Here’s my implementation, can you pls give me some suggestion on how to fix the title issue?

Thank you.

PhotoLab on January 24, 2010 at 10:12 am

hi Ivan,

firt I would say “compliment” ! nice and useful script

90% due to my experience … I can’t make your script workable. I know could be my stupid mistake but … please gimme the solution for this snag.

here below the code

$(document).ready(function() {
$(ā€#slidegalā€).jqFancyTransitions({
position: ā€˜curtainā€™,
direction: ā€˜alternateā€™
});
});

The result is simply the 3 jpg shown one beside the other.

Thank u in advance

Russell

marc stephan on January 24, 2010 at 7:51 am

Very nice script, congratulations.
Is there a way to have a fading effect?

Thank you

Andrea on January 23, 2010 at 2:11 pm

Hi Ivan,

My code isnt working. I tried on 3 different themes including classic wordpress theme.

Kami on January 19, 2010 at 5:06 am

Hi Ivan,

I am sort of testing this script. So far no luck.

I get all the images one under another like the ‘div’ is to big LOL. I included the link. Please have a look šŸ˜€

The other scripts are included (otherwise other animations wont work). CSS also included and working.

George on January 18, 2010 at 6:05 pm

Hello Ivan,

It works perfectly. Once again, thanks for sharing and happy new year !

Patrice

patrice fleurant on January 12, 2010 at 5:01 am

Don’t worry about your English, it’s important that we understand each other : )

You can put script after the div with images like:


$(ā€#galerieā€).jqFancyTransitions({
position: ā€˜curtainā€™,
direction: ā€˜alternateā€™
});

or if you want to put script in head you can do that with next code:


$(document).ready(function() {
$(ā€#galerieā€).jqFancyTransitions({
position: ā€˜curtainā€™,
direction: ā€˜alternateā€™
});
});

Errors that you sent me are not related with my plugin.
You should check http://www.google.com/search?q=nsYahooDomBuilder.js

Lazarevic Ivan on January 11, 2010 at 5:47 pm

Hello,
First, i have to tell that I am french and my english is not perfect !
I would like to use your image-gallery but a few questions still remain.

Where must I put the JS in my HTML ?
In the HEAD or in the BODY after the DIV including the IMG’s ?

How to set the arguments for jqFancyTransitions ?

Part of my HTML:

$(“#galerie”).jqFancyTransitions({
position: ‘curtain’,
direction: ‘alternate’
effect: ”
});

I have tried with FF 3.0 and IE6, IE7.

On FF, I have got this message :
AvertissementĀ : reference to undefined property this.skipAttrs[attr.name]
Fichier SourceĀ : file:///C:/Users/patrice/AppData/Roaming/Mozilla/Firefox/Profiles/wfoxyzsw.default/extensions/%7B635abd67-4fe9-1b23-4f01-e679fa7484c1%7D/components/nsYahooDomBuilder.js
LigneĀ : 420

Thank you for helping me and congratulations for your work.

Patrice

patrice fleurant on January 11, 2010 at 12:07 pm

I have plan to made images as links so you can expect that in some future release. For now you can add link in title bar only.

Lazarevic Ivan on January 5, 2010 at 11:28 pm

Very nice plugin! One of the best sliders. How can you make the rotating images active hyperlinks?
Thanks!

ta on January 3, 2010 at 9:22 pm

@Hjuster
Send me your files with code on email so I can check.

Lazarevic Ivan on December 29, 2009 at 9:21 am

nice work ivan!

wol on December 23, 2009 at 8:09 am

@jn
1. This plugin is tested in IE6. Can you tell me more about problems that you have in IE6 ?
2. There is no option to do animation only once. Maybe in some future release : )
3. It will be nice to have circles effect, but it can’t be done with this plugin.
Thanks for comment.

Lazarevic Ivan on December 18, 2009 at 2:06 pm

Very nice plugin, however

1. non-usable in ie6 (sometimes it’s needed)
2. how to do animation only once (f.e. to only animate logo once)
3. is there possibility to do version with circles? šŸ™‚

jn on December 18, 2009 at 9:43 am

Leave a Reply

Your email address will not be published. Required fields are marked *