Топ плагинов jQuery. Плагин jQuery галерея Google

Топ плагинов jQuery. Плагин jQuery галерея Google

От автора: приветствую вас! Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с замечательным jQuery плагином, который позволит вам организовать интересную jQuery галерею, похожую на галерею картинок Google. К тому же данный плагин предлагает нам jQuery сетку. Итак, jQuery галерея и jQuery сетка, начнем.

Итак, сегодня мы работаем с плагином под названием MG Space. Это действительно оригинальный и потрясный плагин, который позволит вам организовать jQuery галерею изображений примерно в том же стиле, что и картинки Google. То есть, у нас есть некоторая базовая картинка, при клике по которой под ней открывается панель с дополнительными картинками. Смотрится очень интересно.

Как обычно, перейдем на страницу плагина и скачаем его архив, после чего подключим необходимые файлы плагина jQuery галерея.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Теперь самое сложное — разметка. Хотя на самом деле ничего сложного здесь, конечно же, нет — просто главное не запутаться, чтобы получилась jQuery сетка. Итак, первым делом нам потребуется общий контейнер, которому мы дадим класс mg-space-init:

Далее нам потребуется внутрь контейнера поместить базовые картинки в блок с классом mg-rows:

Топ плагинов jQuery. Плагин jQuery галерея Google

Осталось дело за малым — после блока базовых картинок разместить блок с классом mg-targets внутрь которого, в свою очередь, помещаются блоки с нужными данными. Количество таких блоков должно соответствовать количеству базовых изображений. Пример полной итоговой верстки вы можете посмотреть в исходниках к статье:

Ну и само собой — вызов метода плагина jQuery галереи — mgSpace:

Клик по базовой картинке теперь должен открывать соответствующую панель с вложенными изображениями.

Топ плагинов jQuery. Плагин jQuery галерея Google

Красота, не так ли? jQuery сетка и jQuery галерея в одном флаконе. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree