{"id":20983552,"url":"https://github.com/oom-components/viewer","last_synced_at":"2025-09-10T23:33:00.070Z","repository":{"id":57343172,"uuid":"93253413","full_name":"oom-components/viewer","owner":"oom-components","description":"Image viewer","archived":false,"fork":false,"pushed_at":"2017-08-05T10:16:26.000Z","size":27,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T00:55:32.861Z","etag":null,"topics":["es6","image-viewer","progressive-enhancement","vanilla-javascript","viewer"],"latest_commit_sha":null,"homepage":null,"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/oom-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-03T14:30:31.000Z","updated_at":"2018-02-08T20:17:17.000Z","dependencies_parsed_at":"2022-09-12T07:00:15.752Z","dependency_job_id":null,"html_url":"https://github.com/oom-components/viewer","commit_stats":null,"previous_names":["progressive-web-components/viewer"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oom-components","download_url":"https://codeload.github.com/oom-components/viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243392281,"owners_count":20283559,"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":["es6","image-viewer","progressive-enhancement","vanilla-javascript","viewer"],"created_at":"2024-11-19T05:49:14.370Z","updated_at":"2025-03-13T10:41:58.692Z","avatar_url":"https://github.com/oom-components.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PW Viewer\n\nImage viewer with the following features:\n\n* Follows the progressive enhancement strategy: **if javascript fails, the web page keeps working**\n* CSS powered:\n  * **High performance:** Use css transform to scale, rotate, translate elements\n  * No styles or themes are provided with this package. **You decide how the viewer must look.**\n* Responsive:\n  * **Suport for touch devices**\n  * **Works with `\u003cpicture\u003e`** element\n  * **Light and fast**\n* Modern\n  * Build with ES6 and modern tools (webpack, babel, etc)\n  * Easy to extend and adapt to your needs\n  * Support for **all modern browsers.** IE10+ should work\n\n\n## Install\n\nRequirements:\n\n* NPM to install the [package and the dependencies](https://www.npmjs.com/package/pw-viewer)\n* Webpack (or any other javascript loader)\n\n```\nnpm install pw-viewer\n```\n\n## Usage\n\n### Html\n\nLet's say we have the following html code:\n\n```html\n\u003cbutton class=\"viewer-zoom\"\u003eZoom\u003c/button\u003e\n\u003cbutton class=\"viewer-reset\"\u003eReset\u003c/button\u003e\n\n\u003cfigure class=\"viewer\"\u003e\n    \u003cpicture\u003e\n        \u003csource srcset=\"http://placehold.it/2000x1200\" media=\"(min-width:2000px)\"\u003e\n        \u003csource srcset=\"http://placehold.it/1500x900\" media=\"(min-width:1500px)\"\u003e\n        \u003csource srcset=\"http://placehold.it/1000x600\" media=\"(min-width:1000px)\"\u003e\n        \u003csource srcset=\"http://placehold.it/500x300\" media=\"(min-width:500px)\"\u003e\n        \u003cimg srcset=\"http://placehold.it/500x300\" data-viewer-src=\"http://placehold.it/2000x1200\"\u003e\n    \u003c/picture\u003e\n\u003c/figure\u003e\n```\n\nNote the `data-viewer-src` attribute in the image. It's used to load a full quality image on zoom.\n\n### CSS\n\nThe following css code is optional (but recommended):\n\n```css\n.viewer {\n    overflow: hidden;\n    margin: 0;\n}\n.viewer img {\n    max-width: 100%;\n    display: block;\n    margin: 0 auto;\n    transition: transform .5s;\n}\n```\n\n### JS\n\nAnd finally the javascript to build the viewer:\n\n```js\nimport Viewer from 'pw-viewer';\n\n//Init the viewer\nvar myViewer = new Viewer(document.querySelector('.viewer img'));\n\n//Zoom on click the button\ndocument.querySelector('.viewer-zoom').addEventListener('click', event =\u003e {\n    myViewer.transform({ scale: 1.5 }); //zoom\n    myViewer.drag(true); //enable dragging\n});\n\ndocument.querySelector('.viewer-reset').addEventListener('click', event =\u003e {\n    myViewer.reset(); //Reset transforms\n    myViewer.drag(false); //disable dragging\n});\n```\n\n## Demo\n\nTo run the demo, just clone this repository enter in the directory and execute:\n\n```sh\nnpm install\nnpm start\n```\n\nYou should see something in `http://localhost:8080/`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foom-components%2Fviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fviewer/lists"}