EasyZoom

https://i-like-robots.github.io/EasyZoom/
Admin
EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original...
Tokens:748
Snippets:13
Trust Score:9.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Instantiate and access EasyZoom API

Source: https://i-like-robots.github.io/EasyZoom

Initialize the plugin via jQuery and access the instance API through the element's data.

```javascript
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();

// Get an instance API
var api = $easyzoom.data('easyZoom');
```

--------------------------------

### .show([MouseEvent|TouchEvent], [Boolean])

Source: https://i-like-robots.github.io/EasyZoom

Displays the zoom image flyout. Optionally takes an instance of a mouse or touch event and can be set to only display the flyout if the mouse is over the target.

```APIDOC
## .show([MouseEvent|TouchEvent], [Boolean])

### Description
Displays the zoom image flyout. Optionally takes an instance of a mouse or touch event and can be set to only display the flyout if the mouse is over the target.
```

--------------------------------

### .swap(standardSrc, zoomSrc, [srcset])

Source: https://i-like-robots.github.io/EasyZoom

Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional srcset argument.

```APIDOC
## .swap(standardSrc, zoomSrc, [srcset])

### Description
Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional srcset argument.
```

--------------------------------

### Define EasyZoom HTML structure

Source: https://i-like-robots.github.io/EasyZoom

The target element must contain a link to the large image and the smaller image. Ensure no other elements interfere with the layout.

```html
<div class="easyzoom">
    <a href="images/zoom.jpg">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>
```

--------------------------------

### Apply EasyZoom CSS shrink-wrap strategies

Source: https://i-like-robots.github.io/EasyZoom

The target element must shrink-wrap the smaller image using either float or inline-block display properties.

```css
/* Shrink wrap strategy 1 */
.easyzoom {
    float: left;
}
.easyzoom img {
    display: block;
}


/* Shrink wrap strategy 2 */
.easyzoom {
    display: inline-block;
}
.easyzoom img {
    vertical-align: bottom;
}
```

--------------------------------

### .teardown()

Source: https://i-like-robots.github.io/EasyZoom

Removes all events and elements created and attached by EasyZoom.

```APIDOC
## .teardown()

### Description
Removes all events and elements created and attached by EasyZoom.
```

--------------------------------

### .hide()

Source: https://i-like-robots.github.io/EasyZoom

Removes the zoom image flyout.

```APIDOC
## .hide()

### Description
Removes the zoom image flyout.
```
Tokens:
Raw