Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
jqZoom - удобное увеличение изображений
|
|
Размер: 47,7 Мб. Длительность: 21 мин. 05 сек. |
В этом уроке мы разберем с вами установку и настройку скрипта jQZoom.
Вот официальный сайт этого проекта:
http://www.mind-projects.it/projects/jqzoom/
Как понятно из названия, он призван приближать, увеличивать. Скрипт использует JavaScript-библиотеку jQuery и позволяет красиво показывать увеличенные изображения.
Принцип работы такого рода скриптов прост. Ему нужно дать маленькое изображение, по которому мы будем перемещать курсор мыши (при этом будет выделена определенная область изображения) и большое изображение, которое используется для показа выбранной нами области в приближенном варианте.
Кроме того, если мы имеем дело с галереей, то нам еще понадобятся маленькие картинки, кликая по которым мы сможем выбирать конкретные изображения для увеличенного просмотра.
Наиболее типичные области применения таких скриптов с zoom-эффектом - это показ в деталях фотографий товаров в интернет-магазинах, либо создание фотогалерей.
В видео ниже мы с вами рассмотрим основные моменты, связанные с установкой и настройкой скрипта jQZoom, который позволяет с легкостью решать подобные задачи.
Вы можете просмотреть этот урок прямо сейчас, либо скачать его себе на компьютер по ссылке выше.
Под видео вы найдете сокращенную текстовую версию для этого урока.
Установка
Сначала подключаем библиотеку jQuery, затем скрипт jQZoom. Именно в таком порядке, т.к. jQZoom использует в своей работе jQuery.
<script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
Подключаем файл стилей для скрипта:
<link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css" />
Далее у нас идет блок со стилями просто для страницы и ее элементов, не связанных непосредственно со скриптом. Их можно, конечно, вынести в отдельный css-файл, но в данном примере они у нас внутри.
Как использовать
Для использования скрипта нам нужно указать, какое изображение будет стоять первым в окне предпросмотра, заключив его в тэг ссылки:
<a href="img/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
<img src="img/triumph_small1.jpg" title="triumph" style="border: 2px solid silver;"/>
</a>
Т.е. в атрибуте href мы указываем путь до большой картинки (которая будет использоваться для просмотра изображения в деталях). Внутри же ссылки мы размещаем изображение, которое мы видим над миниатюрами.
Класс jqzoom нужен для запуска скрипта. Именно он является сигналом для того, чтобы скрипт определенным образом обрабатывал элементы, которым присвоен этот класс jqzoom.
Атрибут title нужен для вывода подписи к увеличенному изображению.
И, последний момент, который у нас остался - это атрибут rel со значением "gal1". Этот атрибут нужен, если мы хотим организовать галерею из нескольких изображений, каждое из которых мы хотим просматривать в увеличенном размере.
В этом случае для всех изображений, которые мы хотим отнести к одной галерее, мы проставляем атрибут rel с одинаковым значением.
Если вам нужно создать более 1 галереи на одной странице, то нужно задать для атрибута rel другое значение и использовать его для всех изображений второй галереи.
Для картинок предпросмотра важно правильно указывать значения в атрибуте rel.
Формат такой:
rel="{gallery: 'gal1', smallimage: 'img/triumph_small1.jpg',largeimage: 'img/triumph_big1.jpg'}">
Как видно из примера, сначала мы указываем идентификатор галереи, к которой относится изображение, затем - путь до изображения, которое будет загружаться при клике по миниатюре в область просмотра и, наконец, - путь до большого изображения.
Обратите внимание, что в качестве маленьких изображений (в окне просмотра) должны выступать пропорционально уменьшенные большие изображения, т.е. должны сохраняться пропорции для корректной работы скрипта.
Затем мы загружаем плагин сразу по окончании загрузки страницы и указываем доп. настройки, если это необходимо:
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'reverse',
lens: true,
preloadImages: false,
zoomWidth: 300,
zoomHeight: 249,
xOffset: 10,
yOffset: 0,
position: 'right',
preloadText: 'Идет увеличение...',
title: true,
imageOpacity: 0.4, // Для zoomType 'reverse'
showEffect: 'show',
hideEffect: 'fadeout',
fadeinSpeed: 'slow', // Если для showEffect выбран 'fadein'
fadeoutSpeed: 500 // Если для hideEffect выбран 'fadeout'
});
});
Настройки
1. zoomType (по умолчанию: 'standard') Допустимые значения: 'reverse','drag','innerzoom'
2. lens (по умолчанию: true) Показ названия в окне приближения (для меня смысл данной настройки оказался неясен)
3. preloadImages (по умолчанию: false) Если установлено в true, то jqzoom будет подгружать в память большие изображения при загрузке страницы
4. zoomWidth (по умолчанию: 300) Ширина всплывающего окна с приближаемой областью изображения
5. zoomHeight (по умолчанию: 300) Высота всплывающего окна с приближаемой областью изображения
6. xOffset (по умолчанию: 10) Сдвиг всплывающего окна относительно области с предпросмотром по горизонтальной оси
7. yOffset (по умолчанию: 0) Сдвиг всплывающего окна относительно области с предпросмотром по вертикальной оси
8. position (по умолчанию: 'right') Позиция всплывающего окна. Допустимые значения: 'right', 'left', 'top', 'bottom'
9. preloadText (по умолчанию: 'Loading zoom') Текст, показываемый в процесс подгрузки большого изображения
10. title (по умолчанию: true) Показывать подпись к изображению в окне приближения
11. imageOpacity (по умолчанию: 0.4) Устанавливает прозрачность рисунка, когда 'zoomType' установлен в значение 'reverse'
12. showEffect (по умолчанию: 'show') Эффект, с которым появляется всплывающее окно. Допустимые значения: 'show', 'fadein'
13. hideEffect (по умолчанию: 'hide') Эффект, с которым исчезает всплывающее окно. Допустимые значения: 'hide', 'fadeout'
14. fadeinSpeed (по умолчанию: 'slow') Изменить скорость эффекта проявления, если showEffect установлен в значение 'fadein'. Допустимые значения: 'fast', 'slow', число)
15. fadeoutSpeed (по умолчанию: 2000) Изменить скорость эффекта выцветания, если hideEffect установлен в значение 'fadeout'. Допустимые значения: 'fast', 'slow', число)
Настройка стилей скрипта производится в файле jquery.jqzoom.css
Все, что описано выше, более подробно разбирается в видеоуроке.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
