jShowOff - плагин jQuery для слайдшоу

jShowOff - это плагин jQuery, который создает модуль для демонстрации контента. В основу его работы положено создание слайдов из элементов наследников (например, <li>) в контейнере (например, <ul>) для которого вызывается .jshowoff(). Он сменяет слайды. При этом процесс показа можно настроить с помощью различных опций, а на слайдах использовать различный контент, в том числе и ссылки.

 

Необходимые файлы

  1. Библиотека jQuery (1.3+)
  2. jquery.jshowoff.min.js

Для базового функционирования достаточно включения выше названных файлов на странице, создания необходимой разметки и вызова метода. Можно использовать стили по умолчанию (jshowoff.css) из демонстрации. Примечание: исходные файлы плагина содержатся  на github.com/ekallevig/jShowOff.

 

Как использовать

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

<div id="features">
	<div><p>Это слайд!</p></div>
	<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">		
	$(document).ready(function(){ $('#features').jshowoff(); });
</script>

 

Опции

jShowOff имеет несколько опций для настройки.  Для использования опций нужно передать объект методу .jshowoff():

$('#features').jshowoff({ speed:1500, links: false }); });

 

Опция Тип Значение по умолчанию Описание
animatePause boolean true Определяет использование анимации текста 'пауза' при включении паузы.
autoPlay boolean true Определяет автоматическое проигрывание.
changeSpeed integer 600 Скорость перехода в миллисекундах.
controls boolean true Определяет создание и вывод элементов управления (старт/пауза, дальше, предыдущий).
controlText object { play:'Play', pause:'Pause', previous:'Previous', next:'Next' } Текст для элементов управления (старт/пауза, предыдущий, следующий).
cssClass string true Добавляет дополнительный пользовательский класс к контейнеру .jshowoff.
effect string 'fade' Тип эффекта перехода: 'fade', 'slideLeft' или 'none'.
hoverPause boolean true Определяет остановку проигрывания при нахождении курсора мыши над контейнером.
links boolean true Определяет создание и вывод цифровых ссылок на каждый слайд.
speed integer 3000 Время показа каждого слайда в миллисекундах.

Живой просмотр

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^