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:

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!