Авторизация

Рубрики блога


Рекомендуем



Последние комментарии

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
27
Окт

jQuery Quote Rotator - простой контент-слайдер + адаптация для информеров Ucoz

рейтинг материал 5.0 (1) | количество просмотров 2597 | количество коментариев 0
Простой контент-слайдер разработанный для показа цитат с fade-эффектом (растворение) анимации через определенный интервал времени.
View demo Download source

Слайдер хоть и предназначался в первую очередь для цитат, подходит для выдачи любой информации с красивым анимационным эффектом. 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>
А что касается HTML-кода, который необходимо вставлять на сайте непосредственно там где будет отображаться слайдер, то он будет изменен к следующему виду:
 <ul id="quotes"> 
<script type="text/javascript" src="http://archie-goodwin.net/informer/9"></script>
 </ul>

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

View demo Download source
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]