Image Flow – Multiple Albums

Image Flow – Multiple Albums

15 1201
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

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!

SIMILAR ARTICLES

Practice with Text Shadows

0 384
Responsive HTML Email Template

0 599

15 COMMENTS

  1. Great contribution!
    I have extended into 7 albums and as I amb new with javascript, I have some problems:
    - From album1 to 4, speed works fine but in the new ones goes too fast and when I go back to album1, speed changes too and all the albums start going too fast even the ones that work properly in the beginning. Where can I change it?
    - Where can I say picture 1, 2 and 3 will be part of album 6?
    Thanks in advance,
    Sara

    • Hello Sara, firstly, you can add several more tabs inside HTML page (into accordion), then – please pay attention to the css/accordion.css, look at the bottom – it has styles only for 1-3 tabs. Finally – look at step 4, where you have to prepare more XML files (as sets of images), this is the place where you can assign different images with different albums

  2. This example has reaali taught me how well and powerful javascript is .
    Thanks again hope i will see more of javascript advanced like 3D canvas rendering and more tutorials .

  3. hi andrew,
    first i want to point out that this is a great site…!!!
    and second.. well i just have a question… how can i fix the following effect :

    as more as i click on a album selection photo, the faster the images are shown below
    clicking 50 times and i really have a image Stroboscope… cool … but hmmmm
    you can call it a feature that the user can speed up… but my god how to slow down my friend??
    thanks gonzo

    • Hello Gonzo,
      There is a way to overcome this problem, open ‘image-flow.js’ file, and then – define
      var scrollTimerId;
      in the beginning of this file, after, search for
      delete instances;
      instances = [];
      and add
      clearInterval(scrollTimerId);
      below it, after, search for
      setInterval(function ()
      and replace it with: scrollTimerId = setInterval(function ()

  4. Hi! Thank you very much for this example! Its pretty cool and simple to do.
    The only problem I’m getting is, I can’t find a way to store the files somewhere and using the html on another site. I changed the relative paths to absolute paths, but I still get only a “Loading. Please wait” with the scroll bar on the bottom.
    What could I be missing?
    Thank you!

  5. The gallery was nice, thank you. But I wanted to ask can the title and caption be renamed. And also how to increased the number of image displayed

  6. Hi Andrey,

    Thank you for sharing this great gallery. I have placed it on my website and added one more gallery (not finished jet) but get the same problem as Gonzo, the gallery speed up each time you click on a gallery until it is so fast you can not really view the photos. Unfortunately I have no or very little knowledge of javascript. I tried to follow the instructions your gave Gonzo, but do not get far. Would it be possible to write the lines that should be added so I can insert it into the image-flow.css file.

    Thank your
    Andre

  7. Hi Andrey,

    I fixed it, and sorry for the post, my fault, I did not read the instructions correctly.
    I was looking in the css file and not in the js file. My gallery is working fine now.

    Andre

  8. How can i insert image in html page. i dont want use an .xml files. Because i’ll update images dinamycial. Can u help me. Kind regards.

    • Hi Hasan,
      If you want to make it dynamical, you can use PHP to generate different XML results (you don’t need to use the static XML file)

Leave a Reply