Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.118.10.141
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Отличный (супер) слайдер в стиле Apple
Сообщение оставлено 31.03.2010 в 16:45:31 | Сообщение #1

Когда речь заходит о дизайне нельзя не вспомнить такую каомпанию как 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.

 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика