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
Odlicno!
Thank you so much, it was so nice to have this slideshow running on my machine. Wonderful!
Great! Thank you a lot !
THANK YOUUUUUU !!!!!!
The code works great. My only issue is that the sizing values (width and height) won’t change. I need to set the height and width to certain values to match the sizes of my images and no matter what I set the default values to for the width and the height, it doesn’t change in the browser.
Any thoughts?
great job with the code and presentation of usage. Very easy to use and looks great to use. Great work!
I really like the routine but I can’t figure out how to move it to where I want to locate it on the screen. It always wants to appear in the upper left hand corner. Any help is appreciated. Thank you.
It is cool.
But how can i add a title inside the image area(at the bottom area.) ?
At the bottom area i want to write my own css code.
very nice… it works fine and its easy to style.
One complain, it took me a while to figure that to work on IE the plugin call has to be on the body.
It wont work if it’s on the head!
Maybe u should mention it somewhere in the documentation.
please u shld indicate whr d /*
$(document).ready( function(){
$(‘#slideshowHolder’).jqfancyTransition({ width: 999, height: 400 });
});
*/ should be called up
as change the font?
Hi, Thanks for share this great scripts….
i need a help,
how i can set the staring image of the slides
(ie: 1.jpg, 2.jpg 3.jpg) when the page loads, the slide start from the image 2.jpg and works normal way..
please help me to find a the solution
hii admin………..
i can say about this is:
simply WOW!!!!!!!
nice blog and nice article .. thanks for sharing
Hi , I’ve a problem with resizing picture, when i change picture, it returns at its first width and height. How can i do it ?
hi there! nice works… one Q…where i need to change, if want the script choose random effect?
thanks.
AJ.