Все для веб-дизайнера
Анимированная стена миниатюр на jQuery
Наверное каждый из вас не раз встречал полноэкранные галереи в которых происходят анимационные переходы изображений, непосредственно от действий посетителя. Но зачастую такие галереи требуют действий, манипуляций и способов управлений для просмотра всей информации. В данном уроке мы рассмотрим как создать замечательную, анимированную стену миниатюр. Все изображение будут без швов, то есть плотно присоединены друг к другу, это создаст иллюзию сплошной стены изображений.
Данное решение изображений отлично подойдет для личного блога или портфолио, в котором необходимо разместить достаточно много изображений при этом сохранив как можно больше свободного пространства. В демонстрации приводится несколько вариантов стены миниатюр. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо создать html-разметку которая будет содержать просто неупорядоченный список с якорями и изображениями:
|
1 2 3 4 5 6 7 |
<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> |
Теперь нам необходимо вызвать сам плагин, будем это делать с помощью следующей команды:
|
1 2 3 |
$(function() { $( '#ri-grid' ).gridrotator(); }); |
С разметкой мы закончили, теперь приступим к рассмотрению плагина и его параметров. Для данного примера были использованы:
- JQuery Transit для большинства переходов CSS
- Modernizr для проверки браузеров на поддержку свойств CSS
Шаг 2. jQuery
Теперь рассмотрим параметры плагина, которые можно настроить по необходимости на свой вкус:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/ / Число строк 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 }, // Шаг: количество элементов, которые заменены в то же время // Случайные || [some number] Обратите внимание: для проблемы с производительностью, число которых не должно быть> options.maxStep step : 'random', maxStep : 3, // Предотвращения пользователя нажатии пунктов preventClick : true, // Тип анимации // showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || random animType : 'random', // Скорость анимации animSpeed : 500, // Easings анимации animEasingOut : 'linear', animEasingIn : 'linear', / / Объект (ы) будут заменены каждые 3 секунды / / Обратите внимание: для проблемы с производительностью, время не может быть меньше <300 мс interval : 3000 |
При определении размера сетки, вы должны иметь в виду, что если вы хотите, чтобы изображения в правильном количестве располагались. Скажем, у вас есть список из 50 картинок то определяем 5 столбцов и 4 строк. Это позволит создать сеть из 20 изображений, а 30 оставили, которые будут подключаться постепенно.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 08.08.2012 в 09:11, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...