{"id":20218276,"url":"https://github.com/z3ut/mouse-wheel-zoom","last_synced_at":"2026-03-16T22:02:49.926Z","repository":{"id":57303186,"uuid":"124673621","full_name":"z3ut/mouse-wheel-zoom","owner":"z3ut","description":"Zoom html elements with mouse wheel","archived":false,"fork":false,"pushed_at":"2020-03-01T13:59:30.000Z","size":304,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-14T07:24:19.302Z","etag":null,"topics":["html","mouse","wheel","zoom"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/z3ut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-10T16:22:04.000Z","updated_at":"2023-06-02T08:12:28.000Z","dependencies_parsed_at":"2022-09-02T08:11:12.674Z","dependency_job_id":null,"html_url":"https://github.com/z3ut/mouse-wheel-zoom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/z3ut/mouse-wheel-zoom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fmouse-wheel-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fmouse-wheel-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fmouse-wheel-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fmouse-wheel-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/z3ut","download_url":"https://codeload.github.com/z3ut/mouse-wheel-zoom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3ut%2Fmouse-wheel-zoom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268492035,"owners_count":24258747,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["html","mouse","wheel","zoom"],"created_at":"2024-11-14T06:37:52.900Z","updated_at":"2026-03-16T22:02:49.847Z","avatar_url":"https://github.com/z3ut.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mouse wheel zoom\n\nZoom html elements with mouse wheel.\n\n[Live demo](https://z3ut.github.io/mouse-wheel-zoom/)\n\n## Installation\n\n```\nnpm i mouse-wheel-zoom\n```\n\n\n## Usage\n\n```\nimport { mouseWheelZoom } from 'mouse-wheel-zoom';\n\nconst wz = mouseWheelZoom({\n  element: document.querySelector('[data-wheel-zoom]'),\n  zoomStep: .25  \n});\n\n// reset zoom\nwz.reset();\n```\n\n## Description\n\nIspired by [Jack Moore wheelzoom](https://github.com/jackmoore/wheelzoom) This package allows to view image and copy image url after right-click on image.\n\nFor given html element mouse-wheel-zoom will replace it with inline-block div wrapper. Wrapper will have two elements - original element with absolute positioning and cloned element with zero opacity. Wrapper size will be determined by zero opacity element, original element with absolute positioning can be moved\\resized with mouse.\n\nFor element\n\n```\n\u003cimg class=\"image\" data-wheel-zoom src=\"./cat.jpeg\"\u003e\n```\n\nMouse-wheel-zoom will replace it with\n\n```\n\u003cdiv style=\"display: inline-block; position: relative; overflow: hidden;\"\u003e\n  \u003cimg class=\"image\" data-wheel-zoom=\"\" src=\"./cat.jpeg\" style=\"opacity: 0;\"\u003e\n  \u003cimg class=\"image\" data-wheel-zoom=\"\" src=\"./cat.jpeg\" style=\"position: absolute; top: 0; left: 0;\"\u003e\n\u003c/div\u003e\n```\n\n_Warning!_ Do not use for zooming html elements with id. After cloning page will have 2 elements with same id.\n\n## Documentation\n\n### Config object\n\nProperty | Description | Default\n---|---|---\nelement | DOM element to zoom | none\nzoomStep | Size change for each step, relative to 1 = initial size | .1\n\n### Returned object\n\nMethod | Description\n---|---\nreset | Rest current zoom level and position\nsetSrc | Change image src\nsetSrcAndReset | Change image src and reset\ndispose | Remove zooming element from page\n\n## Development\n\nProject require globally installed [parcel](https://parceljs.org/getting_started.html). Run ```npm run start``` and see demo page with live reload on [http://localhost:1234](http://localhost:1234)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3ut%2Fmouse-wheel-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fz3ut%2Fmouse-wheel-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3ut%2Fmouse-wheel-zoom/lists"}