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
great thanks for sharing works really well.
Hello, is this plugin free to use?
Thank you. Its the best.
exellent job, works great. thank u for sharing 🙂
Hi,
I do not see how you make title of the images appear?
any idea?
Cheers
I’d like to style the titles (font-family, font-size, color, etc.). How do I do that? Thanks … and this is a great gallery plug-in!
how do you put in a fade effect?
thanks
Jonathan,
I initially had the same issue, but realized I didn’t update the local URL for the jqFancyTransitions.js file.
Make sure that in the of your script that you change the ”
” to reflect the JS file you downloaded.
Example: I downloaded the v. 1.8 minified version of the file, so in the head of my page instead of script src=”js/jqFancyTransitions.js” I have “”
I hope this helps!!
Hi,
I think I’m obviously missing something..
I’ve got the 2 files: jqFancyTransitions.js and jquery.js and it still won’t work.
I still see my images statically on the browser.
Can someone please help me?
hi
This is not working in IE9.
Any solution for the same.
Regards
Ravikaanth
The urls are not working for me… any idea?
Hey is there any way to have onclick event on images !?
i tried having functions but its not working
I’ll right away grasp your rss feed as I can not find your e-mail subscription link or newsletter service. Do you have any? Please allow me recognize in order that I may subscribe. Thanks.
Can you tell me please how to have multiple effects for the slideshow and where to add them exaclty? I don’t know much JS. thank you!
When using transparent .png images they appear to lay on top of each other as well as rotate. I can see the images through one another. Is there a way to get this to work with transparent .png images?
Very good script.But I can’t do it working with IE9. Thanks in advance for any idea.
Hello,
A big thank for your very goof gallery!
I have a question, I added links to my images, it works very well, but I want the links to be opened in a new window, can you help me please?
Looking to pay someone $75+ to incorporate the Wave transition into the Supersized Jquery Gallery
hi,
I would like to add random switch between effects, is it possible?
More one question…how can I format the title bar to fill the width of image? I’m using 940px.
How to format the navigation links? (1,2,3,4,…,n)
More one thing, I changed the links “next” and “prev” by arrow images, it’s works fine on Google Chrome, Opera, Firefox and Safari, but on Internet Explorer, appears a border around the image. I’d tried remove this using CSS but I’d can’t. Somebody can help me?
Ivane pozdrav, ovo je prava stvar, molim te korak po korak na srpskom,Engleski mi nije jaca strana
hvala
how can i give style for the links ( 1 2 3 4 ) and the prev and next buttons
@Myself
Never mind, I found them, they were hiding because they were the same color as the background.