Анимированная галерея изображений с эффектами и "сеткой"! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryАнимированная галерея изображений с эффектами и “сеткой”!
Дата: 21.06.2013 в 22:05 | Просмотров: 5549

Анимированная галерея изображений с эффектами и “сеткой”!

галерея изображений
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы рассмотрим JQuery плагин галереи изображений. Один из вариантов мы уже рассматривали, в уроке “Мини галерея изображений с автопрокруткой”. Идея состоит в том, что у нас есть галерея изображений, или просто список изображений для которых мы определим количество строк и столбцов, которые будут автоматически выстроены в виде сетки.

Изображения будут меняться с разными эффектами, переходами и задержками. От нас только требуется определить ширину вот этого всего блока с картинками.

Такая галерея будет хорошо работать в качестве фона или декоративного элемента веб-сайта, поскольку мы имеем эффект случайного появление новых картинок и их переходов.

В примере используются изображения талантливого автора Sherman Geronimo-Tan, и распространяются на условиях лицензии Creative Commons Attribution 2.0 Generic (CC BY 2.0).

Основная структура кода

Ниже приведена HTML структура галереи со ссылками и изображениями:

Для вызова плагина, необходимо использовать следующую функцию:

Также, не забудьте подключить другие необходимые скрипты JQuery.

Опции

Для настройки плагина, присутствуют следующие опции:

При определении размера всей галереи (сетки), Вы должны иметь в виду – в блоке галереи должно быть показано изображение меньше, чем то, которое есть в папке на хостинге.

Допустим, у Вас есть список из 50 фотографий и мы определили 5 столбцов и 4 строк. Это позволит создать изображений 20 изображений с 30 меняющимися.

Ознакомьтесь с 5-ю готовыми демонстрационными конфигурациями:

На этом все! И мы имеем довольно привлекательную галерею изображений с красивыми эффектами. Думаю, Вам понравилось. :) Буду рад услышать Ваше мнение в комментариях. Успехов!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Андрей:
      http://adi-shakti.ru/

      Добрый день ! Не удаётся на второй план сделать слайдер, подскажите как решить проблему ?

Добавить комментарий