smply.gd Focuspoint Loader

Lazyloading for Focuspoint images. This autoload script uses the jQuery focuspoint plugin by Jono Menz and provides additional helper methods to properly init your focuspoint images with a comprehensive API.

Installation

Install via npm npm install @smplygd/focuspoint-loader --save. Depends on the focuspoint plugin and jQuery.

Markup

Use the basic focuspoint markup for basic functionality:

``html



`

Example with lazy loading:

This is not part of the original plugin functionality, this script provides this functionality. Provide an
additional data-image attribute with the path to your focuspoint image. We recommend to place the
tag with a 1x1 transparent gif, so you don't have to extra load any placeholder images.
THe script will then exchange the image paths, wait for the image to load and then initialize
the focuspoint plugin.
`html



`

Usage

Include file in your script file and run SGFocuspointLoader.init();. You may use the options below to
override the base settings. The init() method will automatically init all focuspoint images with
the .focuspoint class.

Further you can initialize additional elements or reinitialize if dimensions have changed using the
SGFocuspointLoader.initElements( elements ); method. We use this method to reinitialize
focuspoint elements inside sliders so the focuspoint gets calculated correctly after the
slider has been initialized or after you appended some AJAX html which contains focuspoint elements.

You may pass a NodeList or a jQuery collection.

You can also you initElement( element ) to just initialize one source. You can pass any argument that
either is an jQuery instance or may be wrapped into a jQuery instance.

The difference between both is that initElements initializes each node individually
calling the initElement method on each item.




$3


You may provide additional options and overrides via an object passed to the init({})
method. Here is a list of all available options and their default values:

`javascript
SGFocuspointLoader.init({
// Provide a selector that should trigger the autoloading of
// focuspoint images
triggerSelector: ".focuspoint",
});
``