Софкейз

Давненько я не писал уроков по jQuery. Сегодня мы с вами поговорим про то как сделать небольшую крутилку картинок с тайтлами и даже ссылками. Естественно весь код мы обернем в плагин для jQuery, который я назвал jSimpleSlide! Ну что же, давайте приступим.

Шаг первый. Верстка

Ну во первых нам необходимо подготовить верстку, и стили для неё. У нас будет основной контейнер, внутри него будет еще три: заголовок, сама картинка и кастомная ссылка. У нас должно получится следующие:

<div id="j-simple-slide">
	<div class="j-simple-slide-header">jSimpleSlide</div>
	<div class="j-simple-slide-image"></div>
	<a class="j-simple-slide-link" href="#"></a>
</div>

Ну вот, с версткой мы определились. Надеюсь из названий классов, всем понятно какой элемент за что отвечает! Главному контейнеру мы дали идентификатор j-simple-slide, на него мы будем вешать на плагин.

Шаг второй. Стили

Естественно одной версткой не обойдется, надо еще задать определенные стили для правильного отображения и работы нашей крутилки, ну и конечно же для приведение всего в симпатичный вид. Стили будут следующие:

#j-simple-slide {
	width: 450px; height: 300px;
	margin: 0 auto;
	position: relative;
}

#j-simple-slide .j-simple-slide-image {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 10px #111;
	-moz-box-shadow: 0px 1px 10px #111;
	box-shadow: 0px 1px 10px #111;

	width: 450px; height: 300px;
}

#j-simple-slide .j-simple-slide-image img {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	display: block;
	width: 450px;
	height: 300px;
}

#j-simple-slide .j-simple-slide-header {
	position: absolute; top: 15px; left: 15px; z-index: 10;
	background: rgba(0, 0, 0, .6);
	padding: 5px 10px;
	font-size: 15px; font-family: Ubuntu, Tahoma, Arial; color: #fff;

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

#j-simple-slide a.j-simple-slide-link {
	position: absolute; bottom: 15px; right: 15px; z-index: 10;
	background: #000;
	padding: 3px 5px;
	display: none;
	font-size: 13px; font-family: Ubuntu, Tahoma, Arial; color: #fff; text-decoration: none;

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

#j-simple-slide a.j-simple-slide-link:hover {
	background: #fff;
	color: #000;
}

И так, главный контейнер мы сделали относительной позиции, чтобы внутри него можно было аккуратно слоями расставить элементы как нам необходимо. Все внутренние элементы естественно имеют абсолютное позиционирование. Для симпатичного вида добавили немного прозрачности для заголовка, закругленные углы для всех элементов, и немного тени, используя свойства из CSS3 (border-radius, box-shadow, rgba).

Шаг третий. Яваскрипт (сам плагин)

Ну вот и дошли наши руки до самого плагина. Дабы не писать код кусками, я постараюсь объяснить коротко алгоритм (в коде я постараюсь описать более подробнее). И так, в первую очередь мы мержим(объединяем) настройки плагина с нативными, затем объявляем переменные ссылающиеся на jQuery объекты наших контейнеров слайдера, а также задаём им сразу содержимое. Затем инициализируем интервал на листание картинок, использую при этом анимацию затемнения.

(function($) {
	$.jSimpleSlide = function(container, images, options) {
		// мержим настройки с стандартными
		options = $.extend({
			animateSpeed: 1000, // время анимации
			delay: 4000 // задержка между картинками
		}, options);

		// сохраням тек. позицию и кол. картинок
		var currentPosition = 0;
		var totalImages = images.length;

		// объявляем перемнные ссылающиеся на контейнеры
		var $container = $(container);
		var $headerContainer = $container.find('div.j-simple-slide-header').text(images[0].title);
		var $imageContainer = $container.find('div.j-simple-slide-image');
		var $link = $container.find('a.j-simple-slide-link');

		var $currentImage = $('<img>', {
			src: images[0].src,
			alt: images[0].title
		}).appendTo($imageContainer);

		// устанавливаем первую картинку
		$imageContainer.css('background-image', 'url(' + images[0].src + ')');
		if (typeof images[0].link != 'undefined') {
			$link.attr('href', images[0].link.href).text(typeof images[0].link.text == 'undefined' ? 'Перейти' : images[0].link.text).show();
		}

		// запускаем интервал, на указанное в настройках время
		setInterval(function() {
			// меняем тек. картинку(позицию)
			currentPosition++;
			currentPosition = (totalImages == currentPosition) ? 0 : currentPosition;

			// скрываем заголовок и ссылку
			$headerContainer.hide();
			$link.hide();

			// подменяем у контейнера фон на новую картинку
			$imageContainer.css('background-image', 'url(' + images[currentPosition].src + ')');

			// а текущую постепенно делаем прозрачной
			$currentImage.animate({opacity: 0}, options.animateSpeed, function() {
				// меняем текст заголовка и показываем
				$headerContainer.text(images[currentPosition].title).show();

				// если указанна ссылка, тогда устанавливаем её и показываем
				if (typeof images[currentPosition].link != 'undefined') {
					$link.attr('href', images[currentPosition].link.href).text(
						typeof images[currentPosition].link.text == 'undefined' ? 'Перейти' : images[currentPosition].link.text
					).show();
				}

				// меняем картинку и убираем прозрачность
				$currentImage.attr({
					src: images[currentPosition].src,
					alt: images[currentPosition].title
				}).animate({opacity: 1}, options.animateSpeed);
			});
		}, options.delay);
	}
})(jQuery);

Вот собственно и всё, наш небольшой плагин готов :) И теперь можно запускать его в бой и тестить, все ли правильно работает. Давайте подготовим заглушку для проверки.

Шаг четвертый. Запускаем

Давайте подготовим заглушку для проверки плагина, код у нас будет таким вот:

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jSimpleSlide</title>

	<link type="text/css" rel="stylesheet" href="css/base.css" />
	<link type="text/css" rel="stylesheet" href="css/jsimpleslide.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jsimpleslide.js"></script>
	<script type="text/javascript">
	$(window).ready(function() {
		$.jSimpleSlide('#j-simple-slide', [
			{src: 'images/slide-1.jpg', title: 'Может по пельмешке?', link: {
				href: 'http://www.kungfupanda.com/',
				text: 'Перейти на официальный сайт'
			}},
			{src: 'images/slide-2.jpg', title: 'Планета 51', link: {
				href: 'http://www.youtube.com/watch?v=_4LSg8s5XF4',
				text: 'Смотреть трейлер'
			}},
			{src: 'images/slide-3.jpg', title: 'И имя ему, - Ранго!', link: {
				href: 'http://www.rangomovie.com/intl/ru/',
				text: 'Читать больше про Ранго'
			}}
		]);
	});
	</script>
</head>
<body>
	<div id="wrap">
		<div id="j-simple-slide">
			<div class="j-simple-slide-header">jSimpleSlide</div>
			<div class="j-simple-slide-image"></div>
			<a class="j-simple-slide-link" href="#"></a>
		</div>
	</div>
</body>
</html>

Теперь запускаем заглушку в браузере и любуемся результатом труда. Как вы уже думаю поняли, вызов плагина выглядит так:

$.jSimpleSlide('#j-simple-slide', [
	{src: 'images/slide-1.jpg', title: 'Может по пельмешке?', link: {
		href: 'http://www.kungfupanda.com/',
		text: 'Перейти на официальный сайт'
	}},
	{src: 'images/slide-2.jpg', title: 'Планета 51', link: {
		href: 'http://www.youtube.com/watch?v=_4LSg8s5XF4',
		text: 'Смотреть трейлер'
	}},
	{src: 'images/slide-3.jpg', title: 'И имя ему, - Ранго!', link: {
		href: 'http://www.rangomovie.com/intl/ru/',
		text: 'Читать больше про Ранго'
	}}
]);

Мы привязали плагин к нашему контейнеру, и указали три картинки для крутилки. Аргумент link не обязателен, т.е. его можно не указывать.

Вроде на этом можно и закончить. Вот и получился очередной небольшой урок, хотя не совсем идеальный, имхо :) Но зато первая толковая запись за последние пол года.