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 guys , im having some trouble width fancy transitions, the plugin works excelent, but this consume many resources of my micro.
Why happend that.
Greetings
Fede argentina
see the code at the top of the page with the explanation
my other entry was strange…. so here it is again..
@ obp
do you have this at the bottom… before your body close tag?
$(‘#slideshowHolder’).jqFancyTransitions({ width: 400, height: 300 });
and….. your HTML is a mess…… do not use css in your body
that should be in a .css file of at least in your head
good luck
@ Obp
do you have this at the bottom (before
$(‘#slideshowHolder’).jqFancyTransitions({ width: 400, height: 300 });
and….. your HTML is a mess…… do not use css in your
that should be in a .css file of at least in your
good luck..
Hello,
I am not that great with JS, so maybe someone could give me a hand here. For some reason my 3 images that I am trying to get rotating with effects are just stack on top of each other, see here:
http://scalaluxury.com/m/
Secondly, I can not get any kind of effect going….:-(
Thanks in advance!
Hello,
Can we link to a specific image within the slideshow? I’m building a thumbnail gallery, and would like to go to a specific slide onClick. Thanks!
i don’t get this:
i tried this:
———————————————
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.
————————————–
i have put it in jqFancyTransitions.1.7.js
on the lines that have been said..
But it doesn’t work….
Help!! 🙁
Hi,
When is the next release????
I figured out! its the ‘navigation’ thing, cool!! But now I am trying to style the numbers 1,2,3,4 that I get on the bottom of the slideshow, that correspond the the number of images. I can’t find a DIV ID for those anywhere on the documentation page, I found ids for prev and next text, but how do you stylize those numbers at the bottom?!
This is awesome!! The only problem I have:
How to make captions appear? I have alt tags for images, but captions don’t show up in slideshow, should I add some extra code somewhere?
Thanks!!
Thanks for your hard work. One point, in your explanation above:
“Of course, you can made custom effect […]”
you are missing a comma at the bottom of the list (probably related to version 1.7 allowing the “links” option):
navigation: false // prev and next navigation buttons
links: false // show images as links
Should be
navigation: false, // prev and next navigation buttons
links: false // show images as links
Cheers,
Zev
Hi,
is it possible to count and stop the transitions.
I want exactly 4 transitions and after the effect, the last image should constantly appear.
Greeting from Germany.
Really nice effect.
Is there an easy way to implement custom prev/next buttons?
Thanks
very good thanks
Nevermind! It was because when a tab is hidden in jQuery tabs the “tab” was set to display: none. This screws the calculations needed for the animations.
I changed it to set it to .position: absolute and left: -10000px when hiding. Now it works great!
The animations stop working properly when used inside jQueryUI tabs. I switch to a different tab, and then back to the tab with the slideshow, the pictures still change, but with no animations (they just change). How can I “stop” the slideshow, or “restart” it?
Thanks for the script, its very beautiful. I ‘ve used it for hotelkalamies.gr .
Oh, the message was cut… I mean: one of the target should be _self, and the others _blank…
OMG Lazarevic Ivan!
New problems: of of the banners should open in the same window, not _blank… and the others in _blank… how can I control this? Is there any way to make the script read the target inside the a href of each images?
Hi Lazarevic Ivan!
U’re a genious! It worked now in _blank window! Now I understoo what u mean IDOFHOLDER lol!
IDOFHOLDER is the name of div where I put the images! OMG! It’s not actually IDOFHOLDER, I used slideshowHolder as it is in the script. So, in the end of the html, after tag, I put the code u told:
$(‘.ft-slideshowHolder’).attr(‘target’,’blank’);
It’s fine now! Thanks! The site is not Online yet… does it has license to use?
@Ivan
Well, I guess I am a total noob, I didn’t even see the “older comments” section. I will look through and let you know if I don’t find my answer. Thanks very much.
@heather
I think that you can find answer in older comments.
@Kokada
Replace IDOFHOLDER with id of div where you put images. For further help provide me url with example.
I looked the code, and there’s no “ft-IDOFHOLDER” in anywhere, nor even inside the js script, or in the html code… are u sure it works?
Hi! How do u mean “after jqFancyTransitions call”? I tried to put it in many places but it didn’t work….
Hi, I’m a beginner but not a total noob with js.
I would like to change the color of the black semi-transparent bar that appear with the title(alt tag) of the image. Any help?
Thanks,
Heather