jQuery asImagePicker

A jquery plugin that for pick a image.

Main files
Quick start
Requirements
Usage
Examples
Options
Methods
Events
No conflict
Browser support
Contributing
Development
Changelog
Copyright and license

Main files

dist/
├── jquery-asImagePicker.js
├── jquery-asImagePicker.es.js
├── jquery-asImagePicker.min.js
└── css/
    ├── asImagePicker.css
    └── asImagePicker.min.css

Quick start

Several quick start options are available:

Download the latest build

Development - unminified
Production - minified

Install From Bower

bower install jquery-asImagePicker --save

Install From Npm

npm install jquery-asImagePicker --save

Install From Yarn

yarn add jquery-asImagePicker

Build From Source

If you want build from source:

git clone git@github.com:amazingSurge/jquery-asImagePicker.git
cd jquery-asImagePicker
npm install
npm install -g gulp-cli babel-cli
gulp build

Done!

Requirements

jquery-asImagePicker requires the latest version of jQuery.

Usage

Including files:

<link rel="stylesheet" href="/path/to/asImagePicker.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-asImagePicker.js"></script>

Required HTML structure

<input type="text" class="imagePicker" value='' />

Initialization

All you need to do is call the plugin on the element:

jQuery(function($) {
  $('.example').asImagePicker(); 
});

Examples

There are some example usages that you can look at to get started. They can be found in the examples folder.

Options

jquery-asImagePicker can accept an options object to alter the way it behaves. You can see the default options by call $.asImagePicker.setDefaults(). The structure of an options object is as follows:

{
  namespace: 'asImagePicker',
  skin: null,
  disabled: false,
  lang: 'en',
  tpl: function() {
    return '<div class="{{namespace}}">' +
      '<div class="{{namespace}}-initial">' +
      '<i></i>{{strings.placeholder}}' +
      '</div>' +
      '<div class="{{namespace}}-info">' +
      '<img class="{{namespace}}-info-image" src="">' +
      '<div class="{{namespace}}-info-change">{{strings.change}}</div>' +
      '<a class="{{namespace}}-info-remove" href="">x</a>' +
      '</div>' +
      '</div>';
  },
  process: function(value) {
    if (value) {
      return JSON.stringify(value);
    }
    return '';
  },
  parse: function(value) {
    if (value && typeof value === 'string') {
      return $.parseJSON(value);
    }
    return null;
  },
  getImage: function(value) {
    if (value) {
      return value.image;
    }
    return null;
  },
  onChange: function() { },
  select: function() { },
  strings: {}
}

Methods

Methods are called on asImagePicker instances through the asImagePicker method itself. You can also save the instances to variable for further use.

// call directly
$().asImagePicker('destroy');

// or
var api = $().data('asImagePicker');
api.destroy();

val(value)

Get or set the value.

// get the value
$().asImagePicker('val');

// set the value
$().asImagePicker('val', {"image": "images/gril.png"});

set(value)

Set the value.

$().asImagePicker('set', {"image": "images/gril.png"});

get()

Get the value.

$().asImagePicker('get');

enable()

Enable the image picker functions.

$().asImagePicker('enable');

disable()

Disable the image picker functions.

$().asImagePicker('disable');

destroy()

Destroy the image picker instance.

$().asImagePicker('destroy');

Events

jquery-asImagePicker provides custom events for the plugin’s unique actions.

$('.the-element').on('asImagePicker::ready', function (e) {
  // on instance ready
});

Event	Description
init	Fires when the instance is setup for the first time.
ready	Fires when the instance is ready for API use.
enable	Fired when the `enable` instance method has been called.
disable	Fired when the `disable` instance method has been called.
destroy	Fires when an instance is destroyed.

No conflict

If you have to use other plugin with the same namespace, just call the $.asImagePicker.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="jquery-asImagePicker.js"></script>
<script>
  $.asImagePicker.noConflict();
  // Code that uses other plugin's "$().asImagePicker" can follow here.
</script>

Browser support

Tested on all major browsers.


Latest ✓	Latest ✓	Latest ✓	Latest ✓	9-11 ✓	Latest ✓

As a jQuery plugin, you also need to see the jQuery Browser Support.

Contributing

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-asImagePicker before submitting an issue. There are several ways to help out:

Bug reports
Feature requests
Pull requests
Write test cases for open bug issues
Contribute to the documentation

Development

jquery-asImagePicker is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

npm install -g gulp
npm install -g babel-cli
npm install

Then you can generate new distributable files from the sources, using:

gulp build

More gulp tasks can be found here.

Changelog

To see the list of recent changes, see Releases section.

Copyright and license

Licensed under the LGPL license.

⬆ back to top