Веб-дизайнеру
Веб-разработчику
Дополнительно
Анимированная галерея изображений с эффектами и “сеткой”!
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы рассмотрим JQuery плагин галереи изображений. Один из вариантов мы уже рассматривали, в уроке “Мини галерея изображений с автопрокруткой”. Идея состоит в том, что у нас есть галерея изображений, или просто список изображений для которых мы определим количество строк и столбцов, которые будут автоматически выстроены в виде сетки.
Изображения будут меняться с разными эффектами, переходами и задержками. От нас только требуется определить ширину вот этого всего блока с картинками.
Такая галерея будет хорошо работать в качестве фона или декоративного элемента веб-сайта, поскольку мы имеем эффект случайного появление новых картинок и их переходов.
В примере используются изображения талантливого автора , и распространяются на условиях лицензии .
Основная структура кода
Ниже приведена 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="/web-developer/jquery/images/medium/1.jpg" alt="Whatever works"/></a></li> <li><a href="#"><img src="/web-developer/jquery/images/medium/2.jpg" alt="Anything else"/></a></li> <!-- ... --> </ul> </div> |
Для вызова плагина, необходимо использовать следующую функцию:
|
1 2 3 4 5 |
$(function() { $( '#ri-grid' ).gridrotator(); }); |
Также, не забудьте подключить другие необходимые скрипты 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 62 63 64 65 66 67 68 69 70 |
// количество строк 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 }, // количество одновременно меняющихся элементов // random || [количество, число] 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, // показ анимации animEasingOut : 'linear', animEasingIn : 'linear', // изменение эффекта каждые 3 секунды // но не менее < 300 ms interval : 3000, // false tесли без анимации // использовать false, если "onhover" - true slideshow : true, // если true, то эффект будет показан при наведении onhover : false, // ids элементов, которые не должны вообще меняться nochange : [] |
При определении размера всей галереи (сетки), Вы должны иметь в виду – в блоке галереи должно быть показано изображение меньше, чем то, которое есть в папке на хостинге.
Допустим, у Вас есть список из 50 фотографий и мы определили 5 столбцов и 4 строк. Это позволит создать изображений 20 изображений с 30 меняющимися.
Ознакомьтесь с 5-ю готовыми демонстрационными конфигурациями:
Пример 1:случайная анимация / 55% ширина / 3 секунды между переключением;Пример 2:анимация “fadeInOut” / 100% ширина / одновременно переключается 1 изображение / 600 мс между переключением;Пример 3:случайная анимация / 100% ширина / одновременное переключение 2-х изображений / 2 секунды между переключением;Пример 4:случайная анимация / 55% ширина / 3 секунды между переключением / элементы 1,2,3 и 4 не переключаются;Пример 5:анимация “rotateBottom” / 55% ширина / без автоматического переключения / эффект при наведении.
На этом все! И мы имеем довольно привлекательную галерею изображений с красивыми эффектами. Думаю, Вам понравилось. 
Буду рад услышать Ваше мнение в комментариях. Успехов!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://adi-shakti.ru/
Добрый день ! Не удаётся на второй план сделать слайдер, подскажите как решить проблему ?