{"id":37422913,"url":"https://github.com/bloomscorp/bmx-zoomify","last_synced_at":"2026-01-16T06:08:46.550Z","repository":{"id":159130771,"uuid":"634454151","full_name":"bloomscorp/bmx-zoomify","owner":"bloomscorp","description":"Angular library to zoom / magnify images on hover.","archived":false,"fork":false,"pushed_at":"2024-10-28T14:00:40.000Z","size":422,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T08:44:59.251Z","etag":null,"topics":["angular","angularlibrary","bmx-zoomify","hover-effects","typescript","zoom-images"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bloomscorp.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-30T07:02:30.000Z","updated_at":"2024-10-28T14:00:48.000Z","dependencies_parsed_at":"2024-11-14T07:33:35.716Z","dependency_job_id":"c385d9e9-12be-4542-a08f-a062d3e8855f","html_url":"https://github.com/bloomscorp/bmx-zoomify","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"35915d3c736c610f1e62a40fa85fe4dbffa4ce86"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bloomscorp/bmx-zoomify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloomscorp%2Fbmx-zoomify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloomscorp%2Fbmx-zoomify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloomscorp%2Fbmx-zoomify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloomscorp%2Fbmx-zoomify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bloomscorp","download_url":"https://codeload.github.com/bloomscorp/bmx-zoomify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloomscorp%2Fbmx-zoomify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","angularlibrary","bmx-zoomify","hover-effects","typescript","zoom-images"],"created_at":"2026-01-16T06:08:46.068Z","updated_at":"2026-01-16T06:08:46.539Z","avatar_url":"https://github.com/bloomscorp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bmx-zoomify\n\nThe `bmx-zoomify` package is a simple and lightweight npm package that enables magnifying images on hover. It can be easily integrated into any angular application.\n\n## Installation\n\nTo install the `bmx-zoomify` package, you can use npm:\n\n```bash\nnpm i bmx-zoomify\n```\n\nor\n\n```bash\nnpm i bmx-zoomify --force\n```\n\n\n## Usage\n\nTo use the `bmx-zoomify` package, you need to add the `bmx-zoomify` tag your HTML document:\n\n```html\n\u003cbmx-zoomify [src]=\"src\"\u003e\u003c/bmx-zoomify\u003e\n```\n\n## src Input\n\nThe `bmx-zoomify` package comes with some default interfaces. You need provide the src to render the image.\n\nNote: `width` and `height` attributes are optional\n\n```typescript\nimport {BmxZoomifyImage} from \"./bmx-zoomify-image\";\n\nlet src: BmxZoomifyImage = {\n\turl: 'image.jpg', //image url from assets folder or CDN\n\taltText: '' //alt Text for SEO\n};\n```\n\nor\n\n```typescript\nimport {BmxZoomifyImage} from \"./bmx-zoomify-image\";\n\nlet src: BmxZoomifyImage = {\n\turl: 'image.jpg', //image url from assets folder or CDN\n\taltText: '', //alt Text for SEO\n\twidth: '500',\n\theight: '500' //provide height and width for image optimisation\n};\n```\n\nYou can customize the image size by providing your own CSS styles or Tailwind.\n\n```html\n\u003cbmx-zoomify [src]=\"src\" class=\"w-full h-full\"\u003e\u003c/bmx-zoomify\u003e\n```\nor\n\n```html\n\u003cbmx-zoomify [src]=\"src\" class=\"w-52 h-full\"\u003e\u003c/bmx-zoomify\u003e\n```\n\nor\n\n```html\n\u003cbmx-zoomify [src]=\"src\" class=\"zoom-style\"\u003e\u003c/bmx-zoomify\u003e\n```\n\n```css\n.zoom-style {\n\twidth: 330px;\n\theight: 250px;\n}\n```\n\n## Compatibility\n\nThe `bmx-zoomify` package works in all modern browsers, including Chrome, Firefox, Safari, and Edge. It may not work in older browsers that do not support CSS variables or CSS transforms.\n\n## License\n\nThe `bmx-zoomify` package is released under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloomscorp%2Fbmx-zoomify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbloomscorp%2Fbmx-zoomify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloomscorp%2Fbmx-zoomify/lists"}