Плагин CJ Flashy Slide Show позволяет организовать слайдшоу с впечатляющими анимационными эффектами, не уступающими эффектам, сделанным с помощью flash. Всего в плагине реализовано семь типов анимации. В дополнении к этому, плагин обладает рядом настроек, с помощью которых эффекты могут быть подкорректированы.
Подключение
Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же js-файл плагина: (его можно скачать на официальной странице):
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="jquery.cj-flashy-slideshow.js"~gt~~lt~/script~gt~
Плагин необходимо применять к следующей конструкции:
~lt~div id="example"~gt~
~lt~img src="image_a.jpg" /~gt~
~lt~img src="image_b.jpg" /~gt~
~lt~img src="image_c.jpg" /~gt~
~lt~/div~gt~
Чтобы слайдшоу отображалось правильно, элементы данной конструкции должны обладать следующими css-правилами:
#example {
position: relative;
display: block;
/* ширина и высота могут быть и других размеров, но они должны быть фиксированы */
width: 250px;
height: 150px;
overflow: hidden;
}
Превратим эту конструкцию в слайдшоу:
$('#example').cjFlashySlideShow();
В данном примере указаны три изображения, которые будут участвовать в слайдшоу, но вообще, количество изображений не ограничено.
Для корректного отображения изображений, необходимо, чтобы их оригинальные размеры совпадали с размером, содержащего их блока (к которому собственно и применяется плагин).
Информация
- Размер плагина ~20k (несжатый js)
- Официальная страница
- Кроссбраузерный (работает во всех современных браузерах)
Плагин обладает несколькими настройками. Однако, многие настройки могут действовать на одни эффекты и не действовать на другие. К сожалению, в оригинальной документации это не отражено, а проверять каждую настройку в каждом режиме весьма утомительно. Поэтому, многих подробностей здесь нет и в случае необходимости, вам придется проверять особенности работы той или иной настройки на требуемом эффекте самостоятельно.
Похожая ситуация обстоит и со значениями по умолчанию — на разных эффектах они могут различаться. При этом, в оригинальной документации указано только по одному значению по умолчанию. Эти значения будут указаны и здесь.
↓ название :типы значений (значение по умолчанию)
Определяет количество блоков по горизонтали, которые участвуют в анимации.
В документации указано, что по умолчанию это значение зависит от ширины изображений. Однако, как показывает практика оно может отличаться на разных эффектах. Например в эффекте по умолчанию, эта величина равна 12.
// ------- Работа со свойством xBlocks ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({xBlocks:5});
yBlocks:integer($(element).height()/100)
Определяет количество блоков по вертикали, которые участвуют в анимации.
В документации указано, что по умолчанию это значение зависит от ширины изображений. Однако, как показывает практика оно может отличаться на разных эффектах. Например в эффекте по умолчанию, эта величина равна 3.
// ------- Работа со свойством yBlocks ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({yBlocks:5});
Задает минимальные размеры для вспомогательных элементов, участвующих в анимации.
// ------- Работа со свойством minBlockSize ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({minBlockSize:5});
Этот параметр задает период переключений слайдов (в миллисекундах).
// ------- Работа со свойством delay ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({delay:5000});
Определяет направление движения вспомогательных элементов при выполнении анимации. Возможные значения: top, topleft, topright, left, bottom, bottomleft, bottomright, right, random, none. Однако, как показывает практика, не на всех эффектах действуют любые из вышеперечисленных значений.
// ------- Работа со свойством direction ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({direction:'left'});
Определяет, будут ли использоваться css-правила круглых углов элементов. Возможные значения
'normal' и
'rounded'. Как показывает практика, значение данного свойства работает не на всех эффектах.
// ------- Работа со свойством style ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({style:'rounded'});
Если включить это свойство, то в момент переключения слайдов, закрываемый слайд будет исчезать с уменьшением прозрачности.
// ------- Работа со свойством translucent ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({translucent:true});
Если это свойство включено, то выполнения анимации различными вспомогательными элементами происходит не синхронно, а случайно.
// ------- Работа со свойством sloppy ---------
// при установке плагина на элемент
$('selector').cjFlashySlideShow({sloppy:true});