Home » Tutorials

Image Flow – Multiple Albums

Tutorials
Author Reading 14 min Views 901 Published by Modified by

Long ago I made tutorial about creating nice photo album with Image Flow script. Today I made up my mind to enhance this work with adding possibility to use it for multiple albums. So, you can load different sets of images (albums) on-fly. Finally, I put our albums into CSS3 horizontal accordion.

Our today’s result:

Image Flow - Multiple Albums

Here are our demo and source package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/accordion.css
  5. css/image-flow.css
  6. Step 3. JS
  7. js/image-flow.js
  8. js/script.js
  9. Step 4. XML
  10. xml/set1.xml
  11. xml/set2.xml
  12. xml/set3.xml
  13. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

In the beginning, let prepare markup for our albums (pure CSS3 accordion):

index.html

01 <div class="accordion">
02     <span id="tab1"></span>
03     <span id="tab2"></span>
04     <span id="tab3"></span>
05     <div class="tabs">
06         <dl class="tab1">
07             <dd>
08                 <a href="#tab1">Album1</a>
09                 <div id="1" class="sets"><img src="photos/1.jpg" alt="" /></div>
10             </dd>
11         </dl>
12         <dl class="tab2">
13             <dd>
14                 <a href="#tab2">Album2</a>
15                 <div id="2" class="sets"><img src="photos/5.jpg" alt="" /></div>
16             </dd>
17         </dl>
18         <dl class="tab3">
19             <dd>
20                 <a href="#tab3">Album3</a>
21                 <div id="3" class="sets"><img src="photos/9.jpg" alt="" /></div>
22             </dd>
23         </dl>
24     </div>
25 </div>

This is an easy definition list with album names and little thumbnails of the albums. And now, let prepare a markup for our Image Flow object.

01 <div id="imageFlow">
02     <div class="text">
03         <div class="title">Loading</div>
04         <div class="legend">Please wait...</div>
05     </div>
06     <div class="scrollbar">
07         <img class="track" src="images/sb.gif" alt="">
08         <img class="arrow-left" src="images/sl.gif" alt="">
09         <img class="arrow-right" src="images/sr.gif" alt="">
10         <img class="bar" src="images/sc.gif" alt="">
11     </div>
12 </div>

Step 2. CSS

Now – it’s time to turn our definition list of the albums into a great CSS3 switcher:

css/accordion.css

01 .accordion {
02     background-color: #444;
03     margin: 15px auto;
04     padding: 5px;
05     position: relative;
06     width: 480px;
07     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
08     -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
09     -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
10 }
11 .accordion span {
12     display: none
13 }
14 .tabs {
15     background-color: #FFFFFF;
16     overflow: hidden;
17 }
18 .tabs dl {
19     float: left;
20     overflow: hidden;
21     width: 100px;
22     -webkit-transition: all 0.3s ease-in-out;
23     -moz-transition: all 0.3s ease-in-out;
24     -o-transition: all 0.3s ease-in-out;
25     -ms-transition: all 0.3s ease-in-out;
26     transition: all 0.3s ease-in-out;
27 }
28 .tabs dl dd {
29     overflow: hidden;
30     width: 280px;
31 }
32 .tabs dl dd a {
33     background-color: #C8CEFF;
34     border: 1px solid;
35     border-color:#ccc;border-bottom-color:#aaa;
36     display: block;
37     float: left;
38     font-size: 18px;
39     line-height: 126px;
40     padding: 0 20px;
41     text-decoration: none;
42     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
43     background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
44     background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
45     background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
46     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
47     background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
48     background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
49     -moz-transition: 0.3s;
50     -ms-transition: 0.3s;
51     -o-transition: 0.3s;
52     -webkit-transition: 0.3s;
53     transition: 0.3s;
54 }
55 .tabs dl dd div {
56     float: left;
57     height: 128px;
58 }
59 .tabs dl dd div img {
60     height: 128px;
61     padding: 0 3px;
62 }
63 .tabs dl dd a:hover {
64     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
65     -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
66     -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
67 }
68 .tabs dl dd a:active {
69     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
70     background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
71     background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
72     background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
73     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
74     background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
75     background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
76 }
77 #tab1:target ~ .tabs .tab1, #tab2:target ~ .tabs .tab2, #tab3:target ~ .tabs .tab3 {
78     width: 280px;
79 }
80 #tab1:target ~ .tabs .tab1 dd a,
81 #tab2:target ~ .tabs .tab2 dd a,
82 #tab3:target ~ .tabs .tab3 dd a {
83     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
84     background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
85     background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
86     background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
87     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
88     background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
89     background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
90 }

And, we also should stylize our ImageFlow:

css/image-flow.css

01 #imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:500px}
02 #imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
03 #imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
04 #imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000}
05 #imageFlow .title{font-size:.9em;font-weight:700}
06 #imageFlow .legend{font-size:.8em}
07 #imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
08 #imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
09 #imageFlow .arrow-left{position:absolute}
10 #imageFlow .arrow-right{position:absolute;right:0}
11 #imageFlow .bar{position:absolute;height:16px;left:25px}
12 #imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
13 #imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}

Step 3. JS

Now, let’s review our javascript codes. The first one file – is our gallery script:

js/image-flow.js

This file is available in our package. Our next file:

js/script.js

01 // set another album
02 function setAlbum(i) {
03     imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);
04 }
05 // main initialization
06 document.addEventListener('DOMContentLoaded', function() {
07     // set first album
08     setAlbum(1);
09     // attaching 'click' event listener to '.sets'
10     [].forEach.call( document.querySelectorAll('.sets'), function(el) {
11         el.addEventListener('click', function(e) {
12             imf.reinit();
13             setAlbum(e.currentTarget.id);
14         }, false);
15     });
16 });

As you can see – this is very small and easy script. Main idea – to attach ‘click’ event listener to our Albums (in our accordion). And, when visitor click at certain album, we will load predefined XML file with a list of images (of selected album).

Step 4. XML

Finally, we should prepare three XML files: predefined lists of our albums.

xml/set1.xml

01 <?xml version="1.0" ?>
02 <bank>
03     <img>
04         <src>photos/1.jpg</src>
05         <title>Image 1</title>
06         <caption>Thailand #1</caption>
07     </img>
08     <img>
09         <src>photos/2.jpg</src>
10         <title>Image 2</title>
11         <caption>Thailand #1</caption>
12     </img>
13     <img>
14         <src>photos/3.jpg</src>
15         <title>Image 3</title>
16         <caption>Thailand #1</caption>
17     </img>
18     <img>
19         <src>photos/4.jpg</src>
20         <title>Image 4</title>
21         <caption>Thailand #1</caption>
22     </img>
23 </bank>

xml/set2.xml

01 <?xml version="1.0" ?>
02 <bank>
03     <img>
04         <src>photos/5.jpg</src>
05         <title>Image 5</title>
06         <caption>Thailand #2</caption>
07     </img>
08     <img>
09         <src>photos/6.jpg</src>
10         <title>Image 6</title>
11         <caption>Thailand #2</caption>
12     </img>
13     <img>
14         <src>photos/7.jpg</src>
15         <title>Image 7</title>
16         <caption>Thailand #2</caption>
17     </img>
18     <img>
19         <src>photos/8.jpg</src>
20         <title>Image 8</title>
21         <caption>Thailand #2</caption>
22     </img>
23 </bank>

xml/set3.xml

01 <?xml version="1.0" ?>
02 <bank>
03     <img>
04         <src>photos/9.jpg</src>
05         <title>Image 9</title>
06         <caption>Thailand #3</caption>
07     </img>
08     <img>
09         <src>photos/10.jpg</src>
10         <title>Image 10</title>
11         <caption>Thailand #3</caption>
12     </img>
13     <img>
14         <src>photos/11.jpg</src>
15         <title>Image 11</title>
16         <caption>Thailand #3</caption>
17     </img>
18     <img>
19         <src>photos/12.jpg</src>
20         <title>Image 12</title>
21         <caption>Thailand #3</caption>
22     </img>
23 </bank>

That’s all!

Live Demo

Conclusion

Now you have it – cool animated image gallery with multiple albums support. We even haven’t used jQuery today. It was pure CSS3 and Javascript. I will be glad to see your thanks and comments. Good luck!

Rate article
© 2026 Script Tutorials