___ ____ _ _
|_ _|_ __ ___ __ _ __ _ ___ / ___| ___| | ___ ___| |_
| || '_ ` _ \ / _` |/ _` |/ _ \ \___ \ / _ \ |/ _ \/ __| __|
| || | | | | | (_| | (_| | __/ ___) | __/ | __/ (__| |_
|___|_| |_| |_|\__,_|\__, |\___| |____/ \___|_|\___|\___|\__|
|___/ v1.7
We designed this plugin extension as a humanized UI element for social networking sites that need to facilitate relations between people. Research shows that people are extremely sensitive to photos of others, so we needed to revamp the traditional UI elements to make them more intuitive and human.
Fresh flat styles and new logo & web design for better user experience
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 developed it ourselves on top of Chosen. Hope you find it helpful, and get back if you have any feedback/improvements.
- Clone locally,
git clone https://github.com/websemantics/Image-Select
- Install dependencies,
bower install
- Browse to
index.html
orexample.html
bower install image-select
To get information about available packages
bower info image-select
You only need to add a data-img-src
attribute to your <option>
tag.
<select class="my-select">
<option data-img-src="img/adnan.png">Adnan Sagar</option>
<option data-img-src="img/rena.png">Rena Cugelman</option>
<option data-img-src="img/tavis.png">Tavis Lochhead</option>
<option data-img-src="img/brian.png" selected="selected">Brain Cugelman</option>
</select>
Then call Chosen as you would with the options you need.
$(".my-select").chosen();
Chosen, http://github.com/harvesthq/chosen Bragit, http://websemantics.github.io/bragit