{"id":18421267,"url":"https://github.com/thompsonemerson/zoomove","last_synced_at":"2025-04-05T01:05:48.921Z","repository":{"id":3271668,"uuid":"48912770","full_name":"thompsonemerson/zoomove","owner":"thompsonemerson","description":":mag: :fireworks: Enlarges the image with the mouse hover and move","archived":false,"fork":false,"pushed_at":"2023-04-27T13:01:44.000Z","size":3145,"stargazers_count":341,"open_issues_count":11,"forks_count":52,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-14T12:33:51.109Z","etag":null,"topics":["jquery","move","plugin","zoom"],"latest_commit_sha":null,"homepage":"http://thompsonemerson.github.io/zoomove","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/thompsonemerson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-01-02T14:44:14.000Z","updated_at":"2024-04-04T10:20:24.000Z","dependencies_parsed_at":"2022-08-31T09:22:48.333Z","dependency_job_id":null,"html_url":"https://github.com/thompsonemerson/zoomove","commit_stats":{"total_commits":52,"total_committers":7,"mean_commits":7.428571428571429,"dds":"0.46153846153846156","last_synced_commit":"4d3c7a3900c61bb6b2cb64b16dfe84476a421504"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thompsonemerson%2Fzoomove","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thompsonemerson%2Fzoomove/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thompsonemerson%2Fzoomove/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thompsonemerson%2Fzoomove/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thompsonemerson","download_url":"https://codeload.github.com/thompsonemerson/zoomove/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271526,"owners_count":20911587,"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":["jquery","move","plugin","zoom"],"created_at":"2024-11-06T04:24:58.738Z","updated_at":"2025-04-05T01:05:48.891Z","avatar_url":"https://github.com/thompsonemerson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZooMove | jQuery Zoom Image\n\n[![Website](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](http://thompsonemerson.github.io/zoomove)\n[![licence mit](https://img.shields.io/badge/licence-MIT-blue.svg)](http://thompsonemerson.mit-license.org/)\n[![Build Status](https://travis-ci.org/thompsonemerson/zoomove.svg?branch=master)](https://travis-ci.org/thompsonemerson/zoomove)\n[![GitHub version](https://badge.fury.io/gh/thompsonemerson%2Fzoomove.svg)](https://badge.fury.io/gh/thompsonemerson%2Fzoomove)\n[![Bower version](https://badge.fury.io/bo/zoomove.svg)](https://badge.fury.io/bo/zoomove)\n[![npm version](https://badge.fury.io/js/zoomove.svg)](http://badge.fury.io/js/zoomove)\n[![CDNJS version](https://img.shields.io/cdnjs/v/zoomove.svg)](https://cdnjs.com/libraries/zoomove)\n\n\u003e It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.\n\n## Table of Contents\n\n- [Install](#install)\n- [Setup](#setup)\n- [How to Use](#how-to-use)\n- [Examples](#examples)\n- [Browser Support](#browser-support)\n- [Contributing](#contributing)\n- [History](#history)\n- [License](#license)\n\n## Install\n\nGet with npm\n\n```bash\n$ npm install zoomove --save\n```\n\nbower\n\n```bash\n$ bower install zoomove --save\n```\n\nyarn\n\n```bash\n$ yarn install zoomove\n```\n\nOr CDN (by [cdnjs](https://cdnjs.com/))\n\n```html\n\u003c!-- CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.3.0/zoomove.min.css\"\u003e\n\n\u003c!-- JavaScript --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.3.0/zoomove.min.js\"\u003e\u003c/script\u003e\n```\n\nIf you prefer you can just [download a ZIP](https://github.com/thompsonemerson/zoomove/archive/master.zip) file.\n\n\n## Setup\n\nFirst, include the script located on the `dist` folder.\n\n```html\n\u003c!-- ZooMove CSS minified --\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/zoomove.min.css\"\u003e\n\n\u003c!-- jQuery CDN JS minified (must) --\u003e\n\u003cscript src=\"https://code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- ZooMove JS minified --\u003e\n\u003cscript src=\"dist/zoomove.min.js\"\u003e\u003c/script\u003e\n```\n\nNow need to prepare our(s) image(s) and show to the ZooMove.\n```html\n\u003c!-- Item image --\u003e\n\u003cfigure class=\"zoo-item\" data-zoo-image=\"img/example.jpg\"\u003e\u003c/figure\u003e\n\n\u003c!-- Starting the ZooMove --\u003e\n\u003cscript\u003e\n   $('.zoo-item').ZooMove();\n\u003c/script\u003e\n```\n\nReady, prepared environment, now is hour of our plugin take action and prepare all remaining process. \u003cbr\u003e\nNow says it is not easy?! ;)\n\n\n## How to Use\n\n| Property  | Default  | Description |\n| :------------ |:---------------:| :-----|\n| data-zoo-image     | -               | The url of the photo to be displayed.                   \t\t\t\t\t\t\t|\n| data-zoo-scale     | 1.5 (150%)      | Sets the zoom size that should be applied to the image.              |\n| data-zoo-move      | true            | Choose whether the image should move with the mouse move.            |\n| data-zoo-over      | false           | With 'over' it is possible to define whether the image may be above. |\n| data-zoo-cursor    | false           | Define the cursor pointer or default.                                |\n| data-zoo-autosize  | true            | Sets the size of the automatic image.                                |\n\n```html\n\u003c!-- HTML Element --\u003e\n\u003cfigure\n  class=\"zoo-item\"\n  data-zoo-image=\"[value]\"\n  data-zoo-scale=\"[value]\"\n  data-zoo-move=\"[value]\"\n  data-zoo-over=\"[value]\"\n  data-zoo-cursor=\"[value]\"\n  data-zoo-autosize=\"[value]\"\n  \u003e\n\u003c/figure\u003e\n```\n\n```html\n\u003c!-- JavaScript --\u003e\n\u003cscript\u003e\n   $('.zoo-item').ZooMove({\n       image: '[value]',\n       scale: '[value]',\n       move: '[value]',\n       over: '[value]',\n       cursor: '[value]',\n       autosize: '[value]'\n   });\n\u003c/script\u003e\n\u003c!-- Thus it is applied universally --\u003e\n```\n\n## Examples\n\n\u003e  Images by [lorempixel](http://lorempixel.com).\n\n![GIFs \u003c3](https://media.giphy.com/media/3o6ozmHwJIzCaBadgI/giphy.gif)\n\n### Image 1\n\n\u003e Default\n\n```html\n\u003cfigure class=\"zoo-item\" data-zoo-image=\"img/example.jpg\"\u003e\u003c/figure\u003e\n```\n\n### Image 2\n\n\u003e Scale value `3` (`300%`)\n\n```html\n\u003cfigure class=\"zoo-item\" data-zoo-image=\"img/example.jpg\" data-zoo-scale=\"3\"\u003e\u003c/figure\u003e\n```\n\n### Image 3\n\n\u003e Over `true` and Move `false`\n\n```html\n\u003cfigure class=\"zoo-item\" data-zoo-image=\"img/example.jpg\" data-zoo-over=\"true\" data-zoo-move=\"false\"\u003e\u003c/figure\u003e\n```\n\n## Browser Support\n\n| \u003cimg src=\"http://i.imgur.com/luDsuvw.png\" width=\"48px\" height=\"48px\" alt=\"Chrome logo\"\u003e | \u003cimg src=\"http://i.imgur.com/puSpCj0.png\" width=\"48px\" height=\"48px\" alt=\"Firefox logo\"\u003e | \u003cimg src=\"https://i.imgur.com/PrDuPeI.png\" width=\"48px\" height=\"48px\" alt=\"IE logo\"\u003e | \u003cimg src=\"https://i.imgur.com/nhAH49O.png\" width=\"48px\" height=\"48px\" alt=\"Opera logo\"\u003e | \u003cimg src=\"https://i.imgur.com/GpMpdFE.png\" width=\"48px\" height=\"48px\" alt=\"Safari logo\"\u003e | \u003cimg src=\"https://i.imgur.com/4zSy2WO.png\" width=\"48px\" height=\"48px\" alt=\"Edge logo\"\u003e |\n|:---:|:---:|:---:|:---:|:---:|:---:|\n| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 9+ ✔ | 12+ ✔ |\n\n\n## Contributing\n\nHelp improve these docs. Open an [issue](https://github.com/thompsonemerson/zoomove/issues/new) or submit a pull request.\n\n1. Navigate to the main page of the repository\n1. [Fork it!](https://github.com/thompsonemerson/zoomove#fork-destination-box)\n1. Create your feature branch: `git checkout -b my-new-feature`\n1. Commit your changes: `git commit -m 'Add some feature'`\n1. Push to the branch: `git push origin my-new-feature`\n1. Submit a pull request =D\n\n## History\n\nSee [Releases](https://github.com/thompsonemerson/zoomove/releases) for detailed changelog.\n\n## License\n\n[MIT License](http://thompsonemerson.mit-license.org/) © Emerson Thompson\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthompsonemerson%2Fzoomove","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthompsonemerson%2Fzoomove","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthompsonemerson%2Fzoomove/lists"}