Picture

Picture

new Picture(element, options)

Source:
Parameters:
Name Type Description
element HTMLElement

DOM element for component instantiation and scope
options Object
Properties
Name Type Description
imgSelector String

Selector for the image element
debugSelector String

Selector for enabling the debug
imagePendingAttribute String

Selector for hiding the image before calculations are done
focalPointAttribute String

Attribute containing the focal point

Classes

Picture

Members

getRenderedFocalPoint

Description:

  • Get the rendered coordinates of the focal point inside the container.

Source:

Get the rendered coordinates of the focal point inside the container.

handleResize

Description:

  • Debounced call to the update function when resizing.

Source:

Debounced call to the update function when resizing.

Methods

calculateObjectPosition(imageWidth, imageHeight, containerWidth, containerHeight, focalX, focalY)

Description:

  • Calculate the object-position.

Source:
Parameters:
Name Type Description
imageWidth Number

Width of the image
imageHeight Number

Height of the image
containerWidth Number

Width of the container
containerHeight Number

Height of the container
focalX Number

Value in percentage of the horizontal position of the focal point
focalY Number

Value in percentage of the vertical position of the focal point

getFocalPoint()

Description:

  • Read the focal point.

Source:

init()

Description:

  • Initialise component.

Source:

updateDebugMarker()

Description:

  • Set the marker at the right position in the image.

Source:

(async) updateFocalPoint()

Description:

  • Update the image object-position.

Source:

(static) autoInit(root) → {Picture}

Source:
Parameters:
Name Type Description
root HTMLElement

DOM element for component instantiation and scope
Returns:

An instance of Picture.

Type
Picture