Плагин jQuery cloud-zoom – лупа для картинок

Дата публикации: 2011-03-09

лупа картинки

От автора: Сегодня мы рассмотрим jQuery плагин cloud-zoom (лупа для картинок). При помощи него на странице можно просматривать изображения в увеличенном виде.

Почему именно он?

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Перейдем к рассмотрению урока.

Создайте папку folder и поместите в нее файл index.html со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Плагин jQuery cloud-zoom</title>
<link href="styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/JavaScript" src="js/cloud-zoom.1.0.2.min.js"></script>
</head>
<body>
<h1>Режим "Фотогалерея"</h1>
<a href='images/kharkov_big.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
	<img src="images/kharkov_small.jpg" alt="" />
</a>
<a href='images/kharkov_big.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small.jpg' ">
	<img src="images/kharkov_small.jpg" alt =""/>
</a>
<a href='images/kharkov_big_bw.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small_bw.jpg' ">
	<img src="images/kharkov_small_bw.jpg" alt =""/>
</a>

<h1>Режим "внутри"</h1>
<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> 
	<img src="images/kharkov_small.jpg" alt=""/>
</a>

<h1>Режим "размытие"</h1>
<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="position: 'right', adjustX: 14, adjustY:0, softFocus:true">
		<img src="images/kharkov_small.jpg" alt=""/>
</a>
<h1>Режим "Цвет"</h1>
<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="tint: '#999', tintOpacity: 0.7, position: 'right', adjustX: 14, adjustY:0"> 
	<img src="images/kharkov_small.jpg" alt="" title="Карта Харькова"/>
</a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Плагин jQuery cloud-zoom</title>

</head>

<body>

<h1>Режим "Фотогалерея"</h1>

</a>

</a>

</a>

<h1>Режим "внутри"</h1>

</a>

<h1>Режим "размытие"</h1>

</a>

<h1>Режим "Цвет"</h1>

</a>

</body>

</html>

После этого в папке folder создайте папку styles и поместите в нее файл cloud-zoom.css. Он должен содержать следующий код:

img{	
	border: none
}
h1{
	margin: 50px 0 50px 0;
}.cloud-zoom{
	width: 200px;
}
.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;
}
.cloud-zoom-big {
	border: 4px solid #ccc;
	overflow: hidden;
}
.cloud-zoom-loading {
	background:#222;
	padding:3px;
	border:1px solid #000;
}

img{

border: none

}

h1{

margin: 50px 0 50px 0;

}.cloud-zoom{

width: 200px;

}

.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;

}

.cloud-zoom-big {

border: 4px solid #ccc;

overflow: hidden;

}

.cloud-zoom-loading {

background:#222;

padding:3px;

border:1px solid #000;

}

Теперь осталось подключить ява-скрипты. Для этого в папке folder создайте папку js и поместите в нее два файла jquery-1.4.2.js и cloud-zoom.1.0.2.min.js.

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

лупа картинки

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

В случае режима "Фотогалерея" существует выбор изображения из списка для просмотра в увеличенном виде.

У каждого режима есть свои особенности.

Например, для того чтобы задать режим "Фотогалерея", объекту необходимо обязательно присвоить класс "cloud-zoom-gallery" и передать следующие параметры rel : useZoom: ‘zoom1’, smallImage: ‘картинка.jpg’.

<a href='images/kharkov_big.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small.jpg' ">
	<img src="images/kharkov_small.jpg" alt =""/>
</a>

</a>

Аналогично для режима "Внутри":

<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> 
	<img src="images/kharkov_small.jpg" alt=""/>
</a>

</a>

режима "Размытие":

<a class="cloud-zoom" href="images/minsk_big.jpg" rel="position: 'right', adjustX: 14, adjustY:0, softFocus:true">
	<img src="images/minsk_small.jpg" alt="" title="Карта Минска"/>
</a>

</a>

режима "Цвет":

<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="tint: '#999', tintOpacity: 0.7, position: 'right', adjustX: 14, adjustY:0"> 
	<img src="images/kharkov_small.jpg" alt="" title="Карта Харькова"/>
</a>

</a>

Урок окончен. Всем спасибо за внимание.

Заключение.

В данном уроке был рассмотрен jQuery плагин cloud-zoom(в простонародье – "лупа ").

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

Хотел бы также выделить достоинства этого плагина:

размер скрипта (порядка 6 Кб).

легкая интеграция в код.