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
Comments [ 959 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] jqFancyTransitions, [...]
Leave a Reply
More Articles
-
mooBarGraph: AJAX graph for MooTools
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.
This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, [...]
-
jQuery Snow Falling plugin
I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That’s why I enjoy watching how snow falling even if that’s only on my monitor.
Idea is to create one snowflake initially, clone that snowflake at [...]
-
jqBarGraph – jQuery graph plugin
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome [...]
-
Coin Slider: Image Slider with Unique Effects
After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider.
Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically [...]
March 28, 2013
Like script! Thanks for sharing
April 4, 2013
jqFancyTransitions is indeed stylish and beautiful. I love its beautiful transition options. Will love to used this soon.
April 5, 2013
I downloaded version 1.8 and works fine, but I have a gallery of imgs with different sizes and I can’t figure out how to adapt them to fit in the panel. CSS doesn’t seem to work, I even tried to put some code inside the plugin but I don’t really understand how it works so i failed trying to fix this… any sugestions?
April 6, 2013
说点啥啊，不错，不错，呵呵
April 7, 2013
How to made prev/next button? On my page this buttons inactive
Please help me
April 7, 2013
Where is the CSS file?
April 10, 2013
Can someone tell, how can I edit images in jqFancyTransitions.js. I want all images to fit slideshowHolder width and height, so the bigger ones shrinks to this div size.
I tried $(’img’).css({width:’100%’,height:’100%’}), but it doesn’t work. Please help!
April 10, 2013
Are the images preloaded before the animation begins? If not is there a way to do this. What versions of IE suport the slider?
April 10, 2013
Pretty nice! If you could add a parameter to set the initial tile’s appearance that would be cool. It would be nice to start the first transition faster than the rest so viewers get the message that there is a slideshow gong on here.
April 15, 2013
Hey, just a quick question from an amateur:
Great plugin, looks amazing!! Have the script running in a javascript website but, when previewed, flickers for a fraction of a second during the transitions. It’s probably something I’ve done wrong, but does anyone have this same issue or know how to fix it?
April 23, 2013
Hello I have a problem with the way the image appears on the slide
Called as images appear in miniature – would love to know what I do to change this and to picture to appear in control and will be interpreted on any slide
Sincerely
as you can see here : https://dl.dropboxusercontent.com/u/74607086/new%20%203.html
April 24, 2013
My images are equal to 1920px.
$. fn.jqFancyTransitions.defaults = {
width: 100%, / / width of panel
In this section, I would put the value of “100%” and not “1920px”.
I tried to remove the line “width” but the animation does not work anymore, the images change without transitions.
Do you have the solution?
Thanks !
April 29, 2013
What about transitions direction right to left? It’s not possible… I changed direction: ‘left’ to direction: ‘right’ and doesn’t work?
May 2, 2013
what to use if I want banner links to be opened in New window. I tried target=”_blank” in a tag but it’s not working…
May 2, 2013
How i can put two DIFERENT slider in same page with it?
Thanks
May 10, 2013
No problems with include. but how I can head the time to start the animation?
May 21, 2013
Hey, love the script.. wondering if you could make a small alteration/addon? you added in the ability to make the images URL’s but target= is not processing.. could you add this in.. would like to have links going to other pages in a new tab..
May 22, 2013
Image gallery with fancy transitions effects « Workshop