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.

jqFancyTransitions2

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 [ 1,003 Comments ]

  1. Marcos
    March 27, 2013

    Hey, great script, thanks!

    I have a question: is it possible have links open in a new window or in the same window, just adding or not the attribute “target = _blank”?

    Like this:

    Thanks!

  2. safyhost
    March 28, 2013

    Like script! Thanks for sharing

  3. Sonny
    April 4, 2013

    jqFancyTransitions is indeed stylish and beautiful. I love its beautiful transition options. Will love to used this soon. :)

  4. dani
    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?

  5. 李景山
    April 6, 2013

    说点啥啊,不错,不错,呵呵

  6. Joachim
    April 7, 2013

    How to made prev/next button? On my page this buttons inactive :( Please help me

  7. Joachim
    April 7, 2013

    Where is the CSS file?

  8. Ervins Vilumsons
    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!

  9. short&portly
    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?

  10. Luke
    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.

  11. Mitchell
    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?

  12. yog
    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

  13. Yann
    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 !

  14. Sergio
    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?

  15. hemant Jadhav
    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…

  16. Sergio
    May 2, 2013

    How i can put two DIFERENT slider in same page with it?
    Thanks

  17. Andreas
    May 10, 2013

    No problems with include. but how I can head the time to start the animation?

  18. Ricky Mindanao
    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..

  19. Image gallery with fancy transitions effects « Workshop

  20. Maureen
    May 27, 2013

    I’ve downloaded jqFancyTransitions version 1.8 and I am noticing while setting it up that there is a bug. After the animations start for a bit and you go to use the numbered links to go back and forth, the images melt in to one another.

    Other than this it is a lovely script, but perhaps as some have asked a CSS file would be a nice inclusion for those new to using such scripts.

  21. Luka
    May 28, 2013

    Everyone with the width/height = 100% problem. Before the $(‘#slideshowHolder’).jqFancyTransitions line add:

    var size = {
    width: window.innerWidth || document.body.clientWidth,
    height: window.innerHeight || document.body.clientHeight
    }

    then instead of 100% use size['width']and size['height']. Like

    width: size['width'], // width of panel
    height: size['height'], // height of panel

  22. Sergio
    June 6, 2013

    When you set it this way

    $(document).ready(function () {
    $(‘#slideshowHolder’).jqFancyTransitions({ navigation: true, effect: ‘curtain’, strips: 1 });
    });

    Clicking the navigation buttons do funny things
    Any solution?

  23. Marcos Antônio
    June 8, 2013

    crashed for IE 10, Chrome, Firefox and Safari

  24. Sasha
    June 12, 2013

    А как сделать у слайдера border-radius: 3px 3px 3px 3px;

  25. nerd
    June 22, 2013

    my images are appearing all one above each other, not sliding…and i think i connected all correctly…

  26. Spencer Lee
    July 5, 2013

    Is there a way not to have smaller images not tile and just sit in the middle

  27. Nati
    July 18, 2013

    How do I control the appearance of the navigation or ‘alt=’ text?

  28. Anirban
    July 20, 2013

    Is it possible to put two div which will animate independently in the same page?

  29. maino
    July 23, 2013

    de que hablas?

  30. Maitra
    July 23, 2013

    I’m using link in images and giving target=”_blank” but still link opening in the same window? Any idea how to open links in new window?

  31. Obie
    July 27, 2013

    Hi,

    I want to add bullets to represent each image. How can I do that?

  32. J.L. MacDonald
    July 30, 2013

    I was implementing this on a company site and when I was browser testing, I noticed something a bit odd. If a person gets “click happy” and clicks the navigation button several times before the slide is complete, remnants of the previous image shows up. I have found this does it with multiple browsers.

    On a whole, I really do like this slider. Very slick. :)

  33. Mark
    September 5, 2013

    I was wondering ,if i can have a random transitions?

  34. Rob
    September 26, 2013

    Hi, I have some update on the plugin. I added an option whether to display the image randomly or start from index[0].

  35. Healthsqr.com
    October 13, 2013

    Excellent article. I certainly love this website.
    Keep it up!

  36. Roshdy
    October 13, 2013

    Is there a way to make the images responsive, like to use width with percentage (%) instead of pixels (px)?

  37. help lose belly fat
    October 14, 2013

    Nice post. I learn something totally new and challenging
    on sites I stumbleupon every day. It’s always exciting
    to read through articles from other authors and practice something
    from their web sites.

  38. bluehost
    October 17, 2013

    Hello friends, its impressive piece of writing about cultureand entirely explained,
    keep it up all the time.

  39. I am regular visitor, how are you everybody?
    This pece of writing posted at his site iss actually good.

  40. Jerald
    October 17, 2013

    Its like you read my mind! You seem to know so
    much about this, like you wrote the book in it
    or something. I think that you can do with a few pics to drive the
    message home a bit, but other than that, this is excellent blog.
    A fantastic read. I’ll certainly be back.

  41. Rockz
    October 21, 2013

    Hi, we are programmer, we want to develop a wordpress plugin with this script? Can we do that ? with your credential?

  42. Rockz
    October 21, 2013

    Hi, we are wordpress developer , we want to develop a wordpress plugin with this js script , with your credential , can we do that? Pleas reply ASAP , thanks for the patients to read this comment.

    Thanks,
    Rocks.

  43. Keenora
    October 23, 2013

    Well, beside all the spam comments here: Its a very nice slideshow you’ve made there. I am using it on my new shop now. I had some problems in the first place, because I haven’t used an ID for it, but a class. For some reason it didn’t worked than. Oh well, using an ID now :3

  44. caringbridge.org
    October 26, 2013

    Wow that was unusual. I just wrote aan really long comment but after
    I clicked subkit my comment didn’t appear. Grrrr… well I’m not writihg all that over again.
    Anyways, just wanterd to sayy superb blog!

  45. I just couldn’t depart your web site prior to suggesting that I actually enjoyed the usual info a person
    supply for your guests? Is gonna be again ceaselessly in order to investigate cross-check new posts

  46. 豪華 アウトレット
    October 28, 2013

    Hi, I do think your site might be having internet browser compatibility issues.

    When I take a look at your web site in Safari, it looks fine but when opening in Internet Explorer, it’s got some overlapping issues.
    I just wanted to give you a quick heads up! Aside from that,
    great website!

    My blog post – 豪華 アウトレット

  47. don
    October 29, 2013

    I see a function in he js called “$.fisherYates = function(arr)” how can I add this bit of code to my page so that the images are shuffled on page load and don’t display in the same order each and every time?

  48. jess
    November 4, 2013

    Hi,
    First, thanks for this plug-in… it’s easy and light.
    Second, I have problem with image loading using PHP script, it just doesn’t show up…

    Here’s my code:

    Do you have any suggestions?

    Thank you again.

  49. Kserver
    November 6, 2013

    Thank you for the post really awesome but please i need help after following your step and copying the scrip in my head tag section of my html nothing seems to happen with my images. I have for images in my place holder called #profileimgHolder, pleas is this code really completed for the effect, because it seems to not work

    $(‘#profileimgHolder’).jqFancyTransitions({ width: 400, height: 300 });

  50. Erez
    December 9, 2013

    Hello
    I am using your brilliant slide show at my homepage, and I want that the text at the bottom will not be the “content” of the related post, but the EXCERPT text.
    How can I change this, and where? in the js? in the php timthumb?

    Thanks for your assistance!



» Trackbacks and pingbacks click to expand

  1. [...] Slideshow with strip effects (演示 | 下载) [...]

  2. [...] 16. Image gallery with fancy transitions effects [...]

  3. [...] Slideshow with strip effects (演示 | 下载) [...]

  4. [...] ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect. Slider Details Slider Demo Download [...]

  5. [...] 16. Image gallery with fancy transitions effects [...]

  6. [...] http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/ Categoría: jQuery Etiquetas: galería, jQuery, slider 14 septiembre, 2012 at 16:54 No comments admin ¿Algo que añadir? o cancela tu respuesta [...]

  7. [...] Image Gallery with Fancy Transitions Effects [...]

  8. [...] Slideshow with strip effects (演示 | 下载) [...]

  9. [...] Slideshow with strip effects (演示 | 下载) [...]

  10. [...] Image gallery with fancy transitions effects « WorkshopCircular, Responsive jQuery Carousel – [...]

  11. [...] Slideshow with strip effects (演示 | 下载) [...]

  12. [...] fancy transitions effects, and being free means that you have nothing to lose by downloading it. MORE INFO – Free Plugin by [...]

  13. [...] Demo & Download 16. Image gallery with fancy transitions effects [...]

  14. [...] Slideshow with strip effects (演示 | 下载) [...]

  15. [...] i use paperclip to upload multiple photos-nested attributes.i like to make this if is easy ‘http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/‘in views>layouts>application<!DOCTYPE html> <html> <head> [...]

  16. [...] 访问该插件 9. Coin Slider 访问该插件 10. Image Gallery With Transition Effect 访问该插件 11. Nivo Slider Jquery Plugin 访问该插件 12. Slide Down Box Menu 访问该插件 13. [...]

  17. [...] Slideshow with strip effects (演示 | 下载) [...]

  18. [...] Here is an image gallery jQuery code with some nice transitions, photo credits and links. Basic text-based navigation left and right, and numbered slides below which are clickable. Demo | Source [...]

  19. [...] fancy transitions effects, and being free means that you have nothing to lose by downloading it. MORE INFO – Free Plugin by Workshop Posts related to 25+ Top jQuery Slideshow and Image Gallery [...]

  20. [...] Image Gallery with Fancy Transitions Effects [...]

  21. [...] El control deslizante Flux tiene algunas animaciones en 2D y 3D increíbles, incluyendo en la versión HTML y no existe una versión WordPress ahora también. . Muy pulido efecto de demostración | Fuente demo |Fuente [...]

  22. [...] Slideshow with strip effects (演示 | 下载) [...]

  23. [...] Slideshow with strip effects (演示 | 下载) [...]

  24. […] Slideshow with strip effects (演示 | 下载) […]

  25. […] Download : Fancy Transitions Image Gallery with jQuery […]


Leave a Reply

More Articles


more on WORKSHOP.rs