{"id":21413441,"url":"https://github.com/intera/vue-zoom-on-hover","last_synced_at":"2025-04-09T07:09:42.007Z","repository":{"id":28620140,"uuid":"118888112","full_name":"Intera/vue-zoom-on-hover","owner":"Intera","description":"responsive image with zoomed image on hover","archived":false,"fork":false,"pushed_at":"2022-01-14T01:30:36.000Z","size":345,"stargazers_count":165,"open_issues_count":5,"forks_count":53,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-25T06:21:37.909Z","etag":null,"topics":["vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intera.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":"2018-01-25T08:56:50.000Z","updated_at":"2024-03-21T10:34:12.000Z","dependencies_parsed_at":"2022-07-26T07:17:02.154Z","dependency_job_id":null,"html_url":"https://github.com/Intera/vue-zoom-on-hover","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intera%2Fvue-zoom-on-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intera%2Fvue-zoom-on-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intera%2Fvue-zoom-on-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intera%2Fvue-zoom-on-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intera","download_url":"https://codeload.github.com/Intera/vue-zoom-on-hover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994122,"owners_count":21030050,"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":["vue"],"created_at":"2024-11-22T18:18:28.583Z","updated_at":"2025-04-09T07:09:41.986Z","avatar_url":"https://github.com/Intera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-zoom-on-hover\nresponsive image with zoomed image on hover.\n\n![example image](demo/example.png?raw=true)\n\n[demo](https://intera.github.io/vue-zoom-on-hover/demo/main.html) (ctrl+click to open in new tab)\n\nthis [vue.js](https://vuejs.org/) component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area\n\n# installation\ninclude `zoomOnHover.js`, which registers the vue component and defines zoomOnHover, the variable for the component configuration object.\nalso include `zoomOnHover.css`, which contains the needed styles\n\n# usage\nminimal example (with an example div as parent container)\n```html\n\u003cdiv style=\"width:400px\"\u003e\n  \u003czoom-on-hover img-normal=\"image.jpg\"\u003e\u003c/zoom-on-hover\u003e\n\u003c/div\u003e\n```\n\nall options\n```html\n\u003czoom-on-hover img-normal=\"image.jpg\" img-zoom=\"bigger-image.jpg\" :scale=\"1.5\" :disabled=\"true\"\n  @loaded=\"onload\" @resized=\"onresize\"\u003e\u003c/zoom-on-hover\u003e\n```\n\nregister the component with your vue app or component\n```javascript\nnew Vue({\n  el: \"#app\",\n  components: {\n    zoomOnHover: zoomOnHover\n  }\n})\n```\n\nyou can also check out demo/main.html for an example\n\n# features\n* enabled/disabled property\n* custom scale for zoomed image\n* optionally a separate zoom image\n* event when all images loaded\n* event when images resized (responsive css, etc)\n* basic touch support with zoom/unzoom on tap\n\n# caveats\nif the parent container is bigger than the source image, the normal image stretches to the size of the parent container but the zoom image will have the original width (will be smaller for example)\n\n# possible enhancements\n* support for touch devices\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintera%2Fvue-zoom-on-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintera%2Fvue-zoom-on-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintera%2Fvue-zoom-on-hover/lists"}