Home » Tutorials

Fancy Image gallery – jqFancyTransitions

Tutorials
Author Reading 7 min Views 71 Published by Modified by

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.

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. css/main.css
  4. Step 3. JS
  5. js/main.js
  6. js/main.js
  7. Step 4. Images
  8. jqFancyTransitions params
  9. Conclusion
Live Demo
download in package

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:

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

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

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

01 .ft-title {
02     background-color: rgba(128, 128, 128, 0.8) !important;
03     font-size: 18px;
04     font-weight: bold;
05     height: 37px;
06     line-height: 40px;
07     margin-right:10px;
08     text-align: right;
09     width: 100%;
10 }
11 .ft-title a {
12     color: #fff;
13 }
14 .ft-prev, .ft-next {
15     /* CSS3 transform */
16     -webkit-transition: all 0.2s ease-in-out 0s;
17     -moz-transition: all 0.2s ease-in-out 0s;
18     -o-transition: all 0.2s ease-in-out 0s;
19     -ms-transition: all 0.2s ease-in-out 0s;
20     transition: all 0.2s ease-in-out 0s;
21 }
22 .ft-prev {
23     background-color: rgba(128, 128, 128, 0.5);
24     border-color: transparent #0072BC transparent transparent;
25     border-radius: 0 30px 30px 0;
26     border-style: solid;
27     border-width: 30px;
28     height: 0;
29     overflow: hidden;
30     width: 0;
31 }
32 .ft-next {
33     background-color: rgba(128, 128, 128, 0.5);
34     border-color: transparent transparent transparent #0072BC;
35     border-radius: 30px 0 0 30px;
36     border-style: solid;
37     border-width: 30px;
38     overflow: hidden;
39     width: 0;
40     height: 0;
41 }
42 .ft-prev:hover {
43     border-right-color: #00548b;
44 }
45 .ft-next:hover {
46     border-left-color: #00548b;
47 }
48 #ft-buttons-gallery a:link, #ft-buttons-gallery a:visited {
49     background-color: #F5F5F5;
50     border: 1px solid #EBEBEB;
51     color: #0072BC;
52     font-weight: normal;
53     margin-left: 10px;
54     padding: 2px 7px;
55     text-decoration: none;
56     width: 22px;
57 }
58 #ft-buttons-gallery a.ft-button-gallery-active {
59     background-color: #DDEEFF;
60     border: 1px solid #BBDDFF;
61     color: #0072BC;
62     cursor: default;
63     margin-left: 10px;
64     padding: 2px 7px;
65     text-decoration: none;
66 }

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

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

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
download in package

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!

Rate article
© 2025 Script Tutorials