Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Апрель » 1 » Image Flow - несколько альбомов


12:36
Image Flow - несколько альбомов

Image Flow - несколько альбомов


Сегодня я решил создать фото галерею с использование нескольких фотоальбомов. Таким образом, вы можете загружать различные наборы изображений (альбомы) на лету. Наконец, я поставил наши альбомы в CSS3 горизонтальный аккордеон.

СМОТРЕТЬ ДЕМО                СКАЧАТЬ ИСХОДНИК


 

Шаг 1. HTML

В начале, необходимо подготовить разметку для наших альбомов (чистый CSS3 аккордеон):

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>

Это простое определение списка с названиями альбомов и маленькие эскизы альбомов. А теперь, давайте подготовим разметку для нашего потока изображений.

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

Шаг 2. CSS

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

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 / изображений 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}

Шаг 3. JS

Теперь, давайте рассмотрим наличие кодов. Первый файл - это наш скрипт галереи:

JS / изображения flow.js

Этот файл доступен в исходнике. Наш следующий файл:

JS / script.js

01

// set another album

02

function setAlbum(i) {

03

    imf.create('imageFlow', 'xml/set'+i+'.xml', 0.85, 0.20, 1.5, 10, 5, 7);

04

}

05

 

06

// main initialization

07

document.addEventListener('DOMContentLoaded', function() {

08

    // set first album

09

    setAlbum(1);

10

 

11

    // attaching 'click' event listener to '.sets'

12

    [].forEach.call( document.querySelectorAll('.sets'), function(el) {

13

        el.addEventListener('click', function(e) {

14

            imf.reinit();

15

            setAlbum(e.currentTarget.id);

16

        }, false);

17

    });

18

});

 

Как вы можете видеть - это очень маленький и легкий сценарий. Основная идея - присоединить переключатель события (в нашем аккордеон). И, когда посетитель нажмет на определенный альбом, будет загружаться определенный  XML-файл со списком изображений (выбранного альбома).

Шаг 4. XML

Наконец, мы должны подготовить три XML-файлы: предопределенные списки наших альбомов.

xml/set1.xml

01

02

<bank>

03

    <img>

04

        <src>photos/1.jpg</src>

05

        <title>Image 1</title>

06

        <caption>Thailand #1</caption>

07

    </img>

08

    <img>

09

        <src>photos/2.jpg</src>

10

        <title>Image 2</title>

11

        <caption>Thailand #1</caption>

12

    </img>

13

    <img>

14

        <src>photos/3.jpg</src>

15

        <title>Image 3</title>

16

        <caption>Thailand #1</caption>

17

    </img>

18

    <img>

19

        <src>photos/4.jpg</src>

20

        <title>Image 4</title>

21

        <caption>Thailand #1</caption>

22

    </img>

23

</bank>

 

xml/set2.xml

01

<?xml version="1.0" ?>

02

<bank>

03

    <img>

04

        <src>photos/5.jpg</src>

05

        <title>Image 5</title>

06

        <caption>Thailand #2</caption>

07

    </img>

08

    <img>

09

        <src>photos/6.jpg</src>

10

        <title>Image 6</title>

11

        <caption>Thailand #2</caption>

12

    </img>

13

    <img>

14

        <src>photos/7.jpg</src>

15

        <title>Image 7</title>

16

        <caption>Thailand #2</caption>

17

    </img>

18

    <img>

19

        <src>photos/8.jpg</src>

20

        <title>Image 8</title>

21

        <caption>Thailand #2</caption>

22

    </img>

23

</bank>

 

xml/set3.xml

01

<?xml version="1.0" ?>

02

<bank>

03

    <img>

04

        <src>photos/9.jpg</src>

05

        <title>Image 9</title>

06

        <caption>Thailand #3</caption>

07

    </img>

08

    <img>

09

        <src>photos/10.jpg</src>

10

        <title>Image 10</title>

11

        <caption>Thailand #3</caption>

12

    </img>

13

    <img>

14

        <src>photos/11.jpg</src>

15

        <title>Image 11</title>

16

        <caption>Thailand #3</caption>

17

    </img>

18

    <img>

19

        <src>photos/12.jpg</src>

20

        <title>Image 12</title>

21

        <caption>Thailand #3</caption>

22

    </img>

23

</bank>

 

Вот и все!


СМОТРЕТЬ ДЕМО                     СКАЧАТЬ ИСХОДНИК


Источник урока

Категория: CSS//HTML//JS | Просмотров: 639 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди