Топ плагинов jQuery. Плагин jQuery лупа

Топ плагинов jQuery. Плагин jQuery лупа

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

Уверен, по отдельности вы могли видеть работу обоих плагинов: и jQuery лупа, и jQuery Lightbox. Но вот вместе? Я лишь недавно увидел такой плагин и решил поделиться им с вами.

Скачать архив с плагином jQuery лупа и познакомиться с документацией к нему вы можете на этой странице на GitHub. Также необходимые файлы есть и в исходниках к данной статье. Подключим их к странице нашего проекта.

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

Теперь нам необходимы красивые картинки, которые бы смог открывать jQuery Lightbox. Великолепные фотографии на любой вкус вы всегда можете получить, воспользовавшись сервисом unsplash. Я возьму картинки именно оттуда:

<div class="container content">
	<div class="row">
		<div class="col-md-6">
			<a class="zb" rel="group" href="https://unsplash.it/4000/2667?image=885" title="long">
				<img src="https://unsplash.it/300/200?image=885"/>
			</a>
		</div>
		…
	</div>
</div>

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

Топ плагинов jQuery. Плагин jQuery лупа

Осталось запустить работу плагина, обратившись к методу zbox():

$(function(){
	$(".zb").zbox();
});

Теперь кликнем по любому из изображений, чтобы открыть его в модальном окне jQuery Lightbox.

Топ плагинов 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