Создаем управление слайдером изображений от Ормана с помощью Nivo. Nivo slider

Дата публикации: 2012-05-28

слайдер изображений

От автора: В этом уроке автор покажет как объединить дизайн Ормана с великолепным плагином Nivo Slider! Что касается кроссбраузерности, то автор протестировал полученный результат в IE7 и старше. Проблем не наблюдалось вообще, кроме как с разделителями заголовка (созданными с помощью тени блока).

Шаг 1: Создаем структуру папок

Чтобы все получалось аккуратно, сначала давайте создадим структуру папок. Создайте три папки под названиями, соответственно, «css», «images» и «js». В папке css будет содержаться таблица стилей. Images – для изображений, а в js будут содержаться плагины jQuery – в данном случае слайдер Nivo!

Шаг 2: Разметка HTML5

Итак, у нас уже есть структура папок, теперь нужен документ html. Создайте его в корне своего проекта. Мы применим простой шаблон HTML5, ссылающийся при этом на библиотеку jQuery, расположенную на Google.

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>

	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>

	<!--jQuery-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Image Slider Controls</title>

</head>

<body>

</body>

</html>

Шаг 3: Создаем общие стили

Начнем с нескольких стилей сброса:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration:none;
}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

a {

text-decoration:none;

}

Теперь перед тем, как приняться за сам слайдер, добавим на страницу фон. Если вы уже скачали PSD, то увидите, что в нем есть слой с радиальным градиентом, предполагающим легкое выделение-подсветку. Мы создадим его, получив воспроизводимый шаблон, чуть более светлый, чем PSD. Применив фон, используем несколько вложенных теней блока над тэгом html, чтобы постараться продублировать свет в центре.

html {
	-webkit-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	-moz-box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);
	box-shadow:
		inset 250px 250px 250px rgba(0,0,0,.25),
		inset -250px -250px 250px rgba(0,0,0,.25);

	width:100%;
	height:100%;
}

body {
	background:url(../images/bg.jpg) repeat;

	font-size:100%;
}

html {

-webkit-box-shadow:

inset 250px 250px 250px rgba(0,0,0,.25),

inset -250px -250px 250px rgba(0,0,0,.25);

-moz-box-shadow:

inset 250px 250px 250px rgba(0,0,0,.25),

inset -250px -250px 250px rgba(0,0,0,.25);

box-shadow:

inset 250px 250px 250px rgba(0,0,0,.25),

inset -250px -250px 250px rgba(0,0,0,.25);

width:100%;

height:100%;

}

body {

background:url(../images/bg.jpg) repeat;

font-size:100%;

}

Шаг 4: Структура слайдера

Теперь можно наконец заняться слайдером! Nivo Slider – работа Гилберта Пеллегрома (Gilbert Pellegrom) и Майкла Райта (Michael Wright), вместе известных как Dev7studios, являющихся коллегами Ормана (Orman).

Он позволяет нам создать слайдер с минимально возможным количеством разметки. Все что нужно – это создать div с любым ID на ваш вкус; я применяю в данном случае «slider» и класс «nivoSlider». Тогда вам нужно всего лишь поместить свои изображения внутрь div’а, вот и все!

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>

	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>

<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards"> <!--image courtesy of //www.beastpieces.com/-->
</div>

	<!--jQuery-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Image Slider Controls</title>

</head>

<body>

</div>

</body>

</html>

Шаг 5: Выравниваем слайдер по центру

Далее мы отцентрируем свой слайдер в середине страницы; если вы читали мой последний учебник, то в деталях осведомлены, как этого добиться. Если требуется больше информации, прочтите о приемах CSS эту статью.
Еще в продолжение мы добавили к слайдеру несколько теней блока, помня при этом о префиксах браузеров. Обратите внимание, что добавлено также немного CSS, нужного для работы nivoSlider.

#slider {
	position:absolute !important;
	top:50%;
	left:50%;

	width:650px;
    height:350px;

    margin-top:-175px;
    margin-left:-325px;

	-webkit-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	-moz-box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
	box-shadow:
		0px 0px 5px rgba(0,0,0,.5),
		0px 0px 20px rgba(0,0,0,.2);
}

.nivoSlider img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}

#slider {

position:absolute !important;

top:50%;

left:50%;

width:650px;

height:350px;

margin-top:-175px;

margin-left:-325px;

-webkit-box-shadow:

0px 0px 5px rgba(0,0,0,.5),

0px 0px 20px rgba(0,0,0,.2);

-moz-box-shadow:

0px 0px 5px rgba(0,0,0,.5),

0px 0px 20px rgba(0,0,0,.2);

box-shadow:

0px 0px 5px rgba(0,0,0,.5),

0px 0px 20px rgba(0,0,0,.2);

}

.nivoSlider img {

position:absolute;

top:0;

left:0;

display:none;

}

.nivoSlider a {

border:0;

display:block;

}

.nivo-slice {

display:block;

position:absolute;

z-index:5;

height:100%;

}

.nivo-box {

display:block;

position:absolute;

z-index:5;

}

Шаг 6: Скачиваем Nivo

Пора интегрировать Nivo Slider. Начните с перехода на //themeisle.com/plugins/nivo-slider/ и скачивания плагина jQuery. Скачав и распаковав, скопируйте файл jquery.nivo.slider.js в свою папку js, созданную в Шаге 1.

