Documentation

Options

Here are the default options/parameters of Parazoom:

Options	Default value	Description
`scale`	`1.2`	`float` or `string` Amount of transform scale
`transitionTime`	`0.3s`	`string` CSS transition on mouse enter time
`transitionTimeLeave`	`1s`	`string` CSS transition on mouse leave time
`opacity`	`1`	`float` or `string` Opacity of the image on mouse off
`opacityHover`	`1`	`float` or `string` Opacity of the image on mouse hover
`overflow`	`hidden`	`visible` or `visible` Display or not the overflow out of the image boundaries
`cursor`	`default`	`string` CSS cursor property on mouse hover
`customCursorIcon`	``	`string` URL of a custom cursor image (jpg, gif, png, svg). If set, display the custom cursor.
`customCursorSize`	`20px`	`string` CSS value to set the custom cursor icon. Available only if `customCursorIcon` is set.
`tilt`	`false`	`boolean` Enable or not the tilt effect
`tiltXamount`	`10`	`float` Amount of horizontal tilt effect
`tiltYamount`	`10`	`float` Amount of vertical tilt effect
`text`	`false`	`boolean` Display or not the alt text
`textPosition`	`middle`	`string` CSS position of the text
`textClass`	``	`string` Add a CSS class to the text container
`textPosition`	`middle`	`string` CSS position of the text
`textAlignment`	`center`	`string` CSS alignment of the text
`textXParallax`	`10`	`float` Amount of horizontal tilt effect for the text
`textYParallax`	`10`	`float` Amount of vertical tilt effect for the text
`textOpacity`	`0`	`float` or `string` Opacity of the text on mouse off
`textOpacityHover`	`1`	`float` or `string` Opacity of the text on mouse hover
`onHover`	``	`function` Callback function triggered on mouse hover
`onLeave`	``	`function` Callback function triggered on mouse leave
`onClick`	``	`function` Callback function triggered on mouse click
`onMove`	``	`function` Callback function triggered on mouse move

All options can be customized globally and individually via specific call or data-attributes.

Javascript

Here you can set the global parameters.

//Change all default settings
jQuery('img').parazoom({
    scale:                  '1.2',
    transitionTime:         '0.3s',
    transitionTimeLeave:    '1s',
    opacity:                '1',
    opacityHover:           '1',
    overflow:               'hidden',
    cursor:                 'default',
    customCursorIcon:       '',
    customCursorSize:       '20px',
    tilt:                   false,
    tiltXamount:            10,
    tiltYamount:            10,
    text:                   false,
    textClass:              false,
    textPosition:           'middle',
    textAlignment:          'center',
    textXParallax:          10,
    textYParallax:          10,
    textOpacity:            0,
    textOpacityHover:       1,
    onHover: function(e){
        //Your mouse hover callbacks
    },
    onMove: function(e){
        //Your mouse move callbacks
    },
    onLeave: function(e){
        //Your mouse leave callbacks
    },
    onClick: function(e){
        //Your mouse click callbacks
    }
});

//Change only scale
jQuery('img').parazoom({
    scale: '2'
});

Data attributes

Parazoom can be parametered for each element via data attributes: For example

<!-- Markup to set the scale of the element to 2 -->
<img src="your-image.jpg" data-prz-scale="2">

Javascript options	Data attribute
`scale`	`data-prz-scale`
`transitionTime`	`data-prz-transition-time`
`transitionTimeLeave`	`data-prz-transition-time-leave`
`opacity`	`data-prz-opacity`
`opacityHover`	`data-prz-opacity-hover`
`overflow`	`data-prz-overflow`
`cursor`	`data-prz-cursor`
`customCursorIcon`	`data-prz-custom-cursor`
`customCursorSize`	`data-prz-custom-cursor-size`
`tilt`	`data-prz-tilt`
`tiltXamount`	`data-prz-tilt-x-amount`
`tiltYamount`	`data-prz-tilt-y-amount`
`text`	`data-prz-text`
	`data-prz-text-content`
`textPosition`	`data-prz-text-position`
`textClass`	`data-prz-text-class`
`textPosition`	`data-prz-text-position`
`textAlignment`	`data-prz-text-alignment`
`textXParallax`	`data-prz-text-x-parallax`
`textYParallax`	`data-prz-text-y-parallax`
`textOpacity`	`data-prz-text-opacity`
`textOpacityHover`	`data-prz-text-opacity-hover`