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 Ivan,
Nice Works!!
But when mouse is brought on the top of animation box, the animation effects stop, is this something by design?
Thanks
hi ivan, i have a problem with your script, i want to put it into an iframe, and into this, i want to put my images as URLS, but the links doesnt open in another window, these open in the same iframe, i tried to activate the _blank target in the HTML, but it doesnt work, what can i do with this? can u help me?
@Nick
I didn’t have a chance to test on iPhone/iPad. I’m glad that works : )
@Fawaz
This plugin will not change size of your images. You can set only size of holder.
Good Work Ivan !!
your plugin proved very useful for me. but i experienced an issue. Well, i put images [‘high Quality’] in the div. everything is working fine: navigation , links, rotation… but size of the displayed images is not right. like the size of my image is 1600 x 1200, as i kept the gallery size 1024 x 786. And images are partially shown in gallery div. as aspect ratio is set.
Got my point ???
Need you suggestions
ThanX once again
I was wondering is it possible and how to have the prev & next show on hover instead of being displayed all the time.
I correct myself, added links:true. Links now working on iOS!
Awesome work. Using as an alternative to Flash banners on mobile devices.
One note, the image links do not work on the iPhone/iPad.
Oh, and I’m also having the same issue as Daniel from above.
When the “next” or “previous” buttons are pressed during a transition, the images end up combining.
You can sort of see it on the demo page with the top gallery. It gets kind of buggy, but it doesn’t stick in the way Daniel’s and mine do. It’s almost like it corrects itself?
here is the site….but its not working ( these are temp images…) help please….
ok I would like to know what to name the div….I can’t get this to work..I copied the “view source” exactly and I followed the directions but still can’t get it to work. can you send me the info I would need to download…there is a lot of choices which is confusing for a beginner like me…thanks
This works great! I love how simple it is!
Is there a way to turn off the automatic transitions? I would like it to not transition at all unless the user clicks on either “prev” or “next”.
Thanks!
Thanks for sharing it.
Awesome plugin. Far Far better than Flash.
Thanks once again mate! cheers!
Hi Ivan,
In Chome or FireFox, It is working well.
In IE 6, i found that when the transition doing, the page is freshing continually, i can see it because the mouse icon shows running.
What’s the problem? the script will be perfect if the refreshing problem could be fixed,
Thanks,
Chen.
Hi! great plug-in by the way. However my gallery overlaps my category menus when you hover over them. (e.g. mens,womens,kids…). Is there some code use to have my menu overlap the gallery? Thanks!
Hi,
I have added a heading to the first screen using: (around line 65)
// create title bar
$(‘#’+el.id).append(“”+heading[el.id][0]+””+titles[el.id][0]+””);
if(titles[el.id][imgInc[el.id]])
I added a heading arry previous to this:
var heading = new Array;
heading[el.id] = new Array(); // heading array
heading[el.id][i] = $(item).attr(‘title’) ? $(item).attr(‘title’) : ”;
The problem is that it only works for the first image, not any others. Any ideas?
Thanks,
Mark
@Alison
No.
@KP
You need latest version of jqFancyTransitions.
@esmaralda, @Hank Allen
I didn’t try that, but I assume that it can be done with CSS.
@lilly
It works now and looks nice on you site.
@wouter
Putting cursor on image will stop transitions.
@Jimmy
I’m not sure that I understand your questions.
@Randy
No, this plugin don’t have that feature.
Is there any way to keep the transitions from repeating? I want to have it transition through all the slides and then end on the last one.
Script is awesome, How do I disable the slide link but keep the prev and next available? Also is it possible to do a hover the prev and next area for them to display?
loving this! one question, is there any way to stop the fancy transistions?
thanks & keep up the good work!
Hi there,
Thanks for your great work. I had your plugin successfully installed using .png files, but since I have switched the files to .jpgs the plugin has crashed and the images simply appear one on top the other. I have tried looking at the previous comments, but nothing stands out.
Here is a sample page: http://www.galperinhomes.com/en/project1.html
Any help would be greatly appreciated.
Regards,
Lilly.
Is there any way constrain the navigation numbers at the bottom of the window. If I have a large number images the numbers run outside the div. Any help with would be greatly appreciated since I really like your plug-in.
Great plugin, this is exactly what I needed and it took me only 5 minutes to get it to work. Thanks!
Is there a way to get the 1 2 3 4 in the middle of the image? ( at the bottom of course) when i play with the left: ; and so on… it works but on a other browser it just move.. :S
I hope you understand my question..
thnx alot
Hi Ivan,
This is a great script and I like very much. Thank you for sharing.
I have a question though.
I have tried to set navigation: true on my site (www.kokpinlab.com) but still I cannot the prev and next button on the left and right hand side of the photo. Also, how can I make the page number visible under the photo?
Appreciate your enlightenment.
Thank you.
Hey! I got it 🙂
Was a problem with the “ready function”
The whole call to the facnyT is something like that:
$(document).ready(function() {
$(‘#slidenews’).jqFancyTransitions({width: 580, height: 160 });
});
maybe in the documentation should be appears inside the ready function, for the novices codeworkers like me hahahah…kisses guys!