Многотомный фотоальбом

        <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">Альбом 1</a>
                        <div id="1" class="sets"><img src="/photos/1.jpg" alt="" /></div>
                    </dd>
                </dl>
                <dl class="tab2">
                    <dd>
                        <a href="#tab2">Альбом 2</a>
                        <div id="2" class="sets"><img src="/photos/5.jpg" alt="" /></div>
                    </dd>
                </dl>
                <dl class="tab3">
                    <dd>
                        <a href="#tab3">Альбом 3</a>
                        <div id="3" class="sets"><img src="/photos/9.jpg" alt="" /></div>
                    </dd>
                </dl>
            </div>
        </div>

        <div id="imageFlow">
            <div class="text">
                <div class="title">Загрузка</div>
                <div class="legend">Подождите...</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>

.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%);
}

#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
}

// Устанавливаем другой альбом
function setAlbum(i) {
    imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);
}

// Инициализация
document.addEventListener('DOMContentLoaded', function() {
    // Устанавливаем первый альбомы
    setAlbum(1);

    // Привязываем обработчик события 'click' к '.sets'
    [].forEach.call( document.querySelectorAll('.sets'), function(el) {
        el.addEventListener('click', function(e) {
            imf.reinit();
            setAlbum(e.currentTarget.id);
        }, false);
    });
});

<?xml version="1.0" ?>
<bank>
    <img>
        <src>photos/1.jpg</src>
        <title>Каритинка 1</title>
        <caption>Таиланд #1</caption>
    </img>
    <img>
        <src>photos/2.jpg</src>
        <title>Картинка 2</title>
        <caption>Таиланд #1</caption>
    </img>
    <img>
        <src>photos/3.jpg</src>
        <title>Картинка 3</title>
        <caption>Таиланд #1</caption>
    </img>
    <img>
        <src>photos/4.jpg</src>
        <title>Картинка 4</title>
        <caption>Таиланд #1</caption>
    </img>
</bank>