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 [ 957 Comments ]
» Trackbacks and pingbacks click to expand
Leave a Reply
More Articles
-
Coin Slider 4 WordPress
Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider.
Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.
Demo pagesee how it worksDownloadtry [...]
-
Image gallery in 4 lines of code with MooTools and Dojo
Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
JUST – JavaScript Useful Stuff
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]
-
HTML5/CSS3 Circle Music Player
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his [...]
June 27, 2012
I have read some good stuff here. Certainly worth bookmarking for revisiting.
I wonder how so much effort you put to create this
type of fantastic informative website.
June 29, 2012
i don’t normally like fluffy stuff, but this is wicked… great work!
June 29, 2012
Well done. Great piece of code.
I do have one question around styling the number buttons that appear below the images. I see in the javascript where you’ve set the initial styling. Am wondering how to style the rollover and active states (the way you’ve done on your demo page). Thanks
June 30, 2012
Can Somebody Help; where to download the respective CSS file???
July 2, 2012
i have set the interval time.. but its too much time to load at first. so can we make it easily loadable…..???
July 3, 2012
i have a question, can’t resize the picture…
July 8, 2012
I added links to my slideshow….. now, how do I open them in a new window since target=”_blank” does not work?
Thx
July 9, 2012
slt
ou dois-je implémenter tout ce code?
je travaille avec Drupal 7 et j’utilise wysiwig comme éditeur.
comment intégrer ces codes via le wysiwig
j’en ai vraiment besoin merci
July 10, 2012
IE6,some questions.
July 13, 2012
I NEED HELP
I am very new to jQuery, but I like the effects produce by IVAN and want to learn how to produce it.
I have downloaded jquery-1.7.2 and jqFancyTransitions.1.8. and try to code it myself, but it wasnt just working. only my images are displaying in my browser, no slide show.
I am using Dreamweaver 8. How do I use this tool or other recommended one, to code it and produce the same effect.
I need this knowledge badly and quickly.
Thanks.
July 14, 2012
Hello it is an excellent effect but I cannot locate the navigation number class I´ve tried with .ft-button-ft-active, I want to change it to an image circle but it doesn´t change, can you help me?
July 15, 2012
very nice effect!!.. I’ll try this awesome stuff on my web for sure..
.
Good work.
July 17, 2012
看不懂。。。
July 17, 2012
Is there a way to make Fancy Transitions so that it can adapt to images of different sizes?
Many thanks…
Todd
July 19, 2012
I see lots of questions but no answers. Has this software been abandoned?
July 25, 2012
Great Great Fancy Slideshow, I was looking for something like this long time ago, is easy and gorgeous.
Thanks.
August 3, 2012
to open links in a new window, use a simple jquery script and give the element with class=”ft-slideshowHolder” – the attribute :”target” with the value :”_blank”
August 8, 2012
你把DEMO ,JS 什么的一起打包，然后提供下载不行吗，非要单独搞个JS 放谷歌上，不知道兼容性好不好。。
August 12, 2012
I loved the way you have made it simple. So am going to make it a part of my development. Thanks!
Please give me the simple css file for it. If it has features like on mouse over the prev and next bar appears, instead of previous and next of it has symbol, it will be great.
August 13, 2012
Hello
How can I make Rounded-border for images on IMAGE GALLERY WITH FANCY TRANSITIONS EFFECTS ??
Thank You