jquery-imageflux v0.0.1

jQuery ImageFlux

jQuery Plugin for ImageFlux

Quick Start

Include the required javascript, before the body closing tag :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imageflux.min.js"></script>

Setup your html (minimal example) :

<img data-imgflx-src="/some-original-image.jpg" />

Call the plugin:

$(function(){
    $('img[data-imgflx-src]').imageflux({
        host: 'pX-XXXXXXXXXX.imageflux.jp',
        format: 'webp:auto',
        allowUpscale: false
    });
});

Documentation

Plugin settings

You can change plugin settings by passing an option object, example :

$('img').imageflux({
    host: 'pX-XXXXXXXXXX.imageflux.jp',

    width: 400,
    height: 300,
    aspect: 'force-scale',
    backgroundColor: 'ffffff',
    origin: 'center',
    allowUpscale: true,

    format: 'webp:auto',
    quality: 60,
    optimizeHuhmanTable: false,
    lossless: false,
    removeExif: 'without-orientation',
});

List of available options :

Please see Document of ImageFlux.

Parameter override by data

The parameter can also be overridden by data of an element.

Specify the parameter name with the prefix data-imgflx-.

Example :

<img data-imgflx-src="/some-original-image.jpg" data-imgflx-lossless="true" data-imgflx-quality="60" />