Сегодня мы хотим поделиться с вами jQuery-плагином для создания адаптивной анимированной галереи. Идея состоит в том, чтобы для набора изображений определить количество столбцов и строк, которые построят изображения в виде сетки.
Остальные изображения будут появляться с различной анимацией и задержкой. При помощи дополнительных настроек, мы можем определить, как сетка должна быть построена для различной ширины экрана. Такой плагин может быть использован как фон или декоративный элемент веб-сайта.
Мы также используем следующие дополнительные плагины jQuery:
Красивые изображения в галереи от 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(); });
Не забудьте подключить другие скрипты, которые необходимы.
Доступны следующие параметры:
// количество строк rows : 4, // количество столбцов columns : 10, // строки/столбцы для различной ширины экрана // например, w768 - это для экрана уже 768 пикселей 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 спрятанными, которые должны будут появляться по время анимации.
Надеюсь, вам понравилось!
Источник© 2008 - 2024 Все права защищены
Новый комментарий