Fancy Image gallery – jqFancyTransitions

Fancy Image gallery – jqFancyTransitions

6 41470
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

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:

Param Type Default Description
effect string Transition effect, possible values are: wave, zipper and curtain
width int 500 Panel width
height int 332 Panel height
strips int 10 Strips amount
delay int 5000 Delay between images in ms
stripDelay int 50 Delay beetwen strips in ms
titleOpacity float 0.7 Title’s opacity
titleSpeed int 1000 Speed of title appereance in ms
position string alternate Strips position: top, bottom, alternate, curtain
direction string fountainAlternate Strips direction: left, right, alternate, random, fountain, fountainAlternate
navigation boolean false Display prev-next navigation buttons
links boolean false Display 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

Bootstrap Forms

0 25
jQuery Mobile Lesson 6

0 10

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