{"id":20630591,"url":"https://github.com/benherbst/zoom-any-js","last_synced_at":"2025-04-15T18:22:32.728Z","repository":{"id":246712289,"uuid":"821940269","full_name":"BenHerbst/zoom-any-js","owner":"BenHerbst","description":"ZoomAny.js - Zoom anything, using Vanilla JavaScript. Also supports TypeScript","archived":false,"fork":false,"pushed_at":"2024-07-08T14:41:48.000Z","size":5539,"stargazers_count":11,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T14:37:21.822Z","etag":null,"topics":["javascript","library","web"],"latest_commit_sha":null,"homepage":"https://zoomanyjs.benherbst.net/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BenHerbst.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":"2024-06-29T21:29:17.000Z","updated_at":"2025-01-18T11:53:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8956680-10fd-4191-b3f1-7815a7cddb78","html_url":"https://github.com/BenHerbst/zoom-any-js","commit_stats":null,"previous_names":["benherbst/zoom-any-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenHerbst%2Fzoom-any-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenHerbst%2Fzoom-any-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenHerbst%2Fzoom-any-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenHerbst%2Fzoom-any-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BenHerbst","download_url":"https://codeload.github.com/BenHerbst/zoom-any-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249126381,"owners_count":21216768,"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":["javascript","library","web"],"created_at":"2024-11-16T14:08:57.010Z","updated_at":"2025-04-15T18:22:32.678Z","avatar_url":"https://github.com/BenHerbst.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# https://zoomanyjs.benherbst.net/\n\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eZoomAny.js\u003c/h1\u003e\n\u003cimg src=\"ZoomAnyJs.svg\" width=\"500\"\u003e\n\nZoom literally **ANY** HTML Element using pure vanilla JavaScript.\n\n_\\*Supports TypeScript_\n\u003c/div\u003e\n\n## Features\n- TypeScript support\n- Uses relative and not absolute position ( keep same place, just make zoomable )\n- Enable zoom for any HTML Element you want, not just images\n- Boundings\n- Fully controlable via functions and data-* attributes\n\n## Install\n\nInstall via NPM:\n```\nnpm i zoom-any-js\n```\n\nOr via CDN:\n```\nCSS: https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.css\nJS: https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.js\n```\n\n## Basic Usage\n\nTo get started, add the class \"zoomable\" to the element you want to enable zoom on:\n``` html\n\u003cimg class=\"zoomable\" src=\"public/img.png\"\u003e\n```\n\n### NPM + Bundler:\nThen create a new instance in JavaScript, and import the CSS:\n``` javascript\nimport ZoomAnyJs from \"zoom-any-js\";\nimport \"zoom-any-js/dist/zoom-any-js.css\";\n\nconst zoom = new ZoomAnyJs()\n```\n\n### CDN:\n``` html\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.css\"\u003e\n```\n\n``` html\n\u003cscript type=\"module\"\u003e\n    import ZoomAnyJs from \"https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.js\"\n\n    const zoom = new ZoomAnyJs()\n\u003c/script\u003e\n```\n\nNow try to zoom into your image, it should start to zoom! 🎉\n\n## Examples\n\nGo to center on click:\n``` ts\ndocument.getElementById(\"img\").addEventListener(\"click\", () =\u003e {\n    zoom.center()\n    zoom.apply()\n})\n```\n\nZoom into the screen center:\n``` js\nzoom.zoomAt(1.1, { x: window.innerWidth / 2, y: window.innerHeight / 2 })\nzoom.apply()\n```\n\nUsing the wrapper class:\n``` html\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cbutton class=\"zoomable\" data-max-zoom=\"2000\" data-min-zoom=\"20\" data-bounds style=\"background-color: red; color: white; width: 500px; height: 300px; font-size: 30px;\"\u003eTEEEEEEST\u003c/button\u003e\n\u003c/div\u003e\n```\n\n![Wrapper Zoomed Out](3.png)\n\n![Wrapper Zoomed In](4.png)\n\nThis keeps it inside the wrapper div and makes you zoom into it without any overflow.\n\nWhatsapp or Windows Photos like Image Zoom:\n``` html\n\u003cimg class=\"zoomable\" data-bounds src=\"test/img/1.png\"\u003e\n```\n\n![Bounded Zoomed Out](1.png)\n\n![Bounded Zoomed In](2.png)\n\nMultiple images:\nEach gets their own instance, and you pass a css selector into the constructor like this:\n``` js\nconst zoom1 = new ZoomAnyJs()\nconst zoom2 = new ZoomAnyJs(\".zoom2\")\nconst zoom3 = new ZoomAnyJs(\"#zoom3\")\n\n\u003cimg class=\"zoomable\" data-bounds src=\"test/img/1.png\"\u003e\n\u003cimg class=\"zoom2\" data-bounds src=\"test/img/2.png\"\u003e\n\u003cimg id=\"zoom3\" data-bounds src=\"test/img/3.png\"\u003e\n```\n\n## Options\n\nBasic options can be set by using data-* attributes on the element you zoom:\n\n- data-max-zoom: Set maximimum zoom. Default: 4000\n- data-min-zoom: Set minimum zoom. Default: 10\n- data-bounds: Enable fit to bounding. Default: false\n- data-origin-parent: Use the _offsetParent_ as origin for fitting bounding. Else it uses window. Default: false\n\n_The default zoom level is 100, which is the original size and represents a scale of 1.0_\n\n## Control via JavaScript\n\nThe instance, so in this case _const zoom_, has many functions which you can use to fully control the libary.\n\n**You need to call .apply() to update the view to the changes!!!**\n\nAll available functions:\n- center(): Moves the image to the center of the window or the offsetParent when using data-origin-parent\n- fitToBounds(): Fits into the bounds when using data-bounds, else it just returns void\n- zoomAt(amplitude: number, pos: {x: number, y: number}): Move to the position by the amplitude. Amplitude \u003e 1 zooms in and amplitude \u003c 1 zooms out\n- addListeners(): Adds the event listeners\n- removeListeners(): Removes the event listeners\n- apply(): Has to be callen to update the view. Without calling it, you cant see any change\n- destroy(): Makes the element \"normal\" again, as before running the zoom library\n- reset(): Resets position and zoom to default values\n- getZoom(): Returns the zoom\n- setZoom(value: number): Sets the zoom\n- getPos(): Returns the position\n- setPos(value: {x: number, y: number}): Sets the position\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenherbst%2Fzoom-any-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenherbst%2Fzoom-any-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenherbst%2Fzoom-any-js/lists"}