<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>Title</title>
    <script src="https://unpkg.com/js-image-zoom@0.4.1/js-image-zoom.js" type="application/javascript"></script>
</head>
<body>
    <div id="img-container" style="width: 400px">
        <img src="https://github.com/malaman/js-image-zoom/blob/master/example/1.jpg" />
    <div>
<script>
var options = {
    width: 400,
    zoomWidth: 500,
    offset: {vertical: 0, horizontal: 10}
};
new ImageZoom(document.getElementById("img-container"), options);

</script>
</body>
</html>

Check basic example in browser: Basic Example

Arguments

container (Object) - DOM element, which contains an source image
options (Object) - js-image-zoom options
- width (number) - width of the source image(required)
- height (number) - height of the source image(optional).
- zoomWidth (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
- img (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
- scale (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
- offset (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
- zoomContainer (node) - DOM node reference where zoomedImage will be appended to (default to the container element of image)
- zoomStyle (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')
- zoomPosition (string) - position of zoomed image. It can be: 'top', 'left', 'bottom' or the default 'right'. (Ignored if zoomDefaultPosition is false)
- zoomDefaultPosition (boolean) Disable the default position styles in zoomedImage if false. (default: true)
- zoomLensStyle (string) custom style applied to to zoom lents (i.e. 'opacity: 0.1;background-color: white;')

For react users

React wrapper around js-image-zoom is available:

react-image-zoom

RouteMap

extend testing coverage
add additional examples

Keywords

FAQs

What is js-image-zoom?

Is js-image-zoom popular?

Is js-image-zoom well maintained?

Package last updated on 11 Feb 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install