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 […]
  • Fancy Transitions Featured Gallery for WordPress (62)
    ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and […]
  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Google Buzz ER: Google Buzz for Wordpress (137)
    Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]

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

I’ve been using this plugin for a while on my various sites and ran into a minor issue. If I have a target specified in the href tag, it doesn’t actually do anything (I Inspected the element and only saw t on my original href tags.

Is there a fix for this?

Jennifer MacDonald on March 21, 2018 at 3:12 pm

wow amazing thanks for sharing this

suhail malik abbas on March 17, 2018 at 4:56 am

Thank you very much for your effort in providing these transitions. Is it possible to create a continuous transition of ‘wave’, ‘zipper’, ‘curtain’ effect without clicking the next arrow? Thanks in advance.

Malathi on January 23, 2018 at 7:37 am

Hi, is possible to use this plug-ing with instead of

miguel on July 8, 2017 at 1:27 pm

Hi, the slider works great on my website, however for some reason my drop down menu bar that I have also on the page has a problem with it. The sub menu always goes behind the slider. Do you know a possible fix for this?

Taylor on October 26, 2016 at 2:43 am

It works…awesome !

John on August 9, 2016 at 6:42 am

Nice work! Really helpful it

Bali-trans on July 19, 2016 at 9:36 pm

Hi Ivan,

I used your awesome slider on the website i am building now. I need to put a bigger text as a heading for the texts that is on the ALT tag of the image. I don’t know how to put them. I tried putting DIVs but it messes up the whole slider.

I really need your help. Thank you.

Eric Lumague on March 13, 2016 at 3:00 pm

Nice work! Really helpful it.

Diana Sharma on October 20, 2015 at 9:20 am

Is there a way to randomize the images at page reload?

Thomas on July 28, 2015 at 10:06 am

Good evening gentlemen, I am using the library their Fancytransitions. I need to mount a slider of images but that they were fit to page during a resize. The how I do it with FancyTransitions?

Walter Alves Chagas Jr on July 16, 2015 at 1:50 am

I am using your brilliant slide show at my homepage, and I want that the text at the bottom will not be the “content” of the related post, but the EXCERPT text.
How can I change this, and where? in the js? in the php timthumb?

Thanks for your assistance!

Bali Tours on June 28, 2015 at 12:05 pm

Hi, i just downloaded every info, but need to know something else, the body of the site is in center, and at header and footer the image goes outside, how is it possible to do, if u can email me that will be a favor, if provide me a link to understand, even thats better, Thanks.

Asif on December 19, 2014 at 9:56 pm

I am using jqFancyTransition for dynamic images.

There are multiple categories like cat1, cat2, cat3…..cat8 and 5 dynamic images in each category.

If only first category i.e. cat1 is set it is working fine with all images, but when I set it up for all categories only first image in all categories show transition effect not all image. kindly assist me with this issue. ( All the images are called dynamically)

Cypher on October 21, 2015 at 4:26 am

I want remove number right-bottom when i use navigation true how to do?

jayser on October 17, 2014 at 10:22 am

well done, but the footer title is only one. Can you make it moving with the images? In the demo, you have got 4 images but only one footer title, what should i do if i want to have 4 title running or changing with 4 images?
Thanks for reading.

Fans on October 6, 2014 at 2:44 am

Leave a Reply

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