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.
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
I was wondering ,if i can have a random transitions?
I was implementing this on a company site and when I was browser testing, I noticed something a bit odd. If a person gets “click happy” and clicks the navigation button several times before the slide is complete, remnants of the previous image shows up. I have found this does it with multiple browsers.
On a whole, I really do like this slider. Very slick. 🙂
Hi,
I want to add bullets to represent each image. How can I do that?
I’m using link in images and giving target=”_blank” but still link opening in the same window? Any idea how to open links in new window?
de que hablas?
Is it possible to put two div which will animate independently in the same page?
How do I control the appearance of the navigation or ‘alt=’ text?
I was able to modify the appearance of the alt tag by editing the jqFancyTransitions.1.9.js file. In this version, it starts in line 66. I just added some CSS based on how I wanted it to look.
Is there a way not to have smaller images not tile and just sit in the middle
my images are appearing all one above each other, not sliding…and i think i connected all correctly…
А как сделать у слайдера border-radius: 3px 3px 3px 3px;
crashed for IE 10, Chrome, Firefox and Safari
When you set it this way
$(document).ready(function () {
$(‘#slideshowHolder’).jqFancyTransitions({ navigation: true, effect: ‘curtain’, strips: 1 });
});
Clicking the navigation buttons do funny things
Any solution?
Everyone with the width/height = 100% problem. Before the $(‘#slideshowHolder’).jqFancyTransitions line add:
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight
}
then instead of 100% use size[‘width’]and size[‘height’]. Like
width: size[‘width’], // width of panel
height: size[‘height’], // height of panel
I’ve downloaded jqFancyTransitions version 1.8 and I am noticing while setting it up that there is a bug. After the animations start for a bit and you go to use the numbered links to go back and forth, the images melt in to one another.
Other than this it is a lovely script, but perhaps as some have asked a CSS file would be a nice inclusion for those new to using such scripts.
Image gallery with fancy transitions effects « Workshop
Hey, love the script.. wondering if you could make a small alteration/addon? you added in the ability to make the images URL’s but target= is not processing.. could you add this in.. would like to have links going to other pages in a new tab..
No problems with include. but how I can head the time to start the animation?
How i can put two DIFERENT slider in same page with it?
Thanks