Examples

Basic example for the editor

<figure class="lfy-focuspoint-view" id="view" style="background-image: url('/my-image.jpg')">
    <div class="lfy-focuspoint-edit" id="edit">
        <button class="lfy-focuspoint-button" id="button"></button>
    </div>
</figure>

These css-classes are quite necessary. We recommend you to always use those classes and overwrite the styling for the button to your needs.

var element = document.getElementById('edit');

var editor = new Focuspoint.Edit(element, {
    view_elm: document.getElementById('view'),
    x: 0.456,
    y: 0.124
});

editor.on('drag:end', function(x, y) {
    // your callback code here
});

We look for an element with the 'lfy-focuspoint-button' class to find the button. When you don't use that classname, you can alternatively specify a button_elm.

Basic example for viewing

<figure class="lfy-focuspoint-view" id="view" style="background-image: url('/my-image.jpg')"></figure>

var element = document.getElementById('view');

var viewer = new Focuspoint.View(element, {
    x: 0.456,
    y: 0.124
});