Options

Modifying Zoomy

$('selector').zoomy(event, {options})

Event

The event supports any event that is supported by .bind. Also custom events can be created but note that the movement of Zoomy is determined by 'mousemove'. So most common usage is 'click dblclick mouseover mouseenter'.

Options

zoomSize: interger

Zoom Size is the diameter or the width of the zoomy element. This needs an interger to be passed in, and the interger number directly translates to pixels. So 100 is equal to '100px'. By default this is set to 200.

round: boolean

This is option is to toggle on and off the border-radius. This not only remove border-radius for the zoomy element but also for the glare if it is currently on. This take a boolean variable and is by deafult set to 'true'.

glare: boolean

Option for displaying a small gradient towards the top of the zoomy element. This take a boolean variable and is by deafult set to 'true'.

clickable: boolean

This options was set up to allow developers to hook other functions to zoom element or just nativly use the anchor tag.This take a boolean variable and is by deafult set to 'false'.

attr: string

This was a new option to 1.2.1. This allows you to store the path to the zoom image in another attr like zoomy-data = "./path-to/zoom-image.jpg" so that way if you would like to send a user to another page you may use the anchor tag nativly and store the link in the href. Note that clickable and attr kind of work in tandem. By default attr is set to 'href'.

border: string beta

This is new to 1.3.3. This is a highly requested feature that allows for a border. Note this option is in beta and is subject to some crazy behavior. It has been tested on Chrome, Firefox, Opera, Safari, and IE 9-7. This basically is a CSS property. You can pass in hex, rgb, rgba, hsl, and hsla. The reason this has to be included into the plugin and not just the CSS is because the border offsets the zoom element, and is compensated in change.move(). By default this is set too border: 10px solid #fff.

Callbacks

In 1.2 There was a series of new callbacks that were added to Zoomy. There are three in total and we plan to add about two more to be able to control loading indications with ease for larger images.

zoomInit: function(e)

This is a callback that is called after the zoom element is built. The reason you would want to use this callback is to add elements to the zoom element. A series of variables in a object are passed into this function. These variables are subject to change, and organization.

zoomStart: function(e)

This is a called as soon as the zoom element is show. This could be use to hide indicators to zoom like a 'call to action' button, or to add an extra effect to the orignal image. A series of variables in a object are passed into this function. These variables are subject to change, and organization.

zoomStop: function(e)

This is called when the zoomElement is hidden. This can be used to show indicators to zoom, or remove Zoomy after first zoom. A series of variables in a object are passed into this function. These variables are subject to change, and organization.