jQuery

Introduction

The Doka jQuery adapter transforms the standard Doka API into a jQuery plugin API.

Installation

<!-- add to the head of the document -->
<link href="doka.min.css" rel="stylesheet" type="text/css" />

<!-- add to right before the end of the body tag -->
<script src="jquery.js"></script>
<script src="doka.jquery.min.js"></script>

Usage

Now we can use Doka as a jQuery plugin.

Select elements with the familiar $() function and use .doka() to run functions and change Doka instance properties or methods.

$(function () {
    // Turn an element into an editor
    $('.my-doka').doka();

    // Turn an element into an editor with configuration options
    $('.my-doka').doka({
        cropAspectRatio: 1,
        cropAspectRatioOptions: [
            {
                label: 'Free',
                value: null,
            },
            {
                label: 'Portrait',
                value: 1.5,
            },
            {
                label: 'Square',
                value: 1,
            },
            {
                label: 'Landscape',
                value: 0.75,
            },
        ],
    });

    // Set a property crop aspect ratio
    $('.my-doka').doka('cropAspectRatio', 1);

    // Listen for load event
    $('.my-doka').on('Doka:load', function (e) {
        console.log('an image has been loaded', e);
    });

    // Manually edit an image using the edit method
    $('.my-doka')
        .doka('edit', 'my-image.jpeg')
        .then(function (output) {
            console.log('image edit result', output);
        });
});

Using the static Doka API we can open the modal editor.

$(function () {
    // call create method without a target element
    $.fn.doka.create({
        cropAspectRatio: 1,
        cropAspectRatioOptions: [
            {
                label: 'Free',
                value: null,
            },
            {
                label: 'Portrait',
                value: 1.5,
            },
            {
                label: 'Square',
                value: 1,
            },
            {
                label: 'Landscape',
                value: 0.75,
            },
        ],
    });
});