От автора: Сегодня мы рассмотрим jQuery плагин cloud-zoom (лупа для картинок). При помощи него на странице можно просматривать изображения в увеличенном виде. Почему именно он? Потому что он включает в себя много разнообразных режимов просмотра изображения, хорошая совместимость всех браузеров, легок в обращении.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
Перейдем к рассмотрению урока.
Создайте папку 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.
После выполнения всех вышеуказанных действий в окне Вашего браузера можно будет увидеть следующее:
Как Вы уже, наверное, поняли, данный плагин предусматривает несколько режимов увеличенного изображения. Чтобы увидеть эффект увеличения изображения определенного режима, Вам необходимо просто навести на изображение курсор мыши.
В случае режима "Фотогалерея" существует выбор изображения из списка для просмотра в увеличенном виде.
У каждого режима есть свои особенности.
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
Например, для того чтобы задать режим "Фотогалерея", объекту необходимо обязательно присвоить класс "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
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
Андрей! Спасибо за заботу. У меня сильно упало зрение.
Спасибо за работу! давно искал что ни буть похожее!
Успехов вам! Ждем новых Уроков!!!
Андрей, благодаря этому скрипту я могу сделать фото галерею на своем сайте торгового оборудования. Поэтому пользователи — покупатели смогут более детально разглядеть оборудование, которое они хотят купить. Торговое оборудование стоит не дешево. Поэтому, хороший детальный осмотр оборудования даст более полную картину, а соответственно, улучшит покупаемость оборудования для торговли. Спасибо!
Спасибо за урок и заботу. Как дела Андрей Галлямов?.
Спасибо, очень доступно, просто, и можно попользоваться вашими разработками на своем компе!
Удачи вам, ребята, в хорошем общении и получении теплых отзывов на ваши публикации!
С уваением Сергей!
Просто супер! Спасибо!
Спасибо, очень своевременная тема! Всё работает! Только хотел поменять разрешение выводимого рисунка, но большее чем 1406 пикселей, но не даёт. Начинает менять масштаб и зону покрытия. Кроме того картинку в вертикальном исполнении тоже так же некорректно выводит. Что делать подскажите.
Спасибо, красиво работает.
vev
Спасибо, за уроки, хобби — тоже кулинария.
Спасибо. Т. к. я дилетант в этом деле, а хочу разместить на своем создаваемом сайте подобные карты, только другого района, то подскажите, пожалуйста, как соорудить ссылку на созданную папку folder, которая хранится в БД сайта? Т. е., например, на странице сайта будет просто запись- гиперссылка: Карта. Нажав на запись, открывается карта, которую можно рассматривать лупой. Т. е., проблема, как создать гиперссылку ссылку.
Спасибо.
Андрей, спасибо вам большое за уроки!!! Мне они очень помогли. Все очень доступно и понятно!!!
Спасибо, ребята!
Даже не верится, что сама смогла такое сделать с вашей помощью)))))
Здравствуйте! Вы не можете мне помочь, пожалуйста!? Я установила программу cloud zoom на сайт — все работает нормально, только есть проблемка. Вот страница vip-glamour.kz/?p=86 в правом углу у меня корзинки с ценами. а левее стоит фото, которое увеличивается с эффектом зум, оно не на всю область, а на часть, однако я не могу закинуть ничего в корзину, потому как кликаешь на корзинку, отрывается в новом окне большое фото. Помогите, пожалуйста? Что нужно сделать для этого?
Спасибо!
Здравствуйте, Ольга.
Ответил Вам .
Попробуйте еще этот плагин zoomsl.tw1.ru. Похож на Cloud Zoom v3.0, но совершенно бесплатен. Работает во всех браузерах, даже в ие8 поддерживается плавность анимации, чего не скажешь про другие бесплатные плагины.
Подскажите, пожалуйста, как контролировать увеличение картинки? Мне нужно увеличить картинку не на 100%, а на 5% или в два раза от миниатюры. Например миниатюра 100х100, окно для увеличения тоже 100х100, а вот большая картинка 1000х1000. Так мне нужно, чтоб в окне 100х100 большая картинка была всего в два раза больше миниатюры — 200х200
Так плагин не занимается увеличением картинки, он просто показывает часть большой картинки. Создавайте большую картинку размерами не 1000х1000, а 200х200 и получите то, что хотите.
Это понятно, но можно как-то указать плагину, чтоб он показывал большую картинку в уменшеном виде? Общий размер делил на 50%, к примеру.
Возможно. Для этого нужно изучить документацию к плагину.
Это тоже понятно, но я задаю Вам вопрос в надежде получить решение так, как Вы представляете урок именно по этому плагину, значит Вы изучили документацию.
Наверное, стоит начать с того, что автор урока не я все же) но автор урока Вам вряд ли ответит, поскольку данному уроку (хотя на самом деле это сложно назвать уроком… просто статья с примерами из документации) уже более 3-х лет и где сейчас автор — кто его знает…
Посмотрев документацию, подобной возможности я не нашел, что, в принципе и логично, поскольку задача у плагина все же вполне конкретная — показать некий участок большой картинки, а не уменьшать зачем-то эту картинку.
Все же я считаю Вашу проблему достаточно искусственной, поскольку Вы ведь все равно подготавливаете большие картинки… так почему не уменьшить картинку до нужного размера?
Как сделать больше квадрат через который мы рассматриваем картинку, а то уж сильно он маленький.
Например, добавив в файл стилей следующее правило:
.cloud-zoom-big{width: 500px !important;
height: 500px !important;
}