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 […]
  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • jQuery Snow Falling plugin (114)
    I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That's why I enjoy watching how […]
  • 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 […]
  • 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 […]

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

Hey, How do i change the Image size of the slides (not the panel ) ? I cant seem to figure the codes and the panel slides only focus on the given panel size.

I am using 2480 X 3508 , 1200 X 1705 and 783 X 1200 image dimension, and I want the whole dimension of my image to be visible on 500 X 500 panel of the slides..

How do i do this?

( Great plugin btw )

Jhoeven on October 25, 2021 at 11:25 am

Have you ever worked on a responsive version of the slider? Any tweaks I can make to make it responsive? Thank you SOOOOO much in advance. –Adam Fischer

Adam Fischer on June 24, 2021 at 9:05 am

Great beat ! I would like to apprentice while yyou
mend yyour website, how could i subscribe for a blog web site?
The account aided me a acceptable deal. I had been tiny biit acquainted of this
your broadcast providedd bright clear concept

Here iss my site … Lazy

Lazy on January 26, 2021 at 11:05 am

Leave a Reply to Asif Cancel reply

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