9 Квітень 2012
2 445
Рубрика: код

Простое слайдшоу: jquery.slowShow v 1.0 b

Простой js-скрипт для создания слайдшоу.

Помните, я как-то предлагал вам скрипт jquery.slowShow для организации слайдшоу на вашем сайте? Он был очень прост в настройке и работе. Но я решил его ещё упростить и доработать, т.к. он мне не нравился.

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

В нужное место вы вставляете блок с классом slow_show и в нём html-коды фотографий с описаниями, код очень прост:

<div class="slow_show">
<img src="/downloads/03.jpg" title="Куча-прекуча подарков!" />
<img src="/downloads/04.jpg" title="Рельсы уходят вдаль." />
<img src="/downloads/05.jpg" title="Тоже подарок, но только один." />
</div>

Дальше скрипт автоматически генерирует слайдшоу и показывает нам только первое фото, а под ним его описание. Описание берётся из атрибута title. По клику фото меняется на следующее.

В верхнем правом углу фотографии появится меню, где активный элемент будет выделен серым. Для управления не используются никакие картинки, всё сделано слоями на css.

Визуально это выглядит так:

Настройка

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

<link rel="stylesheet" href="/js/slideshow.css">
<script src="/js/slideshow.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

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

Демо и скачать

Посмотреть скрипт в работе можно здесь: jquery.slowShow.

А скачать скрипт можно тут:

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