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

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

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

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

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

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

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

автор

Автор: Михаил Влащенко

Здравствуйте! Меня зовут Михаил. Мне 22 года. Я — верстальщик-самоучка.

Интересуюсь интернет технологиями. Хобби — кулинария. Свободное время провожу с любимой девушкой и друзьями. Больше всего в мире люблю погонять круглый мячик в хорошей компании (с раннего детства играю в футбол). Постараюсь до Вас донести те знания, которыми уже владею. Как говорится, помоги ближнему своему.

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

Создайте папку 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>

После этого в папке 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;
}

Теперь осталось подключить ява-скрипты. Для этого в папке 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 class="cloud-zoom" href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> 
	<img src="images/kharkov_small.jpg" alt=""/>
</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 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>

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

Заключение.

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

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

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

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

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

киберсант-вебмастер

Источник: http://www.professorcloud.com

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

Комментарии Facebook:

Комментарии (23)

  1. Станислав

    Андрей! Спасибо за заботу. У меня сильно упало зрение.

  2. Бахмутов Артур

    Спасибо за работу! давно искал что ни буть похожее!
    Успехов вам! Ждем новых Уроков!!!

  3. Игорь

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

  4. Alfred

    Спасибо за урок и заботу. Как дела Андрей Галлямов?.

  5. Сергей

    Спасибо, очень доступно, просто, и можно попользоваться вашими разработками на своем компе!
    Удачи вам, ребята, в хорошем общении и получении теплых отзывов на ваши публикации!
    С уваением Сергей!

  6. Николай

    Просто супер! Спасибо!

  7. Станислав

    Спасибо, очень своевременная тема! Всё работает! Только хотел поменять разрешение выводимого рисунка, но большее чем 1406 пикселей, но не даёт. Начинает менять масштаб и зону покрытия. Кроме того картинку в вертикальном исполнении тоже так же некорректно выводит. Что делать подскажите.

  8. vev

    Спасибо, красиво работает.
    vev

  9. Oleg

    Спасибо, за уроки, хобби — тоже кулинария.

  10. alex

    Спасибо. Т. к. я дилетант в этом деле, а хочу разместить на своем создаваемом сайте подобные карты, только другого района, то подскажите, пожалуйста, как соорудить ссылку на созданную папку folder, которая хранится в БД сайта? Т. е., например, на странице сайта будет просто запись- гиперссылка: Карта. Нажав на запись, открывается карта, которую можно рассматривать лупой. Т. е., проблема, как создать гиперссылку ссылку.
    Спасибо.

  11. SvetLana

    Андрей, спасибо вам большое за уроки!!! Мне они очень помогли. Все очень доступно и понятно!!!

  12. Ксения Лашкова

    Спасибо, ребята!

    Даже не верится, что сама смогла такое сделать с вашей помощью:
    http://www.event-burg.ru/zoom/people.shtml

    )))))

  13. Ольга

    Здравствуйте! Вы не можете мне помочь, пожалуйста!? Я установила программу cloud zoom на сайт — все работает нормально, только есть проблемка. Вот страница vip-glamour.kz/?p=86 в правом углу у меня корзинки с ценами. а левее стоит фото, которое увеличивается с эффектом зум, оно не на всю область, а на часть, однако я не могу закинуть ничего в корзину, потому как кликаешь на корзинку, отрывается в новом окне большое фото. Помогите, пожалуйста? Что нужно сделать для этого?
    Спасибо!

  14. deeserge

    Попробуйте еще этот плагин zoomsl.tw1.ru. Похож на Cloud Zoom v3.0, но совершенно бесплатен. Работает во всех браузерах, даже в ие8 поддерживается плавность анимации, чего не скажешь про другие бесплатные плагины.

  15. Максим

    Подскажите, пожалуйста, как контролировать увеличение картинки? Мне нужно увеличить картинку не на 100%, а на 5% или в два раза от миниатюры. Например миниатюра 100х100, окно для увеличения тоже 100х100, а вот большая картинка 1000х1000. Так мне нужно, чтоб в окне 100х100 большая картинка была всего в два раза больше миниатюры — 200х200

    • Андрей Кудлай

      Так плагин не занимается увеличением картинки, он просто показывает часть большой картинки. Создавайте большую картинку размерами не 1000х1000, а 200х200 и получите то, что хотите.

      • Максим

        Это понятно, но можно как-то указать плагину, чтоб он показывал большую картинку в уменшеном виде? Общий размер делил на 50%, к примеру.

        • Андрей Кудлай

          Возможно. Для этого нужно изучить документацию к плагину.

          • Максим

            Это тоже понятно, но я задаю Вам вопрос в надежде получить решение так, как Вы представляете урок именно по этому плагину, значит Вы изучили документацию.

          • Андрей Кудлай

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

  16. Марианна

    Как сделать больше квадрат через который мы рассматриваем картинку, а то уж сильно он маленький.

    • Андрей Кудлай

      Например, добавив в файл стилей следующее правило:
      .cloud-zoom-big{
      width: 500px !important;
      height: 500px !important;
      }

Добавить комментарий

Ваш 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