{"id":16361432,"url":"https://github.com/kirlovon/zoomtastic","last_synced_at":"2025-03-21T00:31:49.695Z","repository":{"id":41987805,"uuid":"239770732","full_name":"Kirlovon/zoomtastic","owner":"Kirlovon","description":"Tiny image viewer for web! 🔎","archived":false,"fork":false,"pushed_at":"2024-03-25T16:38:26.000Z","size":5792,"stargazers_count":23,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T21:04:48.379Z","etag":null,"topics":["browser","image","image-viewer","javascript","javascript-library","js","webpack"],"latest_commit_sha":null,"homepage":"https://kirlovon.dev/zoomtastic","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/Kirlovon.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":"2020-02-11T13:38:52.000Z","updated_at":"2024-07-30T06:40:15.000Z","dependencies_parsed_at":"2024-10-28T09:12:04.867Z","dependency_job_id":"d4157946-8a0c-4f65-9fd9-8d188c06ea9e","html_url":"https://github.com/Kirlovon/zoomtastic","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":"0.19999999999999996","last_synced_commit":"0dd95fb084c5334f4e704804f93a9dcc5d7312ae"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kirlovon%2Fzoomtastic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kirlovon%2Fzoomtastic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kirlovon%2Fzoomtastic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kirlovon%2Fzoomtastic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kirlovon","download_url":"https://codeload.github.com/Kirlovon/zoomtastic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244094267,"owners_count":20397020,"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":["browser","image","image-viewer","javascript","javascript-library","js","webpack"],"created_at":"2024-10-11T02:14:00.478Z","updated_at":"2025-03-21T00:31:47.049Z","avatar_url":"https://github.com/Kirlovon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/Kirlovon/Zoomtastic/master/assets/logo.png\" alt=\"Zoomtastic Logo\" width=\"256\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eZoomtastic\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003ci\u003eTiny image viewer for web!\u003c/i\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/license/Kirlovon/Zoomtastic.svg\" alt=\"License\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/last-commit/Kirlovon/Zoomtastic.svg\" alt=\"Last commit\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/v/zoomtastic.svg\" alt=\"NPM version\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/types/zoomtastic.svg\" alt=\"Types\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://kirlovon.github.io/zoomtastic/\"\u003e🔎 Demo\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n- 📊 Lightweight _(***1.2kb*** gzipped)_\n- 🥂 Short and simple API\n- 🎬 Different animations\n- 📦 No dependencies\n\n\u003cbr\u003e\n\n## Installation\n\nInstallation via [NPM](https://www.npmjs.com/package/zoomtastic) repository:\n\n```bash\nnpm install zoomtastic --save\n```\n\nor via [CDN](https://unpkg.com/):\n\n```html\n\u003cscript src=\"https://unpkg.com/zoomtastic@2.3.1\"\u003e\u003c/script\u003e\n```\n\n\u003cbr\u003e\n\n## Example\nAPI is so simple that you don't even need documentation, take a look at HTML example:\n```html\n\u003cbody\u003e\n\t\u003cimg zoomtastic src=\"https://via.placeholder.com/100\" /\u003e\n\t\u003cimg zoomtastic src=\"https://via.placeholder.com/200\" /\u003e\n\t\u003cimg zoomtastic src=\"https://via.placeholder.com/300\" /\u003e\n\n\t\u003cscript src=\"https://unpkg.com/zoomtastic\"\u003e\u003c/script\u003e\n\t\u003cscript\u003e\n\n\t\t// Mount viewer element\n\t\tZoomtastic.mount({\n\t\t\tsize: '95%',\n\t\t\teasing: 'ease',\n\t\t\tduration: 300,\n\t\t\tbackground: 'rgba(0, 0, 0, 0.9)',\n\t\t\tfilter: 'drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3))',\n\t\t\tanimation: 'slide' // Can be slide, fade, zoom or drop\n\t\t});\n\n\t\t// Listen for an elements that contains \"zoomtastic\" attribute, and use \"src\" attribute as image source\n\t\tZoomtastic.listen('[zoomtastic]', 'src');\n\n\t\t// Show image manually\n\t\tZoomtastic.show('https://via.placeholder.com/600');\n\n\t\t// Hide image\n\t\tZoomtastic.hide();\n\n\t\u003c/script\u003e\n\u003c/body\u003e\n```\nAlternatively, you can use a bundlers like [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Parcel](https://parceljs.org/) or [Vite](https://vitejs.dev/):\n```javascript\nimport Zoomtastic from 'zoomtastic';\n\n// Mount viewer elements\nZoomtastic.mount();\n\n// Show image viewer manually\nZoomtastic.show('https://via.placeholder.com/256');\n\n// Hide image viewer\nZoomtastic.hide();\n```\n\nOr you can import module using [Skypack](https://www.skypack.dev/):\n```html\n\u003cscript type=\"module\"\u003e\n\timport Zoomtastic from 'https://cdn.skypack.dev/zoomtastic';\n\n\t// Mount viewer elements\n\tZoomtastic.mount();\n\u003c/script\u003e\n```\n\n\u003cbr\u003e\n\n## API\n\n### Zoomtastic.mount(_config_)\nThis function creates and mounts to the page the necessary Zoomtastic elements. If you call this function again, the elements will be recreated.\n\nThe configuration is optional, and has these parameters:\n* **size** - Image size. _(Default: `95%`)_\n* **ease** - Timing function. _(Default: `ease`)_\n* **duration** - Animations duration. _(Default: `300`)_\n* **background** - Viewer background. _(Default: `rgba(0, 0, 0, 0.9)`)_\n* **filter** - CSS filter applied to image. _(Default: `drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3))`)_\n* **animation** - Animation type. Can be `slide`, `fade`, `zoom` or `drop`. _(Default: `slide`)_ \n\n### Zoomtastic.listen(_target_, _source_)\nAdd click event listener to the image elements. By default, it listens to all elements with the attribute `zoomtastic` and takes the image from the `src` attribute. \n\nThe **target** should be a CSS selector, an element or an array of elements.\n\nThe **source** argument must be the name of the attribute from which URL to the image will be taken.\n\n### Zoomtastic.show(_url_)\nShow image viewer. The **url** argument must be link to the image.\n\n### Zoomtastic.hide()\nHide image viewer.\n\n\u003cbr\u003e\n\n## License\n[MIT](https://github.com/Kirlovon/Zoomtastic/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirlovon%2Fzoomtastic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirlovon%2Fzoomtastic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirlovon%2Fzoomtastic/lists"}