Далее нам нужно сделать ссылку на этот файл внутри своего документа html.

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">

	<!--Title-->
	<title>Image Slider Controls</title>

	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

</head>
<body>

<div id="slider" class="nivoSlider">
	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">
</div>

	<!--jQuery-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Image Slider Controls</title>

</head>

<body>

</div>

</body>

</html>

Шаг 7: Подключаем плагин

Теперь, когда плагин скачан и на него сделана ссылка, нам понадобится подключить его к слайдеру, а также определить несколько дополнительных параметров. За подробностями всех доступных опций обратитесь к документации Nivo.

<!--jQuery-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

	<script type="text/javascript">
		$(window).load(function() {
		    $('.nivoSlider').nivoSlider({
		    	effect: 'sliceDown',
		    	directionNavHide: false,
		    	captionOpacity: 1,
		    	controlNav: false
		    });
		});
	</script>

</body>
</html>

$(window).load(function() {

$('.nivoSlider').nivoSlider({

effect: 'sliceDown',

directionNavHide: false,

captionOpacity: 1,

controlNav: false

});

</script>

</body>

</html>

Шаг 8: Где же титры?

Мы закончили свой слайдер! Но подождите, что там с тестом? Слайдер Nivo создает надписи из тэга заголовка title наших изображений, затем применяет ID/классы, чтобы можно было назначать им стили на свой вкус! Мы создадим фон титров с помощью градиентов CSS3. Обратите внимание, что в качестве фона указателей навигации также применяется фон заголовка, так как это весьма логичный способ их создания.

	<img src="images/image1.jpg" alt="Slider Image 1" title="Fauna Friends Japanimals Posters">
	<img src="images/image2.jpg" alt="Slider Image 2" title="AIGA SOF Letterpress Cards">

.nivo-caption {
	position:absolute;
	left:75px;
	bottom:29px;

	width:498px;
	padding-top:13px;
	padding-bottom:13px;

	z-index:8;

	border:1px solid #000;
	border-left-color:rgba(0,0,0,.5);
	border-right-color:rgba(0,0,0,.5);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.15),
		0px 1px 3px rgba(0,0,0,.7);

	background: -webkit-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -moz-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	background: linear-gradient(top,  rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.nivo-caption p {
	margin:0;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}

.nivo-caption {

position:absolute;

left:75px;

bottom:29px;

width:498px;

padding-top:13px;

padding-bottom:13px;

z-index:8;

border:1px solid #000;

border-left-color:rgba(0,0,0,.5);

border-right-color:rgba(0,0,0,.5);

-webkit-box-shadow:

inset 0px 1px 0px rgba(255,255,255,.15),

0px 1px 3px rgba(0,0,0,.7);

-moz-box-shadow:

inset 0px 1px 0px rgba(255,255,255,.15),

0px 1px 3px rgba(0,0,0,.7);

box-shadow:

inset 0px 1px 0px rgba(255,255,255,.15),

0px 1px 3px rgba(0,0,0,.7);

background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);

background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);

background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);

background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);

background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

}

.nivo-caption p {

margin:0;

font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;

font-size:14px;

font-weight:bold;

color:#fff;

text-align:center;

text-shadow:0px -1px 0px #000;

}

.nivo-caption a {

display:inline !important;

}

.nivo-html-caption {

display:none;

}

Шаг 9: Заканчиваем

Мы почти закончили, нам нужно только добавить кнопки «Next» («Следующий») и «Previous» («Предыдущий»). До этого момента мы как можно больше старались полагаться на css, но теперь создадим эти стрелки-указатели с помощью изображений с прозрачным фоном.

.nivo-directionNav a {
	position:absolute;
	bottom:30px;
	z-index:9;
	cursor:pointer;
	text-indent:-9999px;

	width:45px;
	height:39px;

	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
}
.nivo-prevNav {
	left:75px;
	background-position:0 0;

	box-shadow:
		1px 0px 0px rgba(255,255,255,.2),
		2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
	right:77px;
	background-position:-45px 0px;

	box-shadow:
		-1px 0px 0px rgba(255,255,255,.2),
		-2px 0px 0px rgba(0,0,0,.4);
}

.nivo-directionNav a {

position:absolute;

bottom:30px;

z-index:9;

cursor:pointer;

text-indent:-9999px;

width:45px;

height:39px;

background-image:url(../images/arrows.png);

background-repeat:no-repeat;

}

.nivo-prevNav {

left:75px;

background-position:0 0;

box-shadow:

1px 0px 0px rgba(255,255,255,.2),

2px 0px 0px rgba(0,0,0,.4);

}

.nivo-nextNav {

right:77px;

background-position:-45px 0px;

box-shadow:

-1px 0px 0px rgba(255,255,255,.2),

-2px 0px 0px rgba(0,0,0,.4);

}

Заключение

Итак, мы сделали это! Взяли другой дизайн Ормана и кодировали его – на этот раз при помощи великолепного плагина Nivo Slider!

Что касается кроссбраузерности, то я протестировал его в IE7 и старше. Проблем не будет вообще, кроме как с разделителями заголовка (созданными с помощью тени блока). Если вы заинтересованы в более широкой поддержке браузеров, прочтите этот пост о лечении проблем CSS3 в более старых браузерах.

Автор: Luke Spoor

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки: nivo, слайдер