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

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

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

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

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

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

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

<div class="container content mg-space-init">
</div>

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

<div class="container content mg-space-init">
	<div class="row mg-rows">
		<div class="col-sm-4">
			<a href="#" class="mg-trigger"><img src="https://unsplash.it/300/200?image=0"></a>
		</div>
		<div class="col-sm-4">
			<a href="#" class="mg-trigger"><img src="https://unsplash.it/300/200?image=10"></a>
		</div>
		<div class="col-sm-4">
			<a href="#" class="mg-trigger"><img src="https://unsplash.it/300/200?image=20"></a>
		</div>
	</div>
</div>

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

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

<div class="container content mg-space-init">
	<div class="row mg-rows">
		<div class="col-sm-4">
			<a href="#" class="mg-trigger"><img src="https://unsplash.it/300/200?image=0"></a>
		</div>
	</div>
	<div class="mg-targets">
		<div>
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=0" class="thumbnail">
					</div>
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=1" class="thumbnail">
					</div>
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=2" class="thumbnail">
					</div>
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=3" class="thumbnail">
					</div>
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=4" class="thumbnail">
					</div>
					<div class="col-md-4 col-sm-6">
						<img src="https://unsplash.it/300/200?image=5" class="thumbnail">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

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

$(function(){
	$('.mg-space-init').mgSpace();
});

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

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

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

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

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

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

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

Метки:

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

Комментарии 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