Smooth Image Picker Plugin For jQuery - Imagery

File Size: 7.31 KB
Views Total: 1129
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Image Picker Plugin For jQuery - Imagery

Imagery is a lightweight jQuery image picker plugin that allows you to select an image from a given set of images similar to a color picker.

The plugin allows you to preview the original version of the selected image and provides smooth transitions when making your selection. It can be used anywhere you need an advanced image picker or image gallery.

How to use it:

1. Load the Imagery plugin's JavaScript and Stylesheet in the HTML document.

<link rel="stylesheet" href="/path/to/imagery.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/imagery.js"></script>

2. Add a set of image to the image picker as follows:

<div id="image-container">
  <img src="thumb-1.jpg" 
       data-src="original-1.jpg" />
  <img src="thumb-2.jpg" 
       data-src="original-2.jpg" />
  <img src="thumb-3.jpg" 
       data-src="original-3.jpg" />
  ... more images here ...

3. Call the function Imagery on the images and done.

  $("div#image-container > img").Imagery();

4. Create an empty container to place the image you just picked.

<div id="preview-container"></div>

5. Get the image data you just picked.

  $("div#image-container > img").Imagery({
      // do something

6. Available options to customize the image picker.

$("div#image-container > img").Imagery({

  // define ids and classes of the image picker

  // additional CSS styles for the image picker

  // allows to select an image on hover

  // apply a transparency to the image when clicked

  // convert the image to base64 encoded data

  // show indicator

  // custom indicator styles

  // Using image as an indicator

  // callback functions


This awesome jQuery plugin is developed by LORD-KAY. For more Advanced Usages, please check the demo page or visit the official website.