Image Select

Image Select provides image support for Single and Multi select HTML tags to be used with JQuery and Chosen.

Background Story

We designed this plugin extension as a humanized ui element for social networking sites that need to faciliate relations between people. Research shows that people are extremely sensitvie to photos of others, so we needed to revamp the traditional ui elements to make them more intuitive and human.

You can use these plugin extensions for modelling multiple one-to-many or single one-to-one relations between people.

Multiple Select

This example shows the multiple select scenario.

As shown above, use data-img-src attribute to attache images. Finally, enable Image Select by invoking the chosen method on the select element.

$(".my-select").chosen({ width:"100%", });
Info
For more details check Chosen documentation.

Single Select

For single select, remove the multiple attribute.

Use data-img-src attribute to attache images.

Custom Style / Markup

Image Select allows the customization of THML markup and styles it uses to insert images. For example, to style the image directly, add your own css classes, or define your own HTML markup which would include the image and text placement.

The following example adds a black border to the images and places the text before the image (similar to rtl mode).



It simply adds the required css styles directly to the image template

$(".my-select").chosen({ width:"100%", html_template: '{text} <img style="border:3px solid #ff703d;padding:0px;margin-right:4px" class="{class_name}" src="{url}" />' });

Use the html_template to write your own markup. Make sure you always include the two place hodlers {class_name} and {url}, which are being used internally to insert the approperiate class name, and image url for each options element

Right to Left (RTL)

RTL support has been added to Image Select as per version 1.4.

Add class chosen-rtl to the select element to enable RTL.

Examples

Check the provided example for a detailed use case.

Having trouble with Image Select? create an issue and we’ll help you sort it out.