{"id":28632712,"url":"https://github.com/eugabrielsilva/image-compare","last_synced_at":"2025-06-12T14:13:08.007Z","repository":{"id":298644490,"uuid":"620371730","full_name":"eugabrielsilva/image-compare","owner":"eugabrielsilva","description":"Image comparison plugin (before/after) in pure JS","archived":false,"fork":false,"pushed_at":"2023-05-25T12:58:32.000Z","size":83,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T06:07:33.533Z","etag":null,"topics":["before-after","image-comparison","javascript-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/eugabrielsilva.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,"zenodo":null}},"created_at":"2023-03-28T14:50:41.000Z","updated_at":"2023-03-28T20:12:16.000Z","dependencies_parsed_at":"2025-06-12T06:07:43.013Z","dependency_job_id":"9e9dc0e3-05df-4e36-b2e6-8d4ca235fee0","html_url":"https://github.com/eugabrielsilva/image-compare","commit_stats":null,"previous_names":["eugabrielsilva/image-compare"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/eugabrielsilva/image-compare","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eugabrielsilva%2Fimage-compare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eugabrielsilva%2Fimage-compare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eugabrielsilva%2Fimage-compare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eugabrielsilva%2Fimage-compare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eugabrielsilva","download_url":"https://codeload.github.com/eugabrielsilva/image-compare/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eugabrielsilva%2Fimage-compare/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259479626,"owners_count":22864367,"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":["before-after","image-comparison","javascript-plugin"],"created_at":"2025-06-12T14:12:57.167Z","updated_at":"2025-06-12T14:13:07.998Z","avatar_url":"https://github.com/eugabrielsilva.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# image-compare\nA very simple image comparison plugin (before/after) in pure JS.\n\n### Demo\nhttps://codepen.io/eugabrielsilva/pen/PodgoQB\n\n### Usage\nInclude the CSS in your `\u003chead\u003e` tag.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"image-compare.min.css\"\u003e\n```\n\nInclude the JS script before your `\u003c/body\u003e` closing tag.\n\n```html\n\u003cscript src=\"image-compare.min.js\"\u003e\u003c/script\u003e\n```\n\nAdd the `.image-compare` class to a container with the before/after images.\n\n**Do not put anything else inside the container or it will break the plugin.**\n\n```html\n\u003cdiv class=\"image-compare\"\u003e\n    \u003cimg src=\"before.jpg\"\u003e\n    \u003cimg src=\"after.jpg\"\u003e\n\u003c/div\u003e\n```\n\n### Customization\nIn order to change the \"Before\" and \"After\" labels, use the `data-before-label` and `data-after-label` attributes in the container.\n\n```html\n\u003cdiv class=\"image-compare\" data-before-label=\"Antes\" data-after-label=\"Depois\"\u003e\n    \u003cimg src=\"before.jpg\"\u003e\n    \u003cimg src=\"after.jpg\"\u003e\n\u003c/div\u003e\n```\n\nIf you want to modify the style, override one of the available CSS classes:\n\n- `.image-compare` - The main plugin container.\n- `.image-compare-label` - \"Before\" and \"After\" labels.\n- `.image-compare-image` - Each image.\n- `.image-compare-handle` - The interactive handle. The arrows are inside a pseudo `::before` element in this class.\n\n### Credits\nDeveloped by [Gabriel Silva](https://eugabrielsilva.tk).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feugabrielsilva%2Fimage-compare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feugabrielsilva%2Fimage-compare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feugabrielsilva%2Fimage-compare/lists"}