jquery обзор плагинов

Источник

• www.mind-projects.it/projects/jqzoom/

Скачать

Примеры

• стандартные настройки
• инвертированная зона выделение
  
• не выделяется зона увеличения и отсутствует заголовок
  
• слой с увеличенной облатью смещен в сторону
  
• эффект затухания при потере фокуса
  

Установка

Необходимо подключить библиотеку jQuery (версия не ниже 1.2.6), сам плагин и css-стили для него.

1
2
3

<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
<link rel='stylesheet' type='text/css' href='css/jqzoom.css' />

Настройка

Картинки, к которым вы хотите применить jQZoom необходимо заключить в ссылки, которые должны содержать параметры для необходимые для работы скрипта.

1
2
3

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

SMALLIMAGE.JPG: Замените картинкой, которую необходимо увеличить.
BIGIMAGE.JPG: Замените большим изображением.
MYCLASS: Замените названием класса, который будет использован при вызове плагина jQZoom. Скрипт будет применен ко всем элементам у которых указан данный класс. Если элемент для увеличения один, то можно использовать идентификатор (ID).
MYTITLE/IMAGE TITLE: Подпись для ссылки/или большого изображения – будет использована как заголовок для окна с увеличением.

инициализация плагина

1
2
3

$(document).ready(function(){
$('.MYCLASS').jqzoom();
});

Так выглядит запуск jQzoom с настройками по умолчанию. Также при запуске можно указывать параметры (смотрите ниже) для более точной настройки

1
2
3
4
5
6
7
8
9
10

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //и другие параметры
};
$('.MYCLASS').jqzoom(options);
});

Параметры:

• параметр
  значение по умолчанию
  описание
• zoomType
  ‘standard’
  Другое возможное значение ‘reverse’ – задает спооб выделения области увеличения
• zoomWidth
  200
  Ширина слоя с увеличенной областью
• zoomHeight
  200
  Высота слоя с увеличенной областью
• xOffset
  10
  Горизонтальный отступ от маленького изображения (только положительные значения, если параметр positive задан как  ‘right/left‘, положительные/отрицательные, если параметр positive задан как ‘top/bottom‘)
• yOffset
  0
  Вертикальный отступ от маленького изображения (только положительные значения, если параметр positive задан как  ‘right/left‘, положительные/отрицательные, если параметр positive задан как ‘top/bottom‘)
• position
  ‘right’
  Положение слоя с увеличением относительно маленькой картинки. Возможны значения: ‘right’ ,‘left’ ,‘top’ ,‘bottom’
• lens
  true
  Если установить значение false, то на малельнькой картинке не будет показано какая ее часть увеличена
• imageOpacity
  0.2
  Задает прозрачность изображения, если параметр zoomType задан как ‘reverse‘
• title
  true
  Выводит небольшой заголовок над изображением. Значение берется из параметра title ссылки или маленького изображения
• showEffect
  ‘show’
  Эффект появления слоя с увеличением. Возможные значения: ‘show’ ,‘fadein’
• hideEffect
  ‘hide’
  Эффект скрытия слоя с увеличением. Возможные значения: ‘hide‘ ,‘fadeout’
• fadeinSpeed
  ‘fast’
  Меняет скорость появления увеличенной области, если параметр showEffect задан как ‘fadein‘  (значения: ‘fast’,‘slow’,‘medium’)
• fadeoutSpeed
  ‘slow’
  Меняет скорость скрытия увеличенной области, если параметр showEffect задан как ‘fadein’  (значения: ‘fast’,‘slow’,‘medium’)
• showPreload
  true
  Показывает индикатор загрузки большой картинки (значения: ‘true’,‘false’)
• preloadText
  ‘Loading zoom’
  Параметр меняет текст индикатора загрузки
• preloadPosition
  ‘center’
  По умолчанию прелоадер расположен в центре маленькой картинки. Вы можете указать значение параметра ‘bycss’ и задать положение прелоадера в файле css

Так же вы можете внести изменение в файл ‘jqzoom.css’.