Fancy Image gallery – jqFancyTransitions

Fancy Image gallery – jqFancyTransitions

6 44300
Fancy Image gallery - jqFancyTransitions

Fancy Image gallery – jqFancyTransitions

In our new tutorial I would like to show you how to create a nice looking photo gallery with transition effects. I’m going to use a ready jQuery plugin – jqFancyTransitions. It is easy and effective jQuery plugin to display photos as photo slideshow with fancy transition effects (wave, zipper and curtain). There are a lot of ways to customize the result. All the possible options will be published at the end of this article.

Live Demo

[sociallocker]

download in package

[/sociallocker]


Ok, let’s download the source files and start coding !


Step 1. HTML

Firstly, in order to use this gallery we should add all the necessary styles and scripts in the header section:

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jqFancyTransitions.1.8.min.js"></script>
<script src="js/main.js"></script>

Then, we can prepare an easy html markup of our photo gallery with several photos:

<div id="gallery">
    <img src="images/pic1.jpg" alt="<i>A look to New Jersey <a href='http://1x.com/photo/53587'>by Hannes Cmarits</a></i>" />
    <img src="images/pic2.jpg" alt="<i>Reflections [color] <a href='http://1x.com/photo/20045'>by Sven Fennema</a></i>" />
    <img src="images/pic3.jpg" alt="<i>Silk <a href='http://1x.com/photo/45014'>by Bryan Jolly</a></i>" />
    <img src="images/pic4.jpg" alt="<i>Space City III <a href='http://1x.com/photo/31495'>by WisoNet</a></i>" />
    <img src="images/pic5.jpg" alt="<i>Forms and reflections <a href='http://1x.com/photo/30093'>by Sven Fennema</a></i>" />
    <img src="images/pic6.jpg" alt="<i>Skyarena <a href='http://1x.com/photo/19329'>by Luis Romero</a></i>" />
</div>

There are six images, each of them has alt attribute, afterward, the value of this attribute will be converted into title for every photo, as you can see – we can use html entities here.

Step 2. CSS

css/main.css

In order to produce good result, I had to customize our gallery:

.ft-title {
    background-color: rgba(128, 128, 128, 0.8) !important;
    font-size: 18px;
    font-weight: bold;
    height: 37px;
    line-height: 40px;
    margin-right:10px;
    text-align: right;
    width: 100%;
}
.ft-title a {
    color: #fff;
}
.ft-prev, .ft-next {
    /* CSS3 transform */
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.ft-prev {
    background-color: rgba(128, 128, 128, 0.5);
    border-color: transparent #0072BC transparent transparent;
    border-radius: 0 30px 30px 0;
    border-style: solid;
    border-width: 30px;
    height: 0;
    overflow: hidden;
    width: 0;
}
.ft-next {
    background-color: rgba(128, 128, 128, 0.5);
    border-color: transparent transparent transparent #0072BC;
    border-radius: 30px 0 0 30px;
    border-style: solid;
    border-width: 30px;
    overflow: hidden;
    width: 0;
    height: 0;
}
.ft-prev:hover {
    border-right-color: #00548b;
}
.ft-next:hover {
    border-left-color: #00548b;
}
#ft-buttons-gallery a:link, #ft-buttons-gallery a:visited {
    background-color: #F5F5F5;
    border: 1px solid #EBEBEB;
    color: #0072BC;
    font-weight: normal;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none;
    width: 22px;
}
#ft-buttons-gallery a.ft-button-gallery-active {
    background-color: #DDEEFF;
    border: 1px solid #BBDDFF;
    color: #0072BC;
    cursor: default;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none;
}

There are styles for the customized title area, prev and next buttons and for pagination.

Step 3. JS

js/main.js

Now, we have to initialize our photo gallery:

js/main.js

$(function(){
    $('#gallery').jqFancyTransitions({
        effect: 'zipper', // wave, zipper, curtain
        width: 850, // width of panel
        height: 600, // height of panel
        strips: 15, // number of strips
        delay: 3000, // delay between images in ms
        stripDelay: 20, // delay beetwen strips in ms
        titleOpacity: 0.8, // opacity of title
        titleSpeed: 2000, // speed of title appereance in ms
        position: 'curtain', // top, bottom, alternate, curtain
        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
        navigation: true, // prev and next navigation buttons
        links: false // show images as links
    });
})

Everything is very easy, isn’t it? You can follow this link in order to find an official demonstration and documentation.

Step 4. Images

All the gallery images are in ‘images’ folder.

jqFancyTransitions params

You can use the next properties to ininialize this plugin:

ParamTypeDefaultDescription
effectstringTransition effect, possible values are: wave, zipper and curtain
widthint500Panel width
heightint332Panel height
stripsint10Strips amount
delayint5000Delay between images in ms
stripDelayint50Delay beetwen strips in ms
titleOpacityfloat0.7Title’s opacity
titleSpeedint1000Speed of title appereance in ms
positionstringalternateStrips position: top, bottom, alternate, curtain
directionstringfountainAlternateStrips direction: left, right, alternate, random, fountain, fountainAlternate
navigationbooleanfalseDisplay prev-next navigation buttons
linksbooleanfalseDisplay images as links

Live Demo

Conclusion

That is all for today. We have just created new photo gallery with jqFancyTransitions. I hope that everything have been easy for you and you like our result. Good luck!

SIMILAR ARTICLES

Polaroid gallery

0 23845

6 COMMENTS

  1. I am having problems with the number buttons underneath the gallery. It only shows one button with the number of pictures loaded on it. Any ideas what this could be?
    Thank you for the tutorial, it helped me a ton.

    • Hi Frank,
      As I know – this is ‘navigation’. If you use 5 photos in this gallery, you should have 5 different buttons underneath the gallery (1, 2, 3, 4, 5).

  2. Hi, can i ask you a question? There is a mod that allow you to delay the first animation (something like 10 seconds and start the animations)?
    Thanks,
    sorry about my english

  3. Any time I add the navigation: true to the options, it stops the animations. If I set this to false, everything works fine. Any ideas?

Leave a Reply