26 Грудень 2011
2 520
Рубрика: код

Простое слайдшоу на js: SlowShow v 0.5b

Как создать простое слайдшоу при помощи javaScript — SlowShow v 0.5b

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

Задача: создать простое в работе и настройке слайдшоу в стиле «поставил и забыл».

Условия: сделать так, чтобы слайдшоу работало на любом хостинге, даже на бесплатном с голым html. Более того, даже на хостинге, где у вас по каким-то причинам нет желания или возможности лезть на ftp. Чтобы сделать полную независимость от хостинга, в том числе от моего, все файлы скрипта будут храниться на bitbucket.org.

Как это работает?

Суть работы проста: подключаем скрипт и в нужном месте создаём блок с фотографиями и определённым классом. Собственно всё. Далее все изображения из блока скрипт прячет и показывает только первое. Справа вверху отображается список картинок. При клике на картинку или на элемент в списке картинка в блоке меняется.

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

Как ставить

Ставить скрипт очень просто. Чтобы поставить и забыть, надо прописать три строчки: подключить jquery, сам скрипт и css. При желании, стили css можно не подключать, а написать свои. Для этого скачайте файл css и поправьте стили на свои. Правда, правим там особо нечего, разве что заменить картинку-переключатель на свою, но это уже дело вкуса.

<link rel="stylesheet" href="http://bitbucket.org/dedushka/slow-show/downloads/slideshow.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://bitbucket.org/dedushka/slow-show/downloads/slideshow.js"></script>

Первая строка — стили, вторая — последняя версия jquery, третья — сам скрипт.

Кстати, если у вас на сайте уже используется jquery, вторую строку удаляем.

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

<div class="slow_show">
<img src="http://bitbucket.org/dedushka/slow-show/downloads/01.jpg" />
<img src="http://bitbucket.org/dedushka/slow-show/downloads/02.jpg" />
<img src="http://bitbucket.org/dedushka/slow-show/downloads/03.jpg" />
<img src="http://bitbucket.org/dedushka/slow-show/downloads/04.jpg" />
<img src="http://bitbucket.org/dedushka/slow-show/downloads/05.jpg" />
</div>

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

Пример SlowShow  в работе можно посмотреть здесь.

А скачать пример работы можно на Google Code.

Credits

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

Да и если используете скрипт, не поленитесь поставить ссылку на мой блог. Хорошее правило хорошего тона.

Желаю успехов и с наступающими!

Тепер я хочу бачити коментарі 4