Image Select
Image Select provides image support for Single and Multi select HTML tags to be used with JQuery and Chosen.
Image Select provides image support for Single and Multi select HTML tags to be used with JQuery and Chosen.
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.
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 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
$(".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
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? create an issue and we’ll help you sort it out.
by