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

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

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/QcboymYhNq0/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Многотомный фотоальбом | | 2012-06-19 11:58:21 | | Статьи Web-мастеру | | В данном уроке мы сделаем многотомный фотоальбом. Фотографии будут размещаться в одну линию по горизонтали, для их просмотра используем эффект масштабирования. Для реализации такого функционала | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: