Слайдер, он же фотогалерея и просто ротатор картинок, можно встретить почти на каждом сайте или блоге. Зачастую, чтобы встроить слайдер себе на сайт нужно установить плагин или скрипт, который бы менял нужные нам картинки. Я же предлагаю Вам использовать слайдер, который не обременит сайт большим количеством ненужного кода и Вы легко сможете его встроить. Начнем.
Шаг 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овсем недавной я написал статью как создать простой анимированный слайдер с горизонтальной прокруткой, Вам понравится.
Игорь, по другому, там просто автопереключалка слайдов вместо кликов по миниатюрам
не могу понять, http://decoacoustic.ru здесь слайдер сделан так же или как-то по другому? Подскажите ламеру.
Огромное спасибо!
очень интересные слайдеры — и главное просто и качественно
подскажите как сделать такой
http://www.vinovin.ru/site/product/bolgaria/
слайдер на jQuery?
хочу себе в блог поставить
спасибо заранее
не совсем понял «Плохо, что галерея подгружает тот же рисунок, что выбран. Добавь цикл» ? если есть вариант пиши плз)
Плохо, что галерея подгружает тот же рисунок, что выбран.
Добавь цикл и будет всё ок…
З.Ы. …Тут ещё со времен Сократа
По сугробам был путь накатан…. 😉
Владимир ты молодец, что так замутил и главное это работает.