Вместе с выходом 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).
для неактивного состояния magnifier задает z-index всему div, для активного состояния, когда элементы начинают реагировать на положение курсора мыши, z-index задается только для текущего выбранного элемента.
$("#mag").magnifier({zIndex: 2});
axis
свойство принимает значения «x» или «y». В зависимости от параметра растягивает изображения по оси Х или У. Второй вариант растягивает все изображения сразу, первый выглядит более интересным.
$("#mag").magnifier({axis: «x»});
Заключение
Magnifier — интересный виджет. В этом топике я постарался описать все его параметры, для того, чтобы восполнить пробел в документации на официальном сайте. Надеюсь, кто-то найдет данную информацию полезной. Так же ожидаю в комментариях указаний на ошибки или неточности в статье