{"id":13426735,"url":"https://github.com/jonom/jquery-focuspoint","last_synced_at":"2026-02-21T00:04:26.350Z","repository":{"id":19752781,"uuid":"23009934","full_name":"jonom/jquery-focuspoint","owner":"jonom","description":"jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.","archived":false,"fork":false,"pushed_at":"2020-04-01T22:48:30.000Z","size":4829,"stargazers_count":3124,"open_issues_count":12,"forks_count":207,"subscribers_count":113,"default_branch":"master","last_synced_at":"2026-01-23T10:44:47.139Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-16T03:40:26.000Z","updated_at":"2025-12-03T07:39:16.000Z","dependencies_parsed_at":"2022-08-07T09:15:34.991Z","dependency_job_id":null,"html_url":"https://github.com/jonom/jquery-focuspoint","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/jonom/jquery-focuspoint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonom%2Fjquery-focuspoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonom%2Fjquery-focuspoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonom%2Fjquery-focuspoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonom%2Fjquery-focuspoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonom","download_url":"https://codeload.github.com/jonom/jquery-focuspoint/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonom%2Fjquery-focuspoint/sbom","scorecard":{"id":531406,"data":{"date":"2025-08-11","repo":{"name":"github.com/jonom/jquery-focuspoint","commit":"14ea26bbcf59a059b46455827da8b7389feb8082"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":3,"reason":"Found 6/16 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: MIT-LICENSE.txt:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 22 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T05:50:17.745Z","repository_id":19752781,"created_at":"2025-08-20T05:50:17.745Z","updated_at":"2025-08-20T05:50:17.745Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29668645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T23:24:07.480Z","status":"ssl_error","status_checked_at":"2026-02-20T23:24:06.202Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2024-07-31T00:01:43.064Z","updated_at":"2026-02-21T00:04:26.318Z","avatar_url":"https://github.com/jonom.png","language":"JavaScript","readme":"# jQuery FocusPoint\n\n## FocusPoint 2\n\nI started work on a major update to this plugin a couple of years ago, but it has been in limbo for a while and probably won't be picked up again unless someone wants to sponsor the work (please [get in touch](http://jonathonmenz.com) if you do!). I didn't get as far as removing the jQuery dependancy but please feel free to use the v-2-dev branch to benefit from a few new features:\n\n* Better resizing performance\n* More familiar coordinate system (like that used in CSS)\n* Suppor for ideal and minimum cropping region\n\nIf you love this plugin feel free to send me an encouraging email or consider sponsoring an update. You're also welcome to make a [small donation](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=5VUDD3ACRC4TC) if you like. I receive an average of one per year, so it won't go unnoticed. 😄💰\n\n## Intelligent cropping for flexible image containers\n\n![image](demos/img/demo.jpg?raw=true)\n\nWebsites don't have a single layout any more. The space you have for an image may be portrait on a laptop, landscape on a tablet, and square on a mobile - particularly if you're using a full-screen image.\n\nIf you have to use the same image file in all these contexts, you might not be happy with the results you get when you 'fill' the allocated space with your image. Your subject might be clipped or completely missing, or just really awkward looking.\n\nFocusPoint makes sure your image looks great in any container, by ensuring the 'spare' parts of your image (negative space) are cropped out before the important parts.\n\nFor a quick overview of the plugin check out this [video by Petr Tichy](http://youtu.be/Wxmxsw65BQw?t=6m49s).\n\n## Examples\n\nHere are some examples showing the same image cropped a variety of different ways at once. Make sure you play with resizing the browser window to get a feel for what FocusPoint does.\n\n* \t[Lizard](http://jonom.github.io/jquery-focuspoint/demos/grid/lizard.html)\n* \t[Kangaroo](http://jonom.github.io/jquery-focuspoint/demos/grid/kangaroo.html)\n* \t[Dolphin](http://jonom.github.io/jquery-focuspoint/demos/grid/dolphin.html)\n* \t[Bird](http://jonom.github.io/jquery-focuspoint/demos/grid/bird.html)\n\nAnd here is a [full screen](http://jonom.github.io/jquery-focuspoint/demos/full-screen/index.html) demo.\n\n## How does it work?\n\nThe idea is that most images have a focal point or subject that is the most important part of the image. In the case of a traditional portrait photo this would be the subject's face (or specifically the spot right between their eyes). In the image above it's arguably the point halfway between the two people's faces.\n\nFocusPoint requires you to indicate where this focal point is located within your image, and then works in the background to ensure that point is never cropped out.\n\n\n## How to use\n\n#### 1. Calculate your image's focus point\n\nAn image's focus point is made up of x (horizontal) and y (vertical) coordinates. The value of a coordinate can be a number with decimal points anywhere between -1 and +1, where 0 is the centre. X:-1 indicates the left edge of the image, x:1 the right edge. For the y axis, y:1 is the top edge and y:-1 is the bottom.\n\n![image](demos/img/grid.png?raw=true)\n\n**Confused?** Don't worry, there's a handy script included to help you find the focus coordinates of an image with a single click. Check out the [helper tool](http://jonom.github.io/jquery-focuspoint/demos/helper/index.html) *(vastly improved courtesy of [@auginator](https://github.com/auginator)).*\n\n#### 2. Include javascript and CSS\n\nYou'll need to include jQuery (v1.9 or greater), the FocusPoint script, and FocusPoint css file. Example:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"focuspoint.css\"\u003e\n\u003cscript src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"focuspoint.js\"\u003e\u003c/script\u003e\n```\n\n#### 3. Mark up your image container\n\nSpecify the image dimensions and focus point coordinates on the image container. The image will take up whatever space is available in the container, so make sure there is some space to fill by setting a height for the container in your CSS. Example:\n\n```html\n\u003cdiv class=\"focuspoint\"\ndata-focus-x=\"0.331\"\ndata-focus-y=\"-0.224\"\ndata-image-w=\"400\"\ndata-image-h=\"300\"\u003e\n\t\u003cimg src=\"image.jpg\" alt=\"\" /\u003e\n\u003c/div\u003e\n```\n\nNote: setting `data-image-w` and `data-image-h` is optional but recommended. Omitting these value means your image will not be positioned correctly inside the frame until it has finished loading, which may cause a visible jump.\n\n#### 4. Fire FocusPoint plugin\n\nUsually the best place for this will be inside your `$(document).ready()` function.\n\n```javascript\n//Fire plugin\n$('.focuspoint').focusPoint();\n```\n\nThat's it!\n\n#### Configuration options\n\nFocusPoint comes with a few options you can change to suit your needs.\n\n| Option                 | Values                | Default | Description |\n| ---------------------- | --------------------- | ------- | ----------- |\n| `reCalcOnWindowResize` | `true` or `false`     | `true`  | Whether or not to re-adjust image when the window is resized |\n| `throttleDuration`     | Int e.g. `0` or `100` | `17`    | Throttling rate in milliseconds. Set to `0` to disable throttling. |\n\nExample usage:\n\n```javascript\n$('.focuspoint').focusPoint({\n\tthrottleDuration: 100 //re-focus images at most once every 100ms.\n});\n```\n\n#### FocusPoint functions\n\nOnce you have initialised FocusPoint on an image container you can access FocusPoint methods like this: `$(someContainer).data('focusPoint').methodName()`.\n\nOr the shorter way, like this: `$(someContainer).focusPoint('methodName')`\n\n| Function        | Description |\n| --------------- | ----------- |\n| `adjustFocus()` | Re-do calculations and re-position an image in it's frame. Call if container dimensions change. |\n| `windowOn()`    | Start window event listener and re-focus image when window is resized |\n| `windowOff()`   | Stop re-focusing image when window is resized |\n\n#### Using FocusPoint in content sliders\n\nCurrently FocusPoint can't do it's calculations properly if an image container or it's parent is set to `display:none`, as it won't have any dimensions. This can cause problems with sliders that hide non-active slides. A work-around for now is to trigger `adjustFocus()` on the image container as soon as it become visible.\n\n## Tips \u0026 Tricks\n\n#### Image composition\nIn order for this concept of 'fluid cropping' to work well, your images will need to include some negative space around the subject that you are happy to be cropped out when necessary. You don't need space on every side of the subject - but for maximum flexibility you'll want to include both some vertical and horizontal negative space.\n\n#### Pure CSS alternative\n\nYou can get a similar effect to this technique using only CSS and the `background-position` and `background-size` properties. Browser support isn't as good (at the moment) and your image won't be positioned exactly the same way - but it's pretty close. The CSS technique leans towards preserving the original composition while FocusPoint is biased towards keeping the subject of the image in the centre of the frame. Depending on your requirements either technique may suit you better.\n\n* [Pure CSS example and comparison](http://jonom.github.io/jquery-focuspoint/demos/css-js-comparison/index.html)\n* [Helper tool for calculating CSS values](http://jonom.github.io/jquery-focuspoint/demos/helper/index.html)\n\n#### SilverStripe CMS integration\n\nThis plugin plays really well with the [silverstripe-focuspoint](https://github.com/jonom/silverstripe-focuspoint) module, which lets you set the focuspoint on any image with just a click, and makes the info available in your front-end templates so you don't have to do any math. It also provides really easy 'destructive' cropping outputting resampled images cropped to a particular width and height based on the same logic.\n\n## Feedback welcome!\n\nNothing would encourage me to keep updating this script more than hearing how it's been used in the real world. Get in touch with me at [jonathonmenz.com](http://jonathonmenz.com) to let me know how you've used this plugin or any suggestions you have for improving it. Please [report bugs or issues on github](https://github.com/jonom/jquery-focuspoint/issues).\n\n**Note:** To date I'm not yet aware of any live websites (apart from my own) that use this plugin - so please get in touch if you launch a site that uses FocusPoint!\n\n#### Tip jar\n\nIf FocusPoint helped you impress a client and you want to say thanks, you're welcome to [leave a small donation](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=5VUDD3ACRC4TC) to help fund the purchase of coffee, which will help me stay awake during future development.\n\n[\u003cimg src=\"https://www.paypalobjects.com/en_AU/i/btn/btn_donate_LG.gif\" alt=\"Donate\"\u003e](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=5VUDD3ACRC4TC)\n\nDonations received / Warm fuzzies generated: **6**  \nCaffé Lattes funded: **17** :coffee: :relieved:  \n**Thanks!** Daniil, Cohan, Romulo, Lemuel, David\n\n## Changelog\n\n#### v1.1.1 2014-09-23\nMinor fixes\n#### v1.1.0 2014-09-18\nRefactored code (thanks @xat)  \nAdded ability to start/stop window-resize listener (thanks @xat)  \nUse % instead of px for positioning, for better scaling  \nAdded shortcuts to plugin methods\n#### v1.0.3 2014-09-06\nThrottled window resize updates\n#### v1.0.2 2014-09-05\nMade setting image width and height on shell optional (thanks @luruke)\n#### v1.0.1 2014-09-04\nCleaned up variables\n#### v1.0.0 2014-08-19\nInitial release\n","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=5VUDD3ACRC4TC"],"categories":["JavaScript","Images","13. 页面交互"],"sub_categories":["Data Table","13.5 图片剪裁/图片处理 ###","13.5 图片剪裁/图片处理/图片转换"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonom%2Fjquery-focuspoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonom%2Fjquery-focuspoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonom%2Fjquery-focuspoint/lists"}