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

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

Всегда в теме

Статистика

Онлайн всего: 3

Гостей: 3

Пользователей: 0

Свежий софт

Wrecker
Kaspersky Internet Security 2015

Wrecker
Virtual DJ

Wrecker
SoundForge 11

Wrecker
Alcohol 120

Wrecker
Norton Internet Security 2014

Iron
Loaris Trojan Remover

Рекомендуем

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

12:36

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

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

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

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

Шаг 1. HTML

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

index.html

<dd>

<a href="#tab1">Album1</a>

</dd>

</dl>

<dd>

<a href="#tab2">Album2</a>

</dd>

</dl>

<dd>

<a href="#tab3">Album3</a>

</dd>

</dl>

</div>

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

<div class="title">Loading</div>

<div class="legend">Please wait...</div>

</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:-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));

-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: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));

}

#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: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));

}

И мы также должны стилизовать нашу фото галерею:

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>

Вот и все!

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

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

1
2
3
4
5

Категория: CSS//HTML//JS | Просмотров: 966 | Добавил: Iron | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость

Вход

Регистрация

Читаемое

Категории

CSS//HTML//JS [70]

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

Всегда в теме

Статистика

Свежий софт

Рекомендуем

Поиск

Вход

Читаемое

Категории

Заходи не жди