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>
|
Вот и все!
СМОТРЕТЬ ДЕМО СКАЧАТЬ
ИСХОДНИК
Источник
урока
| 
