{"id":16941346,"url":"https://github.com/francoischalifour/medium-zoom-element","last_synced_at":"2025-07-24T13:33:21.504Z","repository":{"id":57294038,"uuid":"106603426","full_name":"francoischalifour/medium-zoom-element","owner":"francoischalifour","description":"🔎🌅 HTML Element for medium-zoom","archived":false,"fork":false,"pushed_at":"2017-10-15T00:57:46.000Z","size":2608,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-16T14:03:54.073Z","etag":null,"topics":["htmlelement","medium-zoom","webcomponent"],"latest_commit_sha":null,"homepage":"https://medium-zoom.francoischalifour.com","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/francoischalifour.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}},"created_at":"2017-10-11T20:04:21.000Z","updated_at":"2023-04-10T09:56:25.000Z","dependencies_parsed_at":"2022-09-01T13:01:43.506Z","dependency_job_id":null,"html_url":"https://github.com/francoischalifour/medium-zoom-element","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/francoischalifour/medium-zoom-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoischalifour%2Fmedium-zoom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoischalifour%2Fmedium-zoom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoischalifour%2Fmedium-zoom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoischalifour%2Fmedium-zoom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/francoischalifour","download_url":"https://codeload.github.com/francoischalifour/medium-zoom-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoischalifour%2Fmedium-zoom-element/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266791340,"owners_count":23984626,"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-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["htmlelement","medium-zoom","webcomponent"],"created_at":"2024-10-13T21:09:19.091Z","updated_at":"2025-07-24T13:33:21.464Z","avatar_url":"https://github.com/francoischalifour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://medium-zoom.francoischalifour.com\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/francoischalifour/medium-zoom/master/logo.svg?sanitize=true\" width=\"64\"\u003e\u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eMedium Zoom Element\u003c/h3\u003e\n  \u003cp align=\"center\"\u003eHTML Element for \u003ca href=\"https://github.com/francoischalifour/medium-zoom\"\u003e\u003ccode\u003emedium-zoom\u003c/code\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/medium-zoom-element\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/medium-zoom-element.svg?style=flat-square\" alt=\"version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/medium-zoom-element/dist/\"\u003e\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/medium-zoom-element/dist/medium-zoom-element.min.js?label=size\u0026style=flat-square\" alt=\"size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/medium-zoom-element/dist/\"\u003e\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/medium-zoom-element/dist/medium-zoom-element.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square\" alt=\"gzip size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/francoischalifour/medium-zoom-element/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/medium-zoom-element.svg?style=flat-square\" alt=\"MIT license\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://codepen.io/francoischalifour/pen/QqZLyz\"\u003e🔬 Playground\u003c/a\u003e ・\n    \u003ca href=\"https://medium-zoom.francoischalifour.com\"\u003e🔎 Demo\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003e Web component bundling the [`medium-zoom`](https://github.com/francoischalifour/medium-zoom) API.\n\n## Usage\n\nFrom [npm](https://www.npmjs.com) or [Yarn](https://yarnpkg.com):\n\n```sh\nnpm install --save medium-zoom-element\n# or\nyarn add medium-zoom-element\n```\n\nFrom a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network):\n\n```html\n\u003cscript src=\"https://unpkg.com/medium-zoom-element@0/dist/medium-zoom-element.min.js\"\u003e\u003c/script\u003e\n```\n\nUse the `medium-zoom` web component in your HTML page:\n\n```html\n\u003cmedium-zoom\n  src=\"image.jpg\"\n  alt=\"Zoomable image\"\n\u003e\u003c/medium-zoom\u003e\n```\n\n## API\n\n### Options\n\n| Attribute           | Description                                                       |\n|---------------------|-------------------------------------------------------------------|\n| `src`               | Source of the image                                               |\n| `alt`               | Alternative text for the image                                    |\n| `width`             | Width of the image                                                |\n| `height`            | Height of the image                                               |\n| `margin`            | Space outside the zoomed image                                    |\n| `background`        | Color of the overlay                                              |\n| `scroll-offset`     | Number of pixels to scroll to dismiss the zoom                    |\n| `disable-metaclick` | Disables the action on meta click (opens the link / image source) |\n| `zoom-target`       | Source of the zoomed image                                            |\n\nRefer to [`medium-zoom`'s options](https://github.com/francoischalifour/medium-zoom#options) for default values.\n\n```html\n\u003cmedium-zoom\n  src=\"image.jpg\"\n  zoom-target=\"image-hd.jpg\"\n  margin=\"48\"\n  background=\"rgba(0,0,0,.16)\"\n  scroll-offset=\"0\"\n  disable-metaclick\n  alt=\"Zoomable image\"\n\u003e\u003c/medium-zoom\u003e\n```\n\n### Methods\n\nRefer to [`medium-zoom`'s methods](https://github.com/francoischalifour/medium-zoom#methods).\n\n### JavaScript getters/setters\n\n* `margin`\n* `background`\n* `scrollOffset`\n* `metaClick`\n* `zoomTarget`\n\n```js\nconst image = document.querySelector('medium-zoom')\n\nimage.margin = 48\nconsole.log(image.margin) // 48\n```\n\n## Dev\n\n* Run `yarn` to install Node dependencies\n* Run `yarn dev` to watch changes and rebuild the library\n* Open [`examples/index.html`](examples/index.html) to check your changes (it includes [`dist/medium-zoom-element.min.js`](dist/medium-zoom-element.min.js) which is watched with `yarn dev`)\n\n## License\n\nMIT © [François Chalifour](https://francoischalifour.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancoischalifour%2Fmedium-zoom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrancoischalifour%2Fmedium-zoom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancoischalifour%2Fmedium-zoom-element/lists"}