В данном уроке мы сделаем многотомный фотоальбом. Фотографии будут размещаться в одну линию по горизонтали, для их просмотра используем эффект масштабирования. Для реализации такого функционала используется скрипт. А для переключения между томами задействуем горизонтальный аккордеон. Также реализуем динамическое изменение содержания альбомов с помощью XML файлов.

Разметка HTML

Сначала определим разметку для нашего переключателя альбомов (то есть для CSS3 аккордеона):

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

Для демонстрации фотографий будет использоваться скрипт ImageFlow. Зададим разметку для построения структуры вывода изображений:

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

CSS

Все стили разделены на две группы - для аккордеона и для структуры, создаваемой скрипто ImageFlow.

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

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
}

JavaScript

Скрипт ImageFlow входит в состав исходников к нашему уроку. А код, который непосредственно реализует функционал демонстрации представлен ниже:

js/script.js

// Устанавливаем другой альбом
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 файл, в котором содержится список изображений.

XML

Для демонстрации приготовлено три XML файла с описанием содержания альбомов. Они все имеют одинаковую структуру, поэтому покажем только один из них:

xml/set1.xml

<?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>

Готово!

Добавлено: 21 Сентября 2013 01:47:02 Добавил: Андрей Ковальчук Нравится 0

Добавить