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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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" "http://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’.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

<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 Кб).

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