Слайдшоу CJ Flashy Slide Show

CJ Flashy Slide Show


Описание
Свойства

Плагин CJ Flashy Slide Show позволяет организовать слайдшоу с впечатляющими анимационными эффектами, не уступающими эффектам, сделанным с помощью flash. Всего в плагине реализовано семь типов анимации. В дополнении к этому, плагин обладает рядом настроек, с помощью которых эффекты могут быть подкорректированы.

Подключение

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же js-файл плагина: (его можно скачать на официальной странице):

Плагин необходимо применять к следующей конструкции:

Чтобы слайдшоу отображалось правильно, элементы данной конструкции должны обладать следующими css-правилами:

Превратим эту конструкцию в слайдшоу:

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

Для корректного отображения изображений, необходимо, чтобы их оригинальные размеры совпадали с размером, содержащего их блока (к которому собственно и применяется плагин).

Информация

Размер плагина ~20k (несжатый js)
Официальная страница
Кроссбраузерный (работает во всех современных браузерах)

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

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

↓  название :типы значений (значение по умолчанию)
xBlocks:integer($(element).width()/100)
Определяет количество блоков по горизонтали, которые участвуют в анимации.

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

yBlocks:integer($(element).height()/100)
Определяет количество блоков по вертикали, которые участвуют в анимации.

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

minBlockSize:integer(3)
Задает минимальные размеры для вспомогательных элементов, участвующих в анимации.
delay:integer(3000)
Этот параметр задает период переключений слайдов (в миллисекундах).
direction:string('top')
Определяет направление движения вспомогательных элементов при выполнении анимации. Возможные значения: top, topleft, topright, left, bottom, bottomleft, bottomright, right, random, none. Однако, как показывает практика, не на всех эффектах действуют любые из вышеперечисленных значений.
style:string('normal')
Определяет, будут ли использоваться css-правила круглых углов элементов. Возможные значения 'normal' и 'rounded'. Как показывает практика, значение данного свойства работает не на всех эффектах.
translucent:boolean(false)
Если включить это свойство, то в момент переключения слайдов, закрываемый слайд будет исчезать с уменьшением прозрачности.
sloppy:boolean(false)
Если это свойство включено, то выполнения анимации различными вспомогательными элементами происходит не синхронно, а случайно.