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

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

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

Детали учебника

Сложность: CSS, HTML, jQuery

Сложность: Средняя

Примерное время выполнения: 30 мин.

скачать исходникидемо

Шаг 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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

Теперь перед тем, как приняться за сам слайдер, добавим на страницу фон. Если вы уже скачали 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%;
}

Шаг 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 http://www.beastpieces.com/-->
</div>

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

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

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

Пора интегрировать Nivo Slider. Начните с перехода на https://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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.nivo.slider.js"></script>

</body>
</html>

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

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

<!--jQuery-->
	<script src="https://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>

Шаг 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;
}

Шаг 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 Slider!

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

Автор: Luke Spoor

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. Ренат

    Есть (не)большие минусы у этого слайдера :(
    1) Если фотографии разного размера — они накладываются друг на друга. Т.е. новая фотография накладывается сверху, а нижняя остается. Это плохо для тех альбомов, где есть «горизонтальные» и «вертикальные» фотографии
    2) Если есть фотография по ширине меньше чем самая широкая из всего альбома — она показывается слева, а не по центру. Хотя думаю, что css’ом можно исправить (не пробовал).

    • Эдуард

      не поленись, сделай фотки одинаковыми! и ноу проблем!

      • Ренат

        ))) ага. Фотограф, например, делает фото 10:15 и, соответственно, 15:10 (горизонтальные и вертикальные фотографии) — мне тогда выкладывать фотки 10:10 ? или, может быть, эйфилеву башню боком наклонить :)

        • Эдуард

          Наклонить башню — это круто!!!
          А вообще я об этом не подумал!
          Извиняюсь!
          Там такой скрипт, что сразу не поймёшь(3 файла или больше)

    • Эдуард

      css-ом не исправишь! Он прописывается в jQwery.

  2. Эдуард

    давно применил
    но ребята, вы молодцы! Если захотеть, то на Ваших бесплатностях можно сделать, мягко говоря, неплохой сайт! Респект!!!

  3. Artem

    Как сделать этот слайдер flexible?

  4. OlegBon

    Спасибо, огромное! Для меня такой слайдер очень актуален.

  5. Эдуард

    Конечно в jQuery!
    Там весь css в коде прописан.
    Надо его менять.

  6. Эдуард

    #slider {
    02.
    position:absolute !important;
    если не секрет, для чего !important;

    • Андрей Кудлай

      Устанавливает приоритет правила. Слайдер генерирует для элемента собственные стили, в частности, относительное позиционирование.
      Указывая !important для правила, мы «говорим» браузеру, что данное свойство приоритетнее, чем прочие, установленные для элемента, и к элементу применяется абсолютное позиционирование.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree