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 21, 2010
Hi, great plugin here!!
Congratulations for the excellente work and for share with us.
I have just one question for you.
How can I change the tittle background color and tittle text color?
I use “.ft-title” in my css to change padding and the size of the background, but it doens’t work to change the background-color…
Thank you in advanced!
April 22, 2010
@Sabrina
Class for numbers below slider is
ft-button-IDOFSLIDER@rodrigo
Use
!importantfor those properties.April 23, 2010
Hellow,
It works, but is there a way to make a number active?
because now i don’t see by with photo i am..
this is my css code
a.ft-button-ft {
width:15px;
height:15px;
font-size:0px;
border:1px solid #b8d983;
color:#B8C4CF;
text-indent:-1000px;
margin-left:5px;
}
so now i have 4 squares with a border…
and by active a want something else…
thnx
April 23, 2010
if the image is smaller than the box container it repeats it?? and if its larger?
April 23, 2010
It works, thanks a lot Ivan!
btw, for those who wants to use only the Tittle without the Navigation, just set #ft-buttons-mural, .ft-prev, .ft-next {display: none;} on css…
April 24, 2010
if you put .stop() before your animates calls it will make it more solid, especially for fast clickers.
Another thing, too much CSS properties are hardcoded in the JS source code, it makes it a PITA to style ..
Beside those two issues, this is an awesome plugin, thank you
April 26, 2010
Koristio sam skrpitu verzije 1.0 i sad sam skinuo 1.7 i jos uvek imam isti problem !
Naime kad god se skripta ucita CPU usage skoci na 100% !!!
Da li si se sretao sa slicnim problemom ?
April 26, 2010
@h3
Thanks for suggestion, I’ll implement that.
The main idea was to build something that doesn’t require additional CSS file.
@Goran
Regarding CPO usage, you should decrease number of strips.
April 26, 2010
Has anyone else had issues with this in Internet Explorer? It works great in every other browser but in IE all the images in the slideshow are being displayed straight down the page, so there are 15 images, one after another straight down the page. And the ‘Prev’ and ‘Next’ buttons are missing as well.
Anyone have any idea about how to correct that?
Thanks
April 26, 2010
Derek, you probably have comma after last parameter in conislider call. Try to remove that and see if works in IE.
April 26, 2010
buttons = $(’#ft-buttons-’+el.id).children();
buttons.each(function(index){
if(index == imgInc[el.id]){
$(this).attr(’class’,’.ft-button-’+el.id+’ active’);
}
else{
$(this).attr(’class’,’.ft-button-’+el.id);
}
});
Drop that code in at line 176 if you want to have active states for the numbered slide buttons. It simply gives the active button an “active” class.
April 26, 2010
Also add
$(’#ft-buttons-’+el.id).children().first().addClass(’active’);
on line 263 to show slide 1 as selected from the get go.
April 28, 2010
Is there any way to make the number active? so it has a different color than the rest?
Thnx
April 29, 2010
Is anyone else seeing the animation become really jerky/clunky in Internet Explorer?
In all other browsers it’s fine, but in IE even the demo page on this site doesn’t look as good as it should.
Ideas?
April 29, 2010
It’s specifically bad on Laptop’s running Windows and IE.
April 29, 2010
Hi. I’ve gotten jqFancyTransition implemented on a new site I’m designing, but it doesn’t seem to work (at all) in IE6 (I’m running it under Windows XP SP2 in VMWare Fusion, if that matters).
You can see the demo here (although it may disappear if I run out of time): http://tinyurl.com/33nfo8k
Any thoughts?
Thanks!
April 29, 2010
@maria
In comment above yours hcker2000 explain how to achieve that. For now it’s the only way, but will be implemented in next release.
@John S.
I also have VMWare and jqFancyTransitions work fine on your site in IE6 (I’m using IE tester).
April 29, 2010
@Ivan,
Thanks for testing it. I’ll have to see if it’s an issue with my instance of VMWare/XPSP2/IE6 that’s causing the problems. At least I’ve got some hope… since I REALLY want to use this transition (a simple fade in/out seems boring, now!).
Thanks again.
April 30, 2010
Great Job !
Wonderfull effects
April 30, 2010
Hi Ivan,
Thank you so much for such a great plugin! It works quite well.
How does one get the navigation numbers to move down? And position them much like you are showing in the Photo slider example on your demo page at the top? I’ve tried using “#ft-buttons-IDOFSLIDER” and “a.ft-button-IDOFSLIDER” in my css and it has not worked. I’ve also tried changing the ‘padding-top’ and ‘padding’ values in the below code in your js file, which hasn’t worked either.
$(”").insertAfter($(’#'+el.id));$(’#ft-buttons-’+el.id).css({’text-align’:'right’,'padding-top’:5,’width’:opts[el.id].width});
$(’.ft-button-’+el.id).css({’padding’:5});
Thanks in advance!