Image Select is an extension of Chosen a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
Image Select provides image support for Single and Multi select HTML tags.
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.
We couldn't find any scripts that had this full functionality, so we designed it ourselves. We built it for our Survey tool, SurveyGraph, and decided to share it with the community.
Hope you find it helpful, and get back if you have any feedback/improvements.
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.
For more details check Chosen documentation.
For single select, remove the multiple attribute.
Use data-img-src attribute to attache images.
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
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
RTL support has been added to Image Select as per version 1.4.
Add class chosen-rtl to the select element to enable RTL.
Check the provided example for a detailed use case.
Having trouble with Image Select? Contact support@websemantics.ca and we’ll help you sort it out.