Вступление
Когда речь заходит о дизайне, существует одна компания, которую невозможно не вспомнить. Это компания Apple - каждый продукт у них это результат работы команды дизайнеров. Сайт этой компании также всегда привлекал внимание.
В этом уроке мы сделаем галерею - слайдшоу "а ля" Apple. Примерно такая же используется на сайте Apple для представления продуктов компании. Для создания нам не понадобится PHP или база данных.
ШАГ 1 – XHTML
Давайте подробнее взглянем на XHTML разметку:
<div id="main">
<div id="gallery">
<div id="slides">
<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>
</div>
<div id="menu">
<ul>
<li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>
</div>
</div>
</div>
Идея очень проста - существует два главных контейнера DIV - один с id=”menu” содержит миниатюры, второй “slides” содержит непосредственно слайды.
Для добавления нового слайда необходимо просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но Вы можете использовать и другие форматы.
Вы также можете вставлять любой HTML-код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке.
Очень важно, чтобы у слайдов были прописаны высота и ширина - они используется jQuery для определения зоны прокрутки.
Также обратите внимание на элементы миниатюр LI. Первому присвоен класс fbar для отображения вертикальной разделяющей полосы. Другим элемента присвоен класс menuItem - и они используются в качестве кнопок управления слайдшоу.
Давайте перейдем к следующему шагу.
Шаг 2 – CSS
Давай взглянем на нашу таблицу стилей.
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Page reset */
margin:0px;
padding:0px;
}
body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}
/* Gallery styles */
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:920px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:400px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:none;
}
В этой таблице стилей мы использовали несколько CSS3-свойств:
* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают только в Safari, Chrome и Firefox на данный момент.
Теперь пришло время магииjQuery.
ШАГ 3 – jQuery
Нам понадобится следующий код:
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
});
Главная идея заключается в том в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места расположиться друг за другом.
При нажатии на миниатюру, скрипт просчитывает какой слайд показать и прокручивает их с помощью присвоения отрицательного значения отступа с помощью метода animate.
Всего 40 строк кода и наша слайдшоу - галерея готова!
Заключение
Всего три шага нам понадобилось для создания супер красивой галереи в стиле Apple. Она способна украсить любой сайт.