UI: magnifier - description of all functions

Along with the release of jQuery UI 1.6rc2, new widgets have appeared, one of which is Magnifier . This is an interesting control that can diversify the design on the page. Unfortunately, the description of this widget is not on the official documentation page and this post is intended to fill the gap and describe all the parameters of the Magnifier widget.

I note that these are my personal research of the widget and the results may not coincide with the final version or with the documentation that developers will release, which may leave some of the parameters found undocumented

distance

default value: 150

indicates the distance (from the center of the image) from which the images begin to react to the mouse and zoom

$ ("# mag"). magnifier ({distance: 300});

')

magnification

default value: 2

indicates maximum image magnification

$ ("# mag"). magnifier ({magnification: 3});

baseline

default value: 0

This seems to be an undocumented parameter, it affects the top css-property for images. When changing values, the magnifier behaves inadequately, use caution.

$ ("# mag"). magnifier ({baseline: 0});

verticalLine

default value: -0.5,

more adequate property that affects the css-property left for images

$ ("# mag"). magnifier ({verticalLine: 0});

items

default value: "> *"

A very useful property that allows you to specify the elements involved in scaling. Using this property, you can make the images have links; by default, the images wrapped in the “a” tag are not scaled. With this property, you can do without the use of the "click" property. Also this property will allow you to filter elements that should be scaled.

$ ("# mag"). magnifier ({items: "img.sample"});

click

specifies the function that will be called when the image is clicked. The function has two parameters: a pointer to a div, options that contain: options with which the magnifier (options) was executed, a pointer to the current image (current) and a pointer to the next image (currentOffset).

$ ("# mag"). magnifier ({
click: function (e, opt) {
if (opt.current.alt! = "later") {
document.location = "hd /" + opt.current.alt;
}
}
});

overlap

default value: false

true or false. Indicates how the scalable images will behave, whether they will overlap each other.

$ ("# mag"). magnifier ({overlap: true});

opacity

sets the transparency range of inactive and maximally displayed items

$ ("# mag"). magnifier ({
opacity: {
min: 0.6,
max: 1.0
}
});

zIndex

for the inactive state, the magnifier sets the z-index to the entire div; for the active state, when elements start to respond to the position of the mouse cursor, z-index is set only for the currently selected item.

$ ("# mag"). magnifier ({zIndex: 2});

axis

the property takes the values ​​“x” or “y”. Depending on the parameter, it stretches the images along the X or Y axis. The second option stretches all the images at once, the first one looks more interesting.

$ ("# mag"). magnifier ({axis: "x"});

Conclusion

Magnifier is an interesting widget. In this topic I tried to describe all its parameters in order to fill the gap in the documentation on the official website. I hope someone will find this information useful. I also expect comments in the instructions for errors or inaccuracies in the article.