Красивое Apple-галерея в стиле слайд-шоу с помощью CSS & Jquery

27.01.2010   |  

jQuery   |  

Комментарии (9)

Apple-галерея

Сегодня мы будем делать слайд-шоу галерею, аналогичную той, что использует компания Apple на своем сайте для демонстрации своей продукции.
Дизайн галереи сделан мего компанией Apple, как всегда все на высоте, это можно проверить посмотрев демо, кстати источником урока является tutorialzine, а перевод сделан Блогом вебмастера.
И так начинаем делать галерею

demoскачать

Шаг1:  XHTML
Apple галерею очень легко прикрутить к уже работающим сайтам, вам просто нужно изменить несколько строк HTML-кода в коде.

Давайте внимательнее посмотрим на XHTML код:
demo.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="main">
<div id="gallery">
<div id="slides">
<div class="slide"><img src="img/sample_slides/macbook.jpg" alt="" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" alt="" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" alt="" width="920" height="400" /></div>
</div>
<div id="menu">
<ul>
	<li class="fbar">&nbsp;</li>
	<li class="menuItem"><a><img src="img/sample_slides/thumb_macbook.png" alt="" /></a></li>
	<li class="menuItem"><a><img src="img/sample_slides/thumb_iphone.png" alt="" /></a></li>
	<li class="menuItem"><a><img src="img/sample_slides/thumb_imac.png" alt="" /></a></li>
</ul>
</div>
</div>
</div>

Идея проста – вся галерея состоит из двух основных тегов <DIV>  один id=”menu” в нем наше меню (мини слайды), а во втором  id=”slides” включает в себя наши картинки (слайды).

Чтобы добавить новый слайд, вам только нужно добавить новые элементы в обоих контейнерах (<div>). Слайды картинок в контейнер “slides” формата JPG, и миниатюры в меню в “menu”, они являются прозрачными PNG, но вы можете использовать любой тип изображения который вы хотите.

Также каждому слайду можно прикрепить нужную вам ссылку.
Не забывайте указывать высоту (height) и ширину (width) изображений, это является очень важным атрибуты для Jquery.

Шаг2:  CSS
В нашей галерее мы использовали целый ряд специфических свойств CSS3:

box-shadow - делает легкие тени вокруг краев галереи. Чтобы его использовать, нам придется сделает маленькое смещения по X и Y (0 0 здесь), размывания в 3px в данном примере и цвет тени;
border-radius – задаем радиус закругления нижних углов галереи.

К сожалению, эти свойства поддерживаются сейчас только в Safari, Chrome и Firefox.  Но и без этих свойств наша галерея в других браузерах будет выглядеть прекрасно

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

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;
}

Шаг3: jQuery
Теперь настало время для Jquery магии :)
Основной идеей jQuery сценария является цикл по всем слайдам, суммировать их ширины и передать их сумму в контейнер слайдов – DIV с id = “slides”. Поскольку слайды прикреплены по левому краю и имеют достаточно места, они соединяются один друг с другом.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(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 */
});

С трех простых шагов, которые мы создали красивую Apple-галерею в стиле слайд-шоу. Она может быть легко включена в любой сайт простым добавлением нескольких строк кода.

1-studio.de – das Thema Internetagentur und Webdesign ist in letzte Zeit sehr Gross. Webseitengestaltung in Deutschland – перевожу, это одна из лучших Дизайн студий в Германии.

Интересные статьи:

  1. Артём 01.02.2010 22:07

    Извините, Вы немогли бы подробней объяснить, 1)какую именно часть кода из шага3 нужно использовать 2) напишите 1 пример с прикреплённой к слайду ссылкой (чтоб при нажатии переходило на неё)

  2. Webchester 02.02.2010 18:02

    Артём:
    1) Это содержимое файла script.js его редактирувать не нужно. Просто переместите его в корневую папку сайта, или в специальную папку со скриптами (если есть такая).

    Вот слайд без ссылки:
    img src=”img/sample_slides/macbook.jpg” width=”920″ height=”400″/>
    А вот так выглядит со ссылкой:
    a href=”ссылка”>
    img src=”img/sample_slides/macbook.jpg” width=”920″ height=”400″ />

  3. Артём 03.02.2010 13:15

    Спасибо, но всё равно не пойму что не так: добавил HTML-код в код страницы в нужном мне месте, загрузил script.js в корневую папку, шаг2 пропустил из-за того, что у меня опера :) ,в результате получилось сразу 3 слайда идущие один под другим, а ниже мини слайды; без оформления и собственно самой функции переключения слайдов, т.к. все слайды сразу видны:( Может скрипт не сработал?
    P.S. я только недавно начал познавать все эти азы, так что не судите строго:)

  4. Webchester 03.02.2010 14:35

    Да это не подключился скрипт и CSS стили. Нужно чтобы файлы script.js demo.css и demo.html были вместе в одной папке, тогда все заработает.

  5. Артём 03.02.2010 16:09

    Большое спасибо, помогло!

  6. Артём 03.02.2010 17:26

    а возможно сделать автоматичесоке переключение слайда на другой, через определёный промедуток времени, и так покругу все слайды?

  7. Webchester 05.02.2010 13:21

    Можно, но думаю тебе вот такой слайд понравится.

  8. Radik 12.02.2010 14:54

    А в IE7 и IE6 тестировалось! Поставил себе на сайт но с IE6 и 7 не дружить! кто знает как решить? Help!!!

  9. Дмитрий 18.02.2010 22:08

    Начал пилить галерею, чтобы слайд-шоу было на самом деле шоу :) Хочется сделать, чтобы изображения менялись и по клику на thumbnail’е и самостоятельно через заданный промежуток времени…

    Пока получается йухня :(
    Может быть, знатоки дадут пару дельных советов?

Оставь свое мнение:




Подпишись на обновление блога