Топ плагинов jQuery. Плагин jQuery сетка изображений

Топ плагинов jQuery. Плагин jQuery сетка изображений

От автора: приветствую вас, друзья. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с интересным плагином jQuery сетка, который поможет вам организовать сетку изображений как в Facebook*, создав компактную jQuery галерею фотографий, как в Facebook*.

Итак, у вас есть много фотографий, к примеру, освещающих некоторое событие. Вы хотите поделиться ими с другими, но вот беда — места на странице маловато. Как бы сделать так, чтобы показать часть фотографий, скрыв при этом остальные на предпросмотре, но сделав их доступными в модальном окне? Выход есть — нам поможет плагин Images Grid, который сделает галерею фотографий в виде сетки, примерно так, как это делается в социальных сетях. Давайте попробуем организовать jQuery сетку для галереи Facebook*.

Зайдите на официальную страницу плагина jQuery сетки и скачайте его архив или просто возьмите нужные файлы из исходников. Подключим их:

Далее нам потребуется контейнер, в который плагин будущей jquery галереи Facebook* поместит нужные нам изображения:

Собственно, это практически все, что нам нужно, никакой дополнительной верстки — всю следующую работу за нас сделает плагин jQuery сетки. Остается лишь инициализировать его, обратившись к методу imagesGrid(). В качестве параметров метод принимает массив картинок, которые мы хотим показать:

Готово! Вот что мы увидим на странице — практически галерея Facebook*:

Топ плагинов jQuery. Плагин jQuery сетка изображений

Ну а кликнув по любой из фотографий, мы откроем полноэкранный режим просмотра, где сможем просмотреть все изображения:

Топ плагинов jQuery. Плагин jQuery сетка изображений

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

* Признана экстремистской организацией и запрещена в Российской Федерации.

Метки:

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

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