От автора: Сегодня мы рассмотрим jQuery плагин cloud-zoom (лупа для картинок). При помощи него на странице можно просматривать изображения в увеличенном виде.
Почему именно он?
Потому что он включает в себя много разнообразных режимов просмотра изображения, хорошая совместимость всех браузеров, легок в обращении.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееТакже скачайте исходники себе на компьютер!
Перейдем к рассмотрению урока.
Создайте папку folder и поместите в нее файл index.html со следующим кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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> |
После этого в папке folder создайте папку styles и поместите в нее файл cloud-zoom.css. Он должен содержать следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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’.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 2 3 |
<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> |
Аналогично для режима "Внутри":
|
1 2 3 |
<a class="cloud-zoom" href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> <img src="images/kharkov_small.jpg" alt=""/> </a> |
режима "Размытие":
|
1 2 3 |
<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> |
режима "Цвет":
|
1 2 3 |
<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 Кб).
легкая интеграция в код.
Источник: //www.professorcloud.com
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Полное руководство
Изучите самый популярный язык разработки и станьте высокооплачиваемым профи
Подробнее
Комментарии (23)