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
Can i combine this effects with another jquery gallery? i want this effects at Galleriffic script gallery.
Thanks You.
a) hide prev/next with CSS ( display: none )
b) try with absolute position and z-index
Hi there, i love your scripts thank you very much for developing them.
I’m trying to do some customizations but i cant find where to do it, here’s what i wanna do:
a) activate slide numbers (navigation) but not the Prev Next buttons.
b) move the nav higher to be on the bottom right of the image (hovering over the image) but when i change the top margin it moves under the slide =(
any advice?
Thanks again!
Mario
@Drew
Can you give me url where I can see your problem ?
@Kokada
Basically it’s a pretty simple, but it require my additional work on this plugin and I don’t have a time for that. It will be included in some of the future releases.
Hi, can u please urgent explain if it’s possible to set different targets when clicking on each image? For example: _blank, and _self ? Thanks!
I installed the script as instructed, applyed it, and for whatever reason the bg image was never applyed to the called container – any clues on what’s going on there. In firebug, i could see all the other divs being created, and seemingly doing what they were supposed to be doing, but that bg was not being applyed.
Thanks!
It could be VERY useful if the script could use the resized images. Something like max-height and max-width instead a fixed width / height.
To Luis and the people who doesn’t know where to change the values: you have to put them like this, in the html or php (not in the .js):
$(‘#slide’).jqFancyTransitions({ width: x, height: y, effect: ‘zipper’, strips:number, position: ‘bottom’, direction: ‘alternate’ });
thanx for publish this, its really helpfull.
Im having problems by modifing the values of this effect, basically cuz i dont know where to do it. what file i have to modify? jqFancyTransitions ? if it is, where to modify.
Thanks for this
greetings
What version of the product are you using? On what operating system?
I am using jqFancyTransitions.1.8.min.js
My Operating System is windows 7 x86
Please provide any additional information below.
When i m using Multi sized images. The small images comes in tile property
here i m attaching the demo file.
Please solve this prob as soon as possiable.
Thanks in Advance.
Regards
Vishal chuahn
Mail:vishname18@gmail.com
Lazarevic Ivan, how can I set different target to each of the images? One of than is target=”_self”, and the other 3 is target=”_blank”.
You forgot to add the last comma like this: “navigation: false,”
Yours doesn’t have it and that’s why mine didn’t work. Great job!
navigation: false // prev and next navigation buttons
links: false // show images as links
Hi! How can I set different target(_blank or _self) to the of each images? Is it possible?
Very interesting discussion of your article, talking about jQuery will not run out ending, I also have written several articles on jQuery and CSS3. Thank and cool posting.
Hey,
Just wondering whether it is possible to set custom previous and next links or similar?
Just I would kind of like previous and next buttons, but without the numbers 1 2 3 showing below and also to be able to style the previous and next links and position them anywhere on the page would be great.
Any thoughts?
Hey, man!
Would you be so kind to add a comma between your demo settings strings:
11 navigation: false // prev and next navigation buttons
12 links: false // show images as links
i nearly died, trying to understand, why plugin was confused to work
Hey, Ive found that the class for the image captions is .ft-title, so was able to make it the full width, alter line-height etc. Then I can see that you can alter the background opacity etc using javascript as outlined at top.
Thanks again.
i have 2 questions…
what is the different between the 1.8.min and the 1.8 ?
and how can i get the 1 2 3 4 in the center of the image? I tried margin:auto; etc but it doesn’t work 🙁
Also is it possible to just hide the captions, so that I can still have alt tags for the images but just show no captions
Hope this makes sense
thanks Adrian
Hi,
Got things working great, but just wondering whether there is a css class or something that could be used to style the captions?
It’s just at the moment the caption background is only as wide as the text, where I feel it could look better if the caption background was the full width of the image.
Any ideas would be great! 🙂
Version 1.8 is available. Thanks for help and suggestions.
Now, there is class for active navigation number. Name of class is: ft-button-IDOFHOLDER-active
Also, description bar is not part of ‘navigation’ option, so it will be always present.
@Sabrina: Great, thanks so much! I got it worked out, and I guess it really needed to be cleaned up.
Thanks!