Archie Goodwin

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

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

Минимальные стилевые настройки, CSS, необходимые для плагина, стараемся забросить между тегами head:

<style type="text/css" media="screen"> 
 #quotes { 
 list-style: none; 
 width: 300px; /* ширина инфомера */ 
 } 
 #quotes blockquote { list-style: none; margin: 0;} 
 </style> 

HTML конструкция для этого контент-слайдера предельно проста, что лишний раз подчеркивает удобство плагина:

<ul id="quotes"> 
<li>первый слайд</li> 
<li>второй слайд</li> 
<li>третий слайд</li> 
<li>четвертый слайд</li> 
<li>пятый слайд</li> 
 </ul> 
 

Как видите, состоит она из простого списка, это позволяет расширять количество слайдов до любого числа, а также вставлять в содержимое слайда все что угодно - картинку, ссылку или пусть пол статьи - работать будет со всеми html элементами без исключения.

Осталось лишь добавить ссылку на javascript файл и функцию вызова

<script src="/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> 
 $(document).ready(function() { 
 $('ul#quotes').quote_rotator(); 
 }); 
</script>

Файлик прилагается к посту, его заливаете к себе на сайт в корень, а если не в корень сайта, то тогда необходимо будет поправить ссылку на файл.

Напоминаю, что скрипт написан на jQuery, поэтому на странице также необходимо подключить библиотеку не меньше чем 1.4 версии.

В самом js-файле можно изменять настройки слайдера открыв его с помощью блокнота. Среди настроек параметры времени задержки, то есть скорости перелистывания, а также будет ли пауза перелистывания при наведении курсора:

$.quote_rotator = { 
defaults: { 
rotation_speed: 10000, 
pause_on_hover: true 

Скорость прописывается в миллисекундах , максимальное значение параметра - 20000 (20 сек.). Параметр задержки скрипта при наведении мышкой выставляется значением истина / ложь (true / false) .

Адаптация для информеров Ucoz

На странице демо-просмотра как раз показано применение слайдера к информерам юкоз, а именно информер случайных фотографий.

Прежде всего, необходимо создать информер, для этого в админ-панели сайта переходим в раздел информеры и жмем на кнопочку "Создать информер".

Имя для информера может быть любое, это не существенно, выбираем интересующий раздел сайта - в нашем примере "Фотоальбомы". В настройках информера, где "Способ сортировки" ставим "В случайном порядке", "Количество колонок" - 1, Количество материалов - 10 (такое значение по умолчанию, чтобы уменьшить вес и максимально сохранить интерактивность, рекомендую снизить количество до 5). Когда все настройки информера заполнены, жмем кнопочку "Создать"

Затем с помощью кнопки "Управление дизайном информера", заходим в редактор кода и добавляем к HTML конструкции информера тег li:

<li> Весь код информера </li>

 <ul id="quotes"> 
<script type="text/javascript" src="http://archie-goodwin.net/informer/9"></script>
 </ul>

Где адрес сайта http://archie-goodwin.net/ нужно будет заменить на свой, а 9 - это порядковый номер информера (id), его также нужно будет изменить на порядковый номер вашего информера.