Плагин jQuery cloud-zoom (лупа)

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

• Кроссбраузерность
• Применимость к конкретным условиям
• Вес скрипта, быстродействие, гибкость настройки и т.п

Перебрав несколько разных плагинов, я остановился на cloud-zoom от профессора Тучи :). Решающим фактором стала возможность внедрения лупы в галерею. Но и некоторые другие реализации лупы мне приглянулись, их рассмотрим в следующих статьях.

Смотрим что умеет: демо

Проверено в:

• IE 6-8
• Firefox 3+
• Opera 9+
• Safari 3+
• Chrome 7

Что качать?

• jQuery последней версии
• cloud-zoom v1.0.2(в архиве сам плагин и css к нему)

Быстрый старт

Как обычно подключаем js и css:

<link rel="stylesheet" type="text/css" href="css/cloud-zoom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.js"></script>

html-конструкция:

<a class="cloud-zoom" href="path-to-big-img"> 
    <img src="path-to-normal-img" alt="" width="" height="" />
</a>

Ничего особенного, кроме наличия класса cloud-zoom у ссылки. Результат

Лупа "под лупой"

Взглянув на результат быстрого старта стразу бросается в глаза, что zoom-окно "прилипло" к блоку с картинкой. Само собой, поскольку мы не использовали ни одного параметра плагина. исправим это:

<a class="cloud-zoom" href="path-to-big-img"> 
    <img src="path-to-normal-img" alt="" width="" height="" rel="adjustX: 14, adjustY:0" />
</a>

Результат

Особенностью плагина является способ подачи параметров. Как видим из примера, параметры задаются через атрибут rel у ссылки-контейнера. Расмотрим возможные параметры:

Параметры

В дополнение к параметрам, мы, как обычно, имеем возможность воздействовать на стили плагина. Все предельно ясно, разобраться труда не составит:

/* Перемещаемая зона под указалелем линзы */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;
	background-color:#fff;	
	cursor:move;		
}
/* текст заголовка */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;	
	font-weight:bold;
	font-size:10px;
	top:0px;
}
/* Окошко зума */
.cloud-zoom-big {
	border:4px solid #ccc;
	overflow:hidden;
}
/* Загрузочное сообщение */
.cloud-zoom-loading {
	color:white;	
	background:#222;
	padding:3px;
	border:1px solid #000;
}

Режим галереи

Теперь рассмотрим вариант с галереей. Структура кода:

<a class="cloud-zoom" href="pic/ukraina-big.gif" id='zoom1' rel="position: 'right', adjustX: 10, adjustY: 0"> 
	<img src="pic/ukraina-middle.png" alt="" width="200" height="185" />
</a>
<ul>
	<li>
		<a class="cloud-zoom-gallery" href="pic/ukraina-big.gif" title='' rel="useZoom: 'zoom1', smallImage: 'pic/ukraina-middle.png'">
			<img src="pic/ukraina-small.png" alt="" width="100" height="105" />
		</a>
	</li>
	<li>
		<a class="cloud-zoom-gallery" href="pic/poland-big.gif" title='' rel="useZoom: 'zoom1', smallImage: 'pic/poland-middle.png'">
			<img src="pic/poland-small.png" alt="" width="100" height="105" />
		</a>
	</li>
	<li>
		<a class="cloud-zoom-gallery" href="pic/armenia-big.gif" title='' rel="useZoom: 'zoom1', smallImage: 'pic/armenia-middle.gif'">
			<img src="pic/armenia-small.gif" alt="" width="100" height="105" />
		</a>
	</li>
</ul>

В идеале, список можно и не использовать(я показал готовый код из примера), достаточно только ссылок с изображениями.

Результат

Для основного окна, вроде бы, все ясно, а вот для, так называемых, thumbnails мы видим два непонятных параметра: useZoom и smallImage. Все просто, useZoom указывает на id основного окна, а smallImage - путь к изображению, которое будет "зумиться". Само собой, для реализации такой галереи, каждое изображение должно быть в наличии в трех размерах: большое (в zoom-окне), среднее (в родительском) и маленькое (условно говоря, в качестве иконок в галерее)

Заметки

В моем случае, набор картинок в галерее мог меняться при помощи ajax, само собой, что действие плагина на подгруженные элементы не распространялось, поэтому стал вопрос переинициалзации плагина, это делается тоже просто:

jQuery('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Так же хочу заметить, что в коде плагина инициализация уже присутствует (в самом верху файла), поэтому если не нужно инициализировать плагин при загрузке — просто убираем эту строку.

Преимущества

• кроссбраузерность
• простота внедрения
• легкий вес — 6кб
• легкая настраиваемость
• поддержка режима галереи

Недостатки

Возможно до недостатка не дотягивает, но мне не нравится что параметры плагина приходится писать в HTML коде. Как по мне, то лучше, не "сорить" в хтмл, а все выносить во внешний js.

Материалы

• Страница плагина