{"id":21816594,"url":"https://github.com/5monkeys/zoomenhance","last_synced_at":"2026-05-11T16:13:35.852Z","repository":{"id":145235834,"uuid":"21393527","full_name":"5monkeys/zoomenhance","owner":"5monkeys","description":null,"archived":false,"fork":false,"pushed_at":"2014-07-01T16:18:19.000Z","size":148,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-26T06:41:12.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/5monkeys.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":"2014-07-01T15:48:27.000Z","updated_at":"2014-07-02T08:48:34.000Z","dependencies_parsed_at":"2023-03-22T22:03:05.846Z","dependency_job_id":null,"html_url":"https://github.com/5monkeys/zoomenhance","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fzoomenhance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fzoomenhance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fzoomenhance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5monkeys%2Fzoomenhance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5monkeys","download_url":"https://codeload.github.com/5monkeys/zoomenhance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244776340,"owners_count":20508506,"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":[],"created_at":"2024-11-27T15:35:27.913Z","updated_at":"2026-05-11T16:13:35.802Z","avatar_url":"https://github.com/5monkeys.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ZOOM! ENHANCE!\n==============\n\n\u003ca href=\"https://www.youtube.com/watch?v=LhF_56SxrGk\"\u003e\n  \u003cimg width=500 src=\"http://38.media.tumblr.com/f31196bf5e4599063e5ced92028efee3/tumblr_mp2x3h5odY1qzg3l3o1_1280.jpg\" alt=\"Vector in on that guy over there...\"\u003e\n\u003c/a\u003e\n\nZoom/enhance is a jQuery plugin that adds a zooming lens to high-resolution images.\n\n**[Vector in on a demo](http://labs.5monkeys.se/zoomenhance.html).**\n\nBut how do *I* use it?\n======================\n\nFirst, download and add a `\u003cscript src=...\u003e` tag after jQuery.\n\n```javascript\n$('.mcgyver img').zoomenhance();\n```\n\nZoom/enhance only works on images at the time of writing, and always looks at the `src` attribute to determine which image is the high-resolution 'backing image.' It is a cakewalk to implement other facilities, and therefore left as an exercise for a future collaborator.\n\nOk, does it do cheap tricks?\n============================\n\nMost certainly. On initializing, pass a JavaScript object with options, like so:\n\n```javascript\n$('.mcgyver img').zoomenhance({ manualCss:  true,\n                                zoomFactor: 2 });\n```\n\nSo what are your options?\n\n- **zoomFactor** is perhaps most important. When set, it's used to scale the backing image up or down. For example, with a zoom factor of two and an `\u003cimg\u003e` element that is 300 pixels wide, the zoomed image will be enhanced to twice that size, i.e. 600 pixels. The default behavior is to show the picture at native resolution; this gives the crispest display as it incurs no smudging effects during interpolation.\n\n- **manualCss** is described below, but basically prevents the plugin from adding a bunch of static CSS nonsense to the element's styling. Having the CSS in a stylesheet results in performance improvements, again, see below.\n\n- **width** and **height** determine the size of the lens, which, being circular, should have a width equal to its height. The default is 200x200 pixels, i.e. a circle with a 100px radius.\n\n- **hitboxPadding** sets the number of pixels *outside* the image that still trigger the lens to show. It can be useful if users need to look closely at edges of things. The default is five pixels.\n\nI want it schnappy!\n===================\n\nOf course, nothing worthwhile is ever not schnappy, right? So, here are a few tips:\n\n- Copy the CSS from the overlay element by means of manual labour. Strip pertinent dynamic CSS declarations like the positioning information, and use the `manualCss` option.\n\n- Also add the following snippet to make the overlay its own [render layer](https://trac.webkit.org/wiki/Accelerated%20rendering%20and%20compositing):\n\n  ```css\n  .zoomenhance-overlay {\n      declarations from previous step...\n    \n      -webkit-transform: translatez(0);\n      -o-transform: translatez(0);\n      transform: translatez(0);\n  }\n  ```\n\nQuestions, comments, feedback\n=============================\n\nPull requests, issues and e-mails are welcome! Contact `ludvig` at `5monkeys`\ndot `agency`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fzoomenhance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5monkeys%2Fzoomenhance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5monkeys%2Fzoomenhance/lists"}