{"id":21073939,"url":"https://github.com/worka/vanilla-js-wheel-zoom","last_synced_at":"2025-05-15T19:07:44.875Z","repository":{"id":45683702,"uuid":"196927620","full_name":"worka/vanilla-js-wheel-zoom","owner":"worka","description":"Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)","archived":false,"fork":false,"pushed_at":"2024-10-15T22:04:59.000Z","size":1276,"stargazers_count":173,"open_issues_count":10,"forks_count":30,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T16:17:35.651Z","etag":null,"topics":["drag-scrollable-image","dragimage","imagescale","imagezoom","javascript","js","mousewheel","pinch-to-zoom","scrollableimage","vanilla","wheelzoom","zoom"],"latest_commit_sha":null,"homepage":"https://worka.github.io/vanilla-js-wheel-zoom","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/worka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-15T05:06:50.000Z","updated_at":"2025-03-02T19:57:45.000Z","dependencies_parsed_at":"2023-02-09T21:15:59.524Z","dependency_job_id":"3a7e3494-2f72-4be8-b746-254a7c4190c9","html_url":"https://github.com/worka/vanilla-js-wheel-zoom","commit_stats":{"total_commits":330,"total_committers":4,"mean_commits":82.5,"dds":"0.29393939393939394","last_synced_commit":"a1449e4dd91bc85301c9ff7daf7e064e72f0ea1e"},"previous_names":[],"tags_count":107,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worka%2Fvanilla-js-wheel-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worka%2Fvanilla-js-wheel-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worka%2Fvanilla-js-wheel-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worka%2Fvanilla-js-wheel-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/worka","download_url":"https://codeload.github.com/worka/vanilla-js-wheel-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254404356,"owners_count":22065641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-scrollable-image","dragimage","imagescale","imagezoom","javascript","js","mousewheel","pinch-to-zoom","scrollableimage","vanilla","wheelzoom","zoom"],"created_at":"2024-11-19T19:13:46.747Z","updated_at":"2025-05-15T19:07:44.836Z","avatar_url":"https://github.com/worka.png","language":"JavaScript","funding_links":["https://paypal.me/bworka"],"categories":[],"sub_categories":[],"readme":"# vanilla-js-wheel-zoom\n\nImage resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)\n\n![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/worka/vanilla-js-wheel-zoom)\n[![GitHub stars](https://img.shields.io/github/stars/worka/vanilla-js-wheel-zoom)](https://github.com/worka/vanilla-js-wheel-zoom/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/worka/vanilla-js-wheel-zoom)](https://github.com/worka/vanilla-js-wheel-zoom/issues)\n[![GitHub forks](https://img.shields.io/github/forks/worka/vanilla-js-wheel-zoom)](https://github.com/worka/vanilla-js-wheel-zoom/network)\n[![](https://data.jsdelivr.com/v1/package/npm/vanilla-js-wheel-zoom/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vanilla-js-wheel-zoom)\n\nAdvantages:\n* the ability to fit the image into a container of any proportion\n* the ability to scale any HTML content\n* touch screen devices support\n\n\u003e Starting with version 5, the plugin switched to using `style transform`. To use the plugin in older browsers, switch to earlier versions.\n\n\u003e You need to center the image (or any HTML content) in the \"viewport\" in which scaling will take place. The \"viewport\" is taken automatically as the parent of the image in DOM.\n\n\u003e HTML content can be of any structure, but the topmost child element in the “viewport” must be one. In the example with \"badge\" below, it will be more clear what is meant.\n\n🖐 If you find my plugin helpful, please \u003ca href=\"https://paypal.me/bworka\"\u003edonate me\u003c/a\u003e 🤝\n\n\u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/image.html\"\u003eDemo (only one image)\u003c/a\u003e\n\n\u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/images.html\"\u003eDemo (multi images)\u003c/a\u003e\n\n\u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/html.html\"\u003eDemo (html)\u003c/a\u003e\n\n### Install\n\n```cmd\nnpm i vanilla-js-wheel-zoom\n```\n\nor\n\n```cmd\nyarn add vanilla-js-wheel-zoom\n```\n\n### Get started\n\n```css\n#myViewport {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n```\n\n```html\n\u003cdiv id=\"myViewport\" style=\"width:600px;height:600px;\"\u003e\n    \u003cimg id=\"myContent\" src=\"https://via.placeholder.com/2400x1400\" alt=\"image\" /\u003e\n\u003c/div\u003e\n```\n\n``` javascript\nWZoom.create('#myContent');\n```\n\n#### Syntax \u0026 Parameters\n\n```javascript\n/**\n * Create WZoom instance\n * @param {string|HTMLElement} selectorOrHTMLElement\n * @param {Object} [options]\n * @returns {WZoom}\n */\nconst wzoom = WZoom.create(selectorOrHTMLElement[, options]);\n```\n\n#### Badge on the image\n\n```css\n#myViewport {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#myBadge {\n    position: absolute;\n    border: solid 2px red;\n    font-size: 80px;\n}\n\n#myImage {\n    width: auto;\n    height: auto;\n    margin: auto;\n}\n```\n\n``` html\n\u003cdiv id=\"myViewport\" style=\"width:600px;height:600px;\"\u003e\n    \u003cdiv id=\"myContent\"\u003e\n        \u003cdiv id=\"myBadge\" style=\"left:900px;top:500px;\"\u003eBadge\u003c/div\u003e\n        \u003cimg id=\"myImage\" src=\"https://via.placeholder.com/2500x1500\" alt=\"image\"/\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n``` javascript\nWZoom.create('#myContent', {\n    type: 'html',\n    width: 2500,\n    height: 1500,\n});\n```\n\n#### Control buttons\n\n```html\n\u003cbutton data-zoom-up\u003eZoom Up\u003c/button\u003e\n\u003cbutton data-zoom-down\u003eZoom Down\u003c/button\u003e\n```\n\n``` javascript\nconst wzoom = WZoom.create('img');\n\ndocument.querySelector('[data-zoom-up]').addEventListener('click', () =\u003e {\n    wzoom.zoomUp();\n});\n\ndocument.querySelector('[data-zoom-down]').addEventListener('click', () =\u003e {\n    wzoom.zoomDown();\n});\n```\n\n#### On window resize\n\n``` javascript\nconst wzoom = WZoom.create('img');\n\nwindow.addEventListener('resize', () =\u003e {\n    wzoom.prepare();\n});\n```\n\n#### How to rotate the image?\n\n[Try this 😉](https://github.com/worka/vanilla-js-wheel-zoom/issues/21) (and see \u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/image-rotate.html\"\u003edemo\u003c/a\u003e)\n\n#### Callbacks onMaxScaleReached() / onMinScaleReached()\n\nThere are no such, but [you can get](https://github.com/worka/vanilla-js-wheel-zoom/issues/34) the desired behavior (and see \u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/scale-reached.html\"\u003edemo\u003c/a\u003e)\n\n#### Saving image state on page reload\n\nSee \u003ca href=\"https://worka.github.io/vanilla-js-wheel-zoom/examples/images.html\"\u003edemo\u003c/a\u003e\n\n#### Playground...\n\n\u003ca href=\"https://codesandbox.io/s/worka-vanilla-js-wheel-zoom-forked-sbndwy\"\u003eHave some fun 🤸‍♂️\u003c/a\u003e\n\n### Options\n\n| name                  | type        | default     | note                                                                                                                                                                                                                                                                                                  |\n|-----------------------|-------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| type                  | _String_    | `image`     | `image` - if you need to scale only one image. In this case, there is no need to pass the parameters `width` and `height`. `html` - if you need to scale the HTML code. It is advisable to specify the parameters `width` and `height` that correspond to the original full size of the HTML content. |\n| width                 | _Number_    | `null`      | For type `image` computed auto (if width set null), for type `html` need set real html content width, else computed auto.                                                                                                                                                                             |\n| height                | _Number_    | `null`      | For type `image` computed auto (if height set null), for type `html` need set real html content height, else computed auto.                                                                                                                                                                           |\n| minScale              | _Number_    | `null`      | The minimum scale to which the image can be zoomed.\u003cbr\u003eIf `falsy` or greater than `maxScale` then computed auto.                                                                                                                                                                                      |\n| maxScale              | _Number_    | `1`         | The maximum scale to which the image can be zoomed.\u003cbr\u003e`1` means that the image can be maximized to 100%, `2` - 200%, etc.                                                                                                                                                                            |\n| speed                 | _Number_    | `1.1`       | Factor with which the image will be scaled.\u003cbr\u003eThe larger the value, the larger the step.\u003cbr\u003eCan tend to `1`, but should not be equal to it (ex. `1.05`, `1.005`) or can be greater (ex. `1.5`, `2`, `5`, `10`)                                                                                       |\n| zoomOnClick           | _Boolean_   | `true`      | Zoom to maximum (minimum) size on click.                                                                                                                                                                                                                                                              |\n| zoomOnDblClick        | _Boolean_   | `false`     | Zoom to maximum (minimum) size on double click. If `true` then `zoomOnClick` = `false`                                                                                                                                                                                                                |\n| prepare               | _Function_  | `undefined` | Called after the script is initialized when the image is scaled and fit into the container. Gets `WZoom` instance as the first argument.                                                                                                                                                              |\n| rescale               | _Function_  | `undefined` | Called on every change of scale. Gets `WZoom` instance as the first argument.                                                                                                                                                                                                                         |\n| alignContent          | _String_    | `center`    | Align content `center`, `left`, `top`, `right`, `bottom`                                                                                                                                                                                                                                              |\n| smoothTime            | _Number_    | `.25`       | Time of smooth extinction. if `0` then no smooth extinction. Disabled for touch devices. (value in seconds)                                                                                                                                                                                           |\n| disableWheelZoom      | _Boolean_   | `false`     |                                                                                                                                                                                                                                                                                                       |\n| reverseWheelDirection | _Boolean_   | `false`     | Reverse wheel zoom direction                                                                                                                                                                                                                                                                          |\n|                       |             |             |                                                                                                                                                                                                                                                                                                       |\n| dragScrollable        | _Boolean_   | `true`      | If `true` -  scaled image can be dragged with the mouse to see parts of the image that are out of scale.                                                                                                                                                                                              |\n| smoothTimeDrag        | _Number_    | smoothTime  | Optional override to `smoothTime` for mouse drag/pan actions.\u003cbr\u003eSetting low (or 0) allows fluid drag actions, while maintaining zoom-smoothness from higher `smoothTime`.\u003cbr\u003eIf not provided, matches whatever `smoothTime` resolves to: `smoothTime`'s provided value or its default.               |\n| onGrab                | _Function_  | `undefined` | Called after grabbing an element. Gets the `event` and `WZoom` instance as the arguments.                                                                                                                                                                                                             |\n| onMove                | _Function_  | `undefined` | Called on every tick when moving element. Gets the `event` and `WZoom` instance as the arguments.                                                                                                                                                                                                     |\n| onDrop                | _Function_  | `undefined` | Called after dropping an element. Gets the `event` and `WZoom` instance as the arguments.                                                                                                                                                                                                             |\n\n\n### API\n\n| name                         | note                                               |\n|------------------------------|----------------------------------------------------|\n| .prepare()                   | Reinitialize script                                |\n| .transform(top, left, scale) | Rebuild content state with passed params           |\n| .zoomUp()                    | Zoom on one step (see option `speed`)              |\n| .maxZoomUp()                 | Zoom to max scale                                  |\n| .zoomDown()                  | Zoom out on one step (see option `speed`)          |\n| .maxZoomDown()               | Zoom to min scale                                  |\n| .zoomUpToPoint({x, y})       | Zoom on one step to point (see option `speed`)     |\n| .zoomDownToPoint({x, y})     | Zoom out on one step to point (see option `speed`) |\n| .maxZoomUpToPoint({x, y})    | Zoom to max scale to point                         |\n| .destroy()                   | Destroy object                                     |\n\n### License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworka%2Fvanilla-js-wheel-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworka%2Fvanilla-js-wheel-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworka%2Fvanilla-js-wheel-zoom/lists"}