Слайдер, он же фотогалерея и просто ротатор картинок, можно встретить почти на каждом сайте или блоге. Зачастую, чтобы встроить слайдер себе на сайт нужно установить плагин или скрипт, который бы менял нужные нам картинки. Я же предлагаю Вам использовать слайдер, который не обременит сайт большим количеством ненужного кода и Вы легко сможете его встроить. Начнем.
Шаг 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?
хочу себе в блог поставить
спасибо заранее
не совсем понял «Плохо, что галерея подгружает тот же рисунок, что выбран. Добавь цикл» ? если есть вариант пиши плз)
Плохо, что галерея подгружает тот же рисунок, что выбран.
Добавь цикл и будет всё ок…
З.Ы. …Тут ещё со времен Сократа
По сугробам был путь накатан…. 😉
Владимир ты молодец, что так замутил и главное это работает.