Image Flow – Multiple Albums

Image Flow – Multiple Albums

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:

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

<div class="accordion">
    <span id="tab1"></span>
    <span id="tab2"></span>
    <span id="tab3"></span>

    <div class="tabs">
        <dl class="tab1">
            <dd>
                <a href="#tab1">Album1</a>
                <div id="1" class="sets"><img src="photos/1.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab2">
            <dd>
                <a href="#tab2">Album2</a>
                <div id="2" class="sets"><img src="photos/5.jpg" alt="" /></div>
            </dd>
        </dl>
        <dl class="tab3">
            <dd>
                <a href="#tab3">Album3</a>
                <div id="3" class="sets"><img src="photos/9.jpg" alt="" /></div>
            </dd>
        </dl>
    </div>
</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.

<div id="imageFlow">
    <div class="text">
        <div class="title">Loading</div>
        <div class="legend">Please wait...</div>
    </div>
    <div class="scrollbar">
        <img class="track" src="images/sb.gif" alt="">
        <img class="arrow-left" src="images/sl.gif" alt="">
        <img class="arrow-right" src="images/sr.gif" alt="">
        <img class="bar" src="images/sc.gif" alt="">
    </div>
</div>

Step 2. CSS

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

css/accordion.css

.accordion {
    background-color: #444;
    margin: 15px auto;
    padding: 5px;
    position: relative;
    width: 480px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.accordion span {
    display: none
}
.tabs {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabs dl {
    float: left;
    overflow: hidden;
    width: 100px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tabs dl dd {
    overflow: hidden;
    width: 280px;
}
.tabs dl dd a {
    background-color: #C8CEFF;
    border: 1px solid;
    border-color:#ccc;border-bottom-color:#aaa;
    display: block;
    float: left;
    font-size: 18px;
    line-height: 126px;
    padding: 0 20px;
    text-decoration: none;

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);

    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tabs dl dd div {
    float: left;
    height: 128px;
}
.tabs dl dd div img {
    height: 128px;
    padding: 0 3px;
}
.tabs dl dd a:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1, #tab2:target ~ .tabs .tab2, #tab3:target ~ .tabs .tab3 {
    width: 280px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}

And, we also should stylize our ImageFlow:

css/image-flow.css

#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:500px}
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px}
#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}
#imageFlow .title{font-size:.9em;font-weight:700}
#imageFlow .legend{font-size:.8em}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3}
#imageFlow .arrow-left{position:absolute}
#imageFlow .arrow-right{position:absolute;right:0}
#imageFlow .bar{position:absolute;height:16px;left:25px}
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000}
#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

// set another album
function setAlbum(i) {
    imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);
}

// main initialization
document.addEventListener('DOMContentLoaded', function() {
    // set first album
    setAlbum(1);

    // attaching 'click' event listener to '.sets'
    [].forEach.call( document.querySelectorAll('.sets'), function(el) {
        el.addEventListener('click', function(e) {
            imf.reinit();
            setAlbum(e.currentTarget.id);
        }, false);
    });
});

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

<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/1.jpg</src>
        <title>Image 1</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/2.jpg</src>
        <title>Image 2</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/3.jpg</src>
        <title>Image 3</title>
        <caption>Thailand #1</caption>
    </img>
    <img>
        <src>photos/4.jpg</src>
        <title>Image 4</title>
        <caption>Thailand #1</caption>
    </img>
</bank>

xml/set2.xml

<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/5.jpg</src>
        <title>Image 5</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/6.jpg</src>
        <title>Image 6</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/7.jpg</src>
        <title>Image 7</title>
        <caption>Thailand #2</caption>
    </img>
    <img>
        <src>photos/8.jpg</src>
        <title>Image 8</title>
        <caption>Thailand #2</caption>
    </img>
</bank>

xml/set3.xml

<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/9.jpg</src>
        <title>Image 9</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/10.jpg</src>
        <title>Image 10</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/11.jpg</src>
        <title>Image 11</title>
        <caption>Thailand #3</caption>
    </img>
    <img>
        <src>photos/12.jpg</src>
        <title>Image 12</title>
        <caption>Thailand #3</caption>
    </img>
</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!

Live Demo

download in package

Step 1. HTML

index.html

Step 2. CSS

css/accordion.css

css/image-flow.css

Step 3. JS

js/image-flow.js

js/script.js

Step 4. XML

xml/set1.xml

xml/set2.xml

xml/set3.xml

Live Demo

Conclusion

You Might Also Like

WYSIWYG and WYSIWYM Editors

How to use Multiple backgrounds and Animation with CSS3

HTML5 animation – patterns with loops