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

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

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

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

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

<link href="css/images-grid.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/images-grid.js"></script>

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

<div id="gallery"></div>

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

$(function(){
	$('#gallery').imagesGrid({
		images: [
			'https://unsplash.it/1300/800?image=1',
			'https://unsplash.it/1300/800?image=2',
			'https://unsplash.it/1300/800?image=3',
			'https://unsplash.it/1300/800?image=4',
			'https://unsplash.it/1300/800?image=5',
			'https://unsplash.it/1300/800?image=6',
			'https://unsplash.it/1300/800?image=7',
			'https://unsplash.it/1300/800?image=8',
			'https://unsplash.it/1300/800?image=9',
			'https://unsplash.it/1300/800?image=10'
		]
	});
});

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

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

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

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

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree