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
Hello
I am using your brilliant slide show at my homepage, and I want that the text at the bottom will not be the “content” of the related post, but the EXCERPT text.
How can I change this, and where? in the js? in the php timthumb?
Thanks for your assistance!
Thank you for the post really awesome but please i need help after following your step and copying the scrip in my head tag section of my html nothing seems to happen with my images. I have for images in my place holder called #profileimgHolder, pleas is this code really completed for the effect, because it seems to not work
$(‘#profileimgHolder’).jqFancyTransitions({ width: 400, height: 300 });
Hi,
First, thanks for this plug-in… it’s easy and light.
Second, I have problem with image loading using PHP script, it just doesn’t show up…
Here’s my code:
Do you have any suggestions?
Thank you again.
I see a function in he js called “$.fisherYates = function(arr)” how can I add this bit of code to my page so that the images are shuffled on page load and don’t display in the same order each and every time?
Hi, I do think your site might be having internet browser compatibility issues.
When I take a look at your web site in Safari, it looks fine but when opening in Internet Explorer, it’s got some overlapping issues.
I just wanted to give you a quick heads up! Aside from that,
great website!
My blog post – 豪華 アウトレット
I just couldn’t depart your web site prior to suggesting that I actually enjoyed the usual info a person
supply for your guests? Is gonna be again ceaselessly in order to investigate cross-check new posts
Wow that was unusual. I just wrote aan really long comment but after
I clicked subkit my comment didn’t appear. Grrrr… well I’m not writihg all that over again.
Anyways, just wanterd to sayy superb blog!
Well, beside all the spam comments here: Its a very nice slideshow you’ve made there. I am using it on my new shop now. I had some problems in the first place, because I haven’t used an ID for it, but a class. For some reason it didn’t worked than. Oh well, using an ID now :3
Hi, we are wordpress developer , we want to develop a wordpress plugin with this js script , with your credential , can we do that? Pleas reply ASAP , thanks for the patients to read this comment.
Thanks,
Rocks.
Hi, we are programmer, we want to develop a wordpress plugin with this script? Can we do that ? with your credential?
Its like you read my mind! You seem to know so
much about this, like you wrote the book in it
or something. I think that you can do with a few pics to drive the
message home a bit, but other than that, this is excellent blog.
A fantastic read. I’ll certainly be back.
I am regular visitor, how are you everybody?
This pece of writing posted at his site iss actually good.
Hello friends, its impressive piece of writing about cultureand entirely explained,
keep it up all the time.
Nice post. I learn something totally new and challenging
on sites I stumbleupon every day. It’s always exciting
to read through articles from other authors and practice something
from their web sites.
Is there a way to make the images responsive, like to use width with percentage (%) instead of pixels (px)?
Excellent article. I certainly love this website.
Keep it up!
Hi, I have some update on the plugin. I added an option whether to display the image randomly or start from index[0].