Q imagepicker Class

jQuery plugin that allows to choose and upload an image to the server by clicking / tapping on it. Works on various platforms (desktop and mobile etc) in similar way. On mobiles allows to choose picture from photo library or take an instant camera photo if OS supports such functionality. Should be applied to element like this $('#someimg').plugin('Q/imagepicker', options).


Q imagepicker

  • [options]


  • [options] Object optional

    options is an Object that contains parameters for function

    • saveSizeName Object

      Required hash where key is the preferred image size and value is the image name. Several key-value pairs may be given and image will be generated and saved in different files. Key may be just one number, e.g. '100' which means square image 100x100 or in format 'x', e.g. '80x120' to make non-square image. You can have one of or be empty, and then it will automatically keep the proportions. Or you can pass 'x' and then it will keep the original width and height of the image.

    • [url] String optional

      url is a url to post to.

    • [path="uploads"] String optional

      Can be a URL path or a function returning a URL path. It must exist on the server.

    • [subpath=""] String | Function optional

      A subpath which may be created on the server if it doesn't already exist. If this is a function, it is executed right before the request is sent.

    • [showSize=null] String optional

      showSize is a key in saveSizeName to show on success.

    • [useAnySize=false] String optional

      whether to tell the server to accept any size without complaining.

    • [crop] Object optional

      crop If provided, the image will be cropped according to the given parameters before it is saved on the server in the saveSizeName formats. If the browser supports it, the cropping will occur in the browser.

      • [x] Number optional
        left for cropping
      • [y] Number optional
        top for cropping
      • [w] Number optional
        width for cropping
      • [h] Number optional
        height value for cropping
    • [cropping=true] Boolean optional

      Whether to display an interface for selecting cropping images, before sending them to the server. If true, the cropping area overrides the crop option.

    • [preprocess] Q.Event optional

      preprocess is a function which is triggering before image upload. Its "this" object will be a jQuery of the imagepicker element The first parameter is a callback, which should be called with an optional hash of overrides, which can include "data", "path", "subpath", "save", "url", "loader" and "crop"

    • [cameraCommands] Array optional

      cameraCommands the commands that pop up to take a photo

    • [onClick] Q.Event optional

      onClick is an event to execute during the click, which may cancel the click

    • [onSuccess] Q.Event optional

      onSuccess is Q.Event which is called on successful upload. First parameter will be the server response with an object in a format similar to the 'saveSizeName' field.

    • [onError] Q.Event optional

      onError Q.Event which is called if upload failed.

    • [onTooSmall] Q.Event optional

      onError Q.Event which is called if an image is selected that's too small for one of the sizes in saveSizeName. Return false to abort.

    • [onFinish] Q.Event optional

      onError Q.Event which is called at the end, whatever the outcome.

    • [onCropping] Q.Event optional

      Happens when the cropping dialog appears, in case you want to display hints or something.

Item Index



  • [options]

Plugin for Animated moving Element content inside it from let to right


  • [options] Object optional

    options object containing parameters for function

    • [scrollTime] Number optional

      scrollTime number of interval for content right movement in milliseconds

    • [pauseBefore] Number optional

      pauseBefore is a number for interval before animation starts in milliseconds

    • [pauseAfter] Number optional

      pauseAfter number of interval for content left movement to margin-left: 0 in milliseconds


  • [object_or_string]

Just a helper for iScroll plugin. Needed to simplify applying iScroll and Q/scrollIndicators plugins.


  • [object_or_string] Mixed optional
    • [Object] Object optional

      an Object, then it's a hash of options, similar to these passed to iScroll plus additional parameters: "indicators": Defaults to true. Whether to show scroll indicators (apply Q/scrollIndicators plugin).

      • [x] Number optional
      • [y] Number optional
      • [hScrollbar] Boolean optional
      • [vScrollbar] Boolean optional
      • [hScroll] Boolean optional
      • [hideScrollbar] Boolean optional
      • [fadeScrollbar] Boolean optional
      • [useTransition] Boolean optional
      • [topOffset] Number optional
      • [onRefresh] Q.Event optional
      • [onBeforeScrollStart] Q.Event optional
      • [onScrollStart] Q.Event optional
      • [onScrollMove] Q.Event optional
      • [onScrollEnd] Q.Event optional
      • [onTouchEnd] Q.Event optional
      • [showArrows] Boolean optional
      • [horizontalGutter] Number optional
      • [verticalGutter] Number optional
      • [maintainPosition] Boolean optional
      • [autoReinitialize] Boolean optional
      • [animateScroll] Boolean optional
      • [hijackInternalLinks] Boolean optional
      • [indicators] Boolean optional
    • [String] String optional

      If a string, then it's a command which may be: "remove": Destroys iScroll together with Q/scrollIndicators.



Set the image in the imagepicker



Removes the imagepicker functionality from the element