Вместе с выходом jQuery UI 1.6rc2 появились новые виджеты, один из которых Magnifier. Это интересный элемент управления, который может разнообразить дизайн на странице. К сожалению, описание этого виджета отсутствует на странице официальной документации и этот пост призван восполнить пробел и описать все параметры виджета Magnifier.
обращаю внимание, что это мои личные исследования виджета и полученные результаты могут не совпадать с финальной версией или с документацией, которую выпустят разработчики, которые могут оставить недокументированными некоторые из найденных параметров
distance
значение по умолчанию: 150
указывает расстояние (от центра изображения), с которого изображения начинают реагировать на мышь и изменять масштаб
$("#mag").magnifier({distance: 300});
magnification
значение по умолчанию: 2
указывает максимальный коэффициент увеличения изображения
$("#mag").magnifier({magnification: 3});
baseline
значение по умолчанию: 0
похоже, это будет недокументированный параметр, он влияет на css-свойство top для изображений. При изменении значений magnifier ведет себя неадекватно, используйте осторожно.
$("#mag").magnifier({baseline: 0});
verticalLine
значение по умолчанию: -0.5,
более адекватное свойство, которое влияет на css-свойство left для изображений
$("#mag").magnifier({verticalLine: 0});
items
значение по умолчанию: "> *"
очень полезное свойство, которое позволяет задать элементы участвующие в масштабировании. Используя это свойство можно сделать так, чтобы изображения имели ссылки, по умолчанию обернутые в тэг «a» изображения не масштабируются. С этим свойством, можно обойтись без использования свойства «click». Так же это свойство позволит фильтровать элементы, которые должны масштабироваться.
$("#mag").magnifier({items: «img.sample»});
click
указывает функцию, которая будет вызвана при нажатии на изображение. Функция имеет два параметра: указатель на div, опции которые содержат: опции с которыми был выполнен magnifier (options), указатель на текущее изображение (current) и указатель на следующее изображение (currentOffset).
$("#mag").magnifier({
click: function(e, opt) {
if (opt.current.alt != «later») {
document.location = «hd/»+opt.current.alt;
}
}
});
overlap
значение по умолчанию: false
принимает значение true или false. Указывает на то, как будут себя вести масштабируемые изображения, будут ли они перекрывать друг друга.
$("#mag").magnifier({overlap: true});
opacity
устанавливает диапазон прозрачности неактивного и максимально отображаемого элементов
$("#mag").magnifier({
opacity: {
min: 0.6,
max: 1.0
}
});
zIndex
для неактивного состояния magnifier задает z-index всему div, для активного состояния, когда элементы начинают реагировать на положение курсора мыши, z-index задается только для текущего выбранного элемента.
$("#mag").magnifier({zIndex: 2});
axis
свойство принимает значения «x» или «y». В зависимости от параметра растягивает изображения по оси Х или У. Второй вариант растягивает все изображения сразу, первый выглядит более интересным.
$("#mag").magnifier({axis: «x»});
Заключение
Magnifier — интересный виджет. В этом топике я постарался описать все его параметры, для того, чтобы восполнить пробел в документации на официальном сайте. Надеюсь, кто-то найдет данную информацию полезной. Так же ожидаю в комментариях указаний на ошибки или неточности в статье.
