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
Kokada, add this code after jqFancyTransitions call:
$('.ft-IDOFHOLDER').attr('target','blank');
Hi, how can I set target=”_blank” when u click in the images??? I really need this urgent please!!!
Liz, you should put
$(’#fancy’).jqFancyTransitions({ width: 600, height: 200, effect: ‘wave’,});
immediately after you close #fancy div.This effect takes a long time to begin the first transition – 20 or more seconds before the effect comes in. Is there any way to stop this?
It took me a long time to implement this, I followed the instructions carefully but the script was not running – I am not experienced with javascript and I couldn’t work it out. I got it working, when I compared it to how the coinslider is loaded, and tried adding a document ready container.
$(document).ready(function() {
$(‘#fancy’).jqFancyTransitions({
width: 600,
height: 200,
effect: ‘wave’,
});
});
This should be in the notes!
Is there any way for it to stop cropping pictures but change the picture size?
Right now, I have some really large pictures in a small slideshow. It is only showing the upper-left of the picture and cropping the rest. I wish there was a way to shrink the picture to the size of the slideshow, then crop.
Forgot to mention…I removed most of the javascript CSS attributes. So your style sheet will need to do a little more work. (z-indexes) will be the big thing for navigations.
download this version with fade and blend effects @ http://www.websitemio.com/templates/helpers/jquery/jquery.fancytransitions.js
use same way as before just added 2 effects: fade, blend
fade: Transitions between images with nothing in between transitions
blend: Blends from 1 image to the next
Hey, I added a couple features that I think people would like…doesnt add much code. Just add 2 simple features: fade and blend options.
$.transition:
var next = (imgInc[el.id]+1 >= img[el.id].length) ? 0 : imgInc[el.id]+1;
if(params.effect == ‘fade’){
//perform fade transition
$(‘#’+el.id).animate({opacity:0},1000); //these will que up in JQuery
$(‘#’+el.id).animate({opacity:1},1000); //these will que up in JQuery
setTimeout( function(){$(‘#’+el.id).css({ ‘background-image’: ‘url(‘+img[el.id][next]+’)’});},1000);
}else if(params.effect == ‘blend’){
//access the first bar and set its properties
$(‘#ft-‘+el.id+’1’).css({ ‘background-image’: ‘url(‘+img[el.id][imgInc[el.id]]+’)’,’height’:opts[el.id].height+’px’,’opacity’:’1′});
$(‘#’+el.id).css({ ‘background-image’: ‘url(‘+img[el.id][next]+’)’}); //set to new image
//animate images for transition for bar
$(‘#ft-‘+el.id+’1’).animate({opacity:0},1000);
//switch the background image to new image..not necessary, but follows semantics if using wrapper bg image
setTimeout( function(){
$(‘#’+el.id).css({ ‘background-image’: ‘url(‘+img[el.id][next]+’)’}); //set to new image
$(‘#ft-‘+el.id+’1’).css({‘height’:0+’px’,’opacity’:0}); //reset bar
},2000);
//default bars code
}else{
stripInt[el.id] = setInterval(function() { $.strips(order[el.id][inc[el.id]], el) },opts[el.id].stripDelay);
$(‘#’+el.id).css({ ‘background-image’: ‘url(‘+img[el.id][imgInc[el.id]]+’)’ });
}
You have to add this in the $.init:
if(params.effect == ‘blend’ || params.effect == ‘fade’){opts[el.id].strips = 1; }
Hi! How can I set target=”_blank” when clicking on the images?
good wp jq plugin 🙂
making it work wid following strcture will make life simpler
“”
tx
I saw that you wanted to use Coin Slider first, so you have code from both examples. It seems that your coinslider.js is changed because its broken and you have js error. Remove that file from your page because you don’t need coinslider.js if you want to use jqFancyTransitions. Then, just follow steps described in post and you’ll have slider on your page : )
i need help getting this jquery to work on my site here: http://denise.sc101.info/testing/testing.php… my jquery is fine because i have another jquery script working on that page… any help would be appreciated! great script by the way!! 😀
hi… i’m having some trouble with this… i’m trying to get it to do what it says, but my pictures don’t move! i have a jquery menu beaneath it, and its working fine. Is there anyway you can help? Here is the URL: http://denise.sc101.info/testing/testing.php Thanks!!
great effect thanks 🙂
hi! lovely script. i’m having some issue implementing it though. here’s the test site i’m working on: http://denise.sc101.info/testing/test.php… i have no idea what to do… any suggestions? thanks in advance!
is there any way to give the size of the panel the size of the current image? or is there a way that the image doesn’t repeat?
Now, you need all images of the exact same size. I want to use this plugin for images with a variable width and a given height.
it doesn’t work… i don’t get it
i’ve got it ….
hi,
in with one?
jqFancyTransitions.1.7.min
or
jqFancyTransitions.1.7
because i olso whant the navigation and the links..
Amazing!!! Thanks for share!
You should put that in jqfancytransitions.js
nobody seems to be answering Sabrina’s question
which is the same thing i want to ask.
Where to drop code snippets to get active states working.
Mr Ivan give us a hand here!
@hcker2000
Where do I put this code? in which file?
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.
$(’#ft-buttons-’+el.id).children().first().addClass(’active’);
on line 263 to show slide 1 as selected from the get go.
thnx