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.
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 ='http://workshop.rs'/></a> <img src='img2.jpg' alt='img2' /> <a href ='http://workshop.rs/projects/jqbargraph'></a> <img src='img3.jpg' alt='img3' /> <a href ='http://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
April 7, 2010
Hi, thanks for the great plugin, I really like the look of it.
I got things working fine, but when I upload it to the web there seems to be a bit of an issue with the loading of images on first page load. The first image appears, but then before the next image comes in, the first image disappears for a split second.
Any ideas what could be causing the problem or if there is anything I could do to improve the loading?
You can take a look at what I have working here:
http://www.quaysiderestaurant.im
thanks in advance
)
April 7, 2010
I don’t see problem that you describe. But I notice that plugin doesn’t work in IE6 and IE7 on your site. That’s because you have , after strips: 25,. Just remove , and it will work.
April 8, 2010
Hi there!
You got 1 awesome plugin right here! really good job!
I am using this on my projects for sure.
As a matter of fact I am already playing around a bit with it to use it for my upcoming template.
I got it all working fine, except for 1 little thing:
I use (24bits) Png’s for the next and prev buttons.
For some reason they are not transparent (little black box around the buttons). Is there any way to display them properly… i mean that they are transparent?
You can find the slider here:
http://combinedpixels.com/themeforest/vertfolio/test/
Once again: awesome work!
April 8, 2010
Luuk, I saw that you set opacity: 1 for prev and next buttons and that cause you a problem in IE. Just remove that line completely and it should work. Nice job, btw.
April 8, 2010
Is there any way this could be used with the very popular NextGEN gallery plugin for Wordpress?
April 9, 2010
That worked, very nice.
I implemented it in my first template, which is not fully done, but showing you so you got an impression of how it is being used.
thought you would like to know
http://www.combinedpixels.com/themeforest/vertfolio/
April 9, 2010
Thanks for the reply Ivan.
I’ve removed the , from after strips:25 as you suggested. As for the slow loading between transitions, maybe it’s just down to a slow connection speed or something, I might try pre-loading the images within the slider, see if that helps.
Thanks again.
April 13, 2010
I didn’t use it yet (but will). It looks amazing!
Tnx for plugin!
April 14, 2010
Hi great plugin! I wondered though how can I get the title to show, like the one in your demonstration? I can’t seem to get it to show on mine.
Thanks
April 15, 2010
Antony, for now you should set navigation to true for title. That will be fixed soon.
April 18, 2010
Hey Ivan,
is it possible to prevent crash of the animation after multiple clicking the navigation buttons? When you click it before animation is finished after first click, it simply leaves some stripes in the image until you reload page.
Thx, Kobi
April 20, 2010
Hey,
Awesome Plugin
Just a question
Is it possible to stop the autoload between each images.
Thanks a lot
thibaut
April 20, 2010
Nice, Is it possible to have a fade effect?
April 21, 2010
nice, thanks for this fantastic plug-in ….
I want to set navigation, but want only to display Previous & Next button, and not image item numbers below pictures… how can I achieve that?
Moreover, how can I style navigation button for next & previous ?
April 21, 2010
@Kobi
I’ll check, thanks for reporting.
@Thibaut
No, there is no option for that, but you can try to set
delayto some large number.@Tommy
Not with this one. You can have fade effect with Coin Slider.
@Xcellence IT
Just set
#ft-buttons-YOURHOLDERID { display: none }for hiding images below slider..ft-prev and .ft-next are classes for navigation.
April 21, 2010
Thank you for great work, I would like to use the slideshow, but one thing I am missing is setting different class to active ft-button (number button in bottom). So the visitor knows which image is showing currently (and can switch to another one if he wants). How could I track which number is active and highlight it please?
April 21, 2010
Great work, thanks!
Just one quick question.
I’m having the same issue ‘Xcellence IT’ was having, trying to hide the image numbers below the slider.
I’m not exactly sure how or where I need to put in the line of code you provided in your reply about how to hide those.
My script right now looks like this:
$(’#slideshowHolder’).jqFancyTransitions({ navigation: true, width: 578, height: 300, position: ‘wave’ });
$(’#effWave’).click( function(){
$(’#ft-title-example, .ft-example’).remove();
$(’#example’).jqFancyTransitions({ effect: ‘wave’ });
$(’#effDyn’).html(’wave’);
});
Thanks again!
April 21, 2010
Derek, just put somewhere in your css file this line of code:
#ft-buttons-slideshowHolder { display: none }April 21, 2010
Perfect!
Thanks, Ivan!
April 21, 2010
I have a question about the numbers below the slider. Where can i change the width and the height? Because i want a background image there
Thnx