Такой компонент может отлично вписаться в качестве фона или декоративного элемента в дизайне веб-сайта, так как у нас есть возможность отображать изображения и применять к ним переходы случайным образом.
Мы воспользуемся следующими дополнительными jQuery-плагинами:
* jQuery Transit для большинства CSS-переходов
* Modernizr для проверки браузерной поддержки соответствующих CSS-параметров
Красивые изображения в данном руководстве были представлены Шерманом Геронимо-Таном (Sherman Geronimo-Tan), и распространяются они под лицензионным соглашением Creative Commons Attribution 2.0 Generic (CC BY 2.0).
HTML-структура будет включать простой неупорядоченный список с анкорными элементами и изображениями:
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<ul>
<li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
<!-- ... -->
</ul>
</div>
Для того чтобы вызвать плагин, просто используйте:
$(function() {
$( '#ri-grid' ).gridrotator();
});
Не забудьте включить другие необходимые скрипты.
Опции
// number of rows
rows : 4,
// number of columns
columns : 10,
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024 : {
rows : 3,
columns : 8
},
w768 : {
rows : 3,
columns : 7
},
w480 : {
rows : 3,
columns : 5
},
w320 : {
rows : 2,
columns : 4
},
w240 : {
rows : 2,
columns : 3
},
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step : 'random',
maxStep : 3,
// prevent user to click the items
preventClick : true,
// animation type
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType : 'random',
// animation speed
animSpeed : 500,
// animation easings
animEasingOut : 'linear',
animEasingIn : 'linear',
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval : 3000
При определении размера сетки вам следует учитывать тот факт, что в сетке у вас будет меньше изображений, чем вы помещаете в список. Давайте предположим, что у вас будет 50 изображений в списке и будут определено 5 колонок и 4 строки. Таким образом, мы получим сетку с 20 изображениями и возможностью переключиться на оставшиеся 30.
Ознакомьтесь с этими демо-файлами с тремя разными конфигурациями:
* Демо 1: Случайные анимации / 55% ширины контейнера / 3 секунды между переключениями
* Демо 2: Анимация fadeInOut / 100% ширины контейнера / переключение 1 изображения за раз / 600 миллисекунд между переключением
* Демо 3: Случайные анимации / 100% ширины контейнера / переключаем максимум 2 изображения за раз / 2 секунды между переключением
Благодарим Джесси Чейза за предоставленную нам идею и вдохновение.
Надеемся, что данное руководство окажется вам полезным.
Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.