Когда речь заходит о дизайне нельзя не вспомнить такую каомпанию как Apple. Так вот речь пойдет как раз о очень симпотичном слайдере , примерно такой же установлен на сайте Apple. С некоторыми лишь отличиями ,например мы не будем использовать базу данных и php. Шаг 1 – XHTML
Давайте посмотрим на XHTML разметку:
Code
<div id="main">
<div id="gallery">
<div id="slides">
<div><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>
</div>
<div id="menu">
<ul>
<li> </li><li><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>
</div>
</div>
</div>
Идея проста 2 контейнера DIV - один с id=”menu” содержит миниатюры, второй с id=“slides” содержит слайды. Для добавления нового слайда понадобится всего лишь просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но можете использовать и любые другие другие форматы.
Также можете вставлять любой HTML код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке. Крайний правый слайд в нашей демо так и сделан, так что для вас не составит особого труда это сделать.
Важно, прописать у слайдов высоту и ширину - они используется jQuery для определения зоны прокрутки.
Шаг 2 – CSS
Code
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;
}
/* The styles below are only necessary for the demo page */
h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}
h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
position:absolute;
right:0;
text-transform:uppercase;
top:15px;
}
#main{
/* The main container */
margin:15px auto;
text-align:center;
width:920px;
position:relative;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
p{
padding:10px;
text-align:center;
}
В этой таблице стилей мы использовали несколько CSS3 sсвойств: * box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают не во всех браузерах.
Шаг 3 – jQuery
Code
$(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 */
});
Главная идея в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места комфортно расположиться друг за другом. Всего 40 строк кода и наша слайдшоу - галерея готова!
Заключение
Всего три шага нам понадобилось для создания красивой галереи в стиле Apple.
