От автора: приветствую вас, друзья. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с интересным плагином jQuery сетка, который поможет вам организовать сетку изображений как в Facebook*, создав компактную jQuery галерею фотографий, как в Facebook*.
Итак, у вас есть много фотографий, к примеру, освещающих некоторое событие. Вы хотите поделиться ими с другими, но вот беда — места на странице маловато. Как бы сделать так, чтобы показать часть фотографий, скрыв при этом остальные на предпросмотре, но сделав их доступными в модальном окне? Выход есть — нам поможет плагин Images Grid, который сделает галерею фотографий в виде сетки, примерно так, как это делается в социальных сетях. Давайте попробуем организовать jQuery сетку для галереи Facebook*.
Зайдите на официальную страницу плагина jQuery сетки и скачайте его архив или просто возьмите нужные файлы из исходников. Подключим их:
1 2 3 |
<link href="css/images-grid.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/images-grid.js"></script> |
Далее нам потребуется контейнер, в который плагин будущей jquery галереи Facebook* поместит нужные нам изображения:
1 |
<div id="gallery"></div> |
Собственно, это практически все, что нам нужно, никакой дополнительной верстки — всю следующую работу за нас сделает плагин jQuery сетки. Остается лишь инициализировать его, обратившись к методу imagesGrid(). В качестве параметров метод принимает массив картинок, которые мы хотим показать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function(){ $('#gallery').imagesGrid({ images: [ '//unsplash.it/1300/800?image=1', '//unsplash.it/1300/800?image=2', '//unsplash.it/1300/800?image=3', '//unsplash.it/1300/800?image=4', '//unsplash.it/1300/800?image=5', '//unsplash.it/1300/800?image=6', '//unsplash.it/1300/800?image=7', '//unsplash.it/1300/800?image=8', '//unsplash.it/1300/800?image=9', '//unsplash.it/1300/800?image=10' ] }); }); |
Готово! Вот что мы увидим на странице — практически галерея Facebook*:
Ну а кликнув по любой из фотографий, мы откроем полноэкранный режим просмотра, где сможем просмотреть все изображения:
Смотрится великолепно, как по мне. Плагин jQuery сетки отработал отлично. Ну а на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
* Признана экстремистской организацией и запрещена в Российской Федерации.