Focal point for your images

[ This description is mirrored from at on 2019-05-22 ]

Build Status Published on


skeleton-focal is a Polymer 2 element that provides a focal point for your images. Allows you to drag the focal point and returns the value in attributes that reflects the selected x and y coordinates in a 0-1 range.

    <h4>Focal point coordinates</h4>
      <li><strong>X:</strong> [[x]]</li>
      <li><strong>Y:</strong> [[y]]</li>


Install skeleton-focal with Bower

$ bower install --save FabricElements/skeleton-focal


Import it into the <head> of your page

<link rel="import" href="bower_components/skeleton-focal/skeleton-focal.html">

Example: basic usage

<skeleton-focal src="image.jpg" x="{{x}}" y="{{y}}"></skeleton-focal>
  • src (string) - The URL of an image.
  • x (number) - attribute that reflects the selected x coordinate in a 0-1 range.
  • y (number) - attribute that reflects the selected y coordinate in a 0-1 range.

Other attributes

  • loaded (boolean) - Read-only value that is true when the image is loaded.
  • crossorigin (string) - CORS enabled images support:
  • placeholder (string) - This image will be used as a background/placeholder until the src image has loaded. Use of a data-URI for placeholder is encouraged for instant rendering.
  • preventLoad (boolean) - When true, the image is prevented from loading and any placeholder is shown. This may be useful when a binding to the src property is known to be invalid, to prevent 404 requests.


Please check CONTRIBUTING.


Released under the BSD 3-Clause License.


Link to this version
ImportedReleased 25 August 2017BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save FabricElements/skeleton-focal"#2.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0


  • polymer#Polymer/polymer#^2.0.0
  • iron-image#PolymerElements/iron-image#^2.1.2