Слайдер, он же фотогалерея и просто ротатор картинок, можно встретить почти на каждом сайте или блоге. Зачастую, чтобы встроить слайдер себе на сайт нужно установить плагин или скрипт, который бы менял нужные нам картинки. Я же предлагаю Вам использовать слайдер, который не обременит сайт большим количеством ненужного кода и Вы легко сможете его встроить. Начнем.

Шаг 1.

Для начала нам понадобиться библиотека jQuery. О том, что такое jQuery и с чем его едят читайте в статье «Введение в jQuery» (еще в процессе написания).

Шаг 2.

Отберем к примеру 7 картинок нужного нам размера (открываем картинку программой Adobe Photoshop выбираем пункт Image -> Image Size и вводим нужную нам ширину и высоту картинки, далее выбираем File -> Save for Web & Devices и сохраняем).

Следующим шагом закачайте Ваши картинки на сервер.

Шаг 3.

Выведем блок с изображением отобранных картинок и их нумерованный список над самим блоком:

<div id="gallery">
	<!-- Список переключателей картинок -->
	<ul id="small">
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti1.jpg">1</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti2.jpg">2</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti3.jpg">3</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti4.jpg">4</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti5.jpg">5</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti6.jpg">6</a></li>
		<li><a href="http://www.profiagro.com.ua/images/zap/zapchasti7.jpg">7</a></li>
	</ul>
	<!-- Галерея -->
	<div id="big">
		<img src="http://www.profiagro.com.ua/images/zap/zapchasti1.jpg" alt="Запчасти купить заказать сервис" />
	</div>
</div>

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

Шаг 4.

Следующий код нам нужно добавить непосредственно между тегами <head>...</head>:

<script type="text/javascript">
$(document).ready(function() {
	$('#small a').click(function(eventObject) {
		$('#big img').hide().attr('src',$(this).attr('href'));
		$('#big img').load(function() {
			$(this).fadeIn(1000);
		});
	eventObject.preventDefault();
	});
});
</script>

Смысл приведенного выше кода заключается в том, что в нумерованном списке мы запрещаем обычное поведение ссылок и заставляем их работать так как нужно нам. А это значит, что при нажатии на любую цифру, путь к отображаемой картинке меняется на тот что скрыт в цифре. Вот и весь фокус

Шаг 5.

В принципе слайдер изображений готов, но придадим ему стилей, чтобы он выглядел эффектно. Для этого откройте свой файл с таблицами каскадных стилей — обычно style.css и в самом низу добавьте следующие строки:

#gallery {
	width: 700px;
	margin: 0;
	padding: 0;
	height: 235px;
	background-image: url(img/loader.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#gallery img {
	border: none;
}
#big {
	width: 700px;
	margin: 5px auto;
}
#small {
	width: 125px;
	margin: 10px auto;
	list-style-type: none;
}
#small li {
	float: left;
	width: 15px;
	height: 18px;
	background: #006634;
	margin-right: 2px;
	text-align: center;
}
#small li:hover {
	background: #006600;
}
#small a {
	text-decoration: none; color: #fff;
}

Шаг 6.

Cовсем недавной я написал статью как создать простой анимированный слайдер с горизонтальной прокруткой, Вам понравится.

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


Комментарии
  1. Александр Григорьевич

    Владимир ты молодец, что так замутил и главное это работает.

  2. Ю

    Плохо, что галерея подгружает тот же рисунок, что выбран.
    Добавь цикл и будет всё ок…

    З.Ы. …Тут ещё со времен Сократа
    По сугробам был путь накатан
    …. 😉

  3. JAH

    не совсем понял «Плохо, что галерея подгружает тот же рисунок, что выбран. Добавь цикл» ? если есть вариант пиши плз)

  4. marius

    Огромное спасибо!
    очень интересные слайдеры — и главное просто и качественно

    подскажите как сделать такой
    http://www.vinovin.ru/site/product/bolgaria/
    слайдер на jQuery?
    хочу себе в блог поставить
    спасибо заранее

  5. Игорь

    не могу понять, http://decoacoustic.ru здесь слайдер сделан так же или как-то по другому? Подскажите ламеру.

  6. JAH

    Игорь, по другому, там просто автопереключалка слайдов вместо кликов по миниатюрам