Image gallery with fancy transitions effects
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 ='http://workshop.rs'/></a> <img src='img2.jpg' alt='img2' /> <a href ='http://workshop.rs/projects/jqbargraph'></a> <img src='img3.jpg' alt='img3' /> <a href ='http://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
December 26, 2011
this is my email :haniye_jalalifar@yahoo.com
December 27, 2011
Hi,
when I try to put it in an ajax tab I have this problem.
When I go to another tab, and then back to this tab, the animation is problematic.
Help, please!
December 28, 2011
hi i’ve been working with this plugin and it works perfectly on local system here in my pc but i put the same files on the server and look how does it doesn´t work, i just don’t know why. Can anyone help me on that problem please?. regards Rodrigo
December 28, 2011
with fancy box… problems!
January 10, 2012
Great plugin, really easy to use and works brilliantly in most browsers but I am wondering if anyone has experienced a problem with this great slideshow plugin making IE8 crash on Window Vista.
Everytime people using that OS and browser view pages on my site that use this plugin the browser stops working.
I am trying to track down what could cause this issue, wondered if anyone else has had similar problems or if it is just me.
January 13, 2012
@Dean I have successfully installed the jQuery plugin on my dev site and it works fine in IE8 for me.
January 15, 2012
For unexperienced like me…you need to place this piece of code to make it work:
$(’#slideshowHolder’).jqFancyTransitions({ navigation: true, links : true });
January 17, 2012
I love the plugin unfortunately I haven’t been able to get the slideshow to animate, it just stays static on the first image.
January 17, 2012
grate plugin. works fine – easy to install and configure.
one request – could there be a fade option for the slideshow?
January 17, 2012
Svaka cast majstore
January 18, 2012
Great Job!
It works perfectly, but is normal that when you make a mouseover on the images the scripts stopped?
What can I do to fix this?
Tanks
January 19, 2012
Thanks for the plugin, it’s very nice.
I have an image and a button and when the button is clicked I want to use the transition to show another image.
I tried using the .transition() function but that doesn’t seem to work.
What should I do to get it working?
January 23, 2012
I changed the code so that it generates img elements now.
This is useful if you want to stretch or center the image.
I made a bit of a mess of the code, will clean up when I have time.
source: http://www.martiendejong.nl/js/jqFancyTransitions.1.8.martienedit.js
January 24, 2012
The script works however the alignment on old image vs new image (transition) is off. Im not sure where the problem is…PLease help…
January 25, 2012
Is there a way to impliment this into Wordpress and be able to edit the images from the admin panel?
January 25, 2012
is there away to know when the transition is done or not!!??
January 27, 2012
This is literally the easiest demo I have ever followed. Took me less than 10 minutes to get it up and working. So awesome! Thank you!
January 28, 2012
Hello everybody, congratulations to Ivan for this awesome plugin.
I’m having a really hard time trying to integrate it as a header of a Joomla template… I really hope someone can help me out.
I’m no Joomla, jQuery or JavaScript expert so please be patient if I write something wrong.
The Joomla template I’m using has an “index.php” file which calls other PHP files (using include_once) to assemble the final HTML result. To help you better understand I’ll post an example of code from index.php:
Hopefully you get the idea… I inserted the scripts in the “head.php” file. I noticed jQuery v1.7 was already being used so it wasn’t necessary to re-declare it. I only added the jQueryFancyTransitions javascript file:
Right now there is a Flash (SWF) header, but I’ve been tasked to replace it with a jQuery header (Apple-friendly…).
Strangely enough, this SWF header is inserted in the head.php file and not in the “main.php” or other php files included in the part of “index.php”.
Using the “Inspect” feature of my browser I was able to verify that the header code gets “automatically” inserted in the of the page. I tried to delete the current SWF header part from “head.php” and add the HTML to call jQueryFancyTransitions, but it doesn’t work, it only displays all the images one on top of the other.
What I did was replace this:
<a href="index.php" title="”>
with this:
$(’#jqheader’).jqFancyTransitions({width: 970, height: 200, navigation: false, links: true, delay: 4000, position: ‘top’, direction: ‘fountainAlternate’, strips: 30});
I can see, using “Inspect” from my browser, that those lines of code are inserted in the tag of the resulting page. For some strange reason it seems they are not executed, though.
I tried creating a new HTML file and it works like a charm.
You can see it here: http://www.h-annozero.it/esempio_header2.html
I suspect this has to do with PHP messing things up with the “$” sign in the inline script, but I’m at a loss trying to understand what’s going on and what to do.
Thanks in advance for any support you might give on this.
Regards
January 28, 2012
I’ve noticed pasted lines of code don’t work… I don’t want to clutter all the comments so I will just give links to pastebin for the lines of code that got stripped out.
Example of code from index.php: http://pastebin.com/JiaszDHi
jqFancyTransitions declaration: http://pastebin.com/F1UK66vc
What I did was replace this: http://pastebin.com/5TGvRwZ5
… with this: http://pastebin.com/cfXjpfbY
Thanks again and hoping to hear from some of you soon
Regards
January 29, 2012
Hi,
I have configurated all. But in Firefox the page is continuously in “refresh”. Start, and “ever” stop.