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
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!
It’s specifically bad on Laptop’s running Windows and IE.
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?
Is there any way to make the number active? so it has a different color than the rest?
Thnx
Also add
$(‘#ft-buttons-‘+el.id).children().first().addClass(‘active’);
on line 263 to show slide 1 as selected from the get go.
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.
Derek, you probably have comma after last parameter in conislider call. Try to remove that and see if works in IE.
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
@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.
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 ?
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 š
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…
if the image is smaller than the box container it repeats it?? and if its larger?
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
@Sabrina
Class for numbers below slider is
ft-button-IDOFSLIDER
@rodrigo
Use
!important
for those properties.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!
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
Perfect!
Thanks, Ivan!
Derek, just put somewhere in your css file this line of code:
#ft-buttons-slideshowHolder { display: none }
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!
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?
@Kobi
I’ll check, thanks for reporting.
@Thibaut
No, there is no option for that, but you can try to set
delay
to 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.
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 ?
Nice, Is it possible to have a fade effect?
Hey,
Awesome Plugin
Just a question
Is it possible to stop the autoload between each images.
Thanks a lot
thibaut