Image select con jquery para un dropdown con imágenes desplegables

DESCARGA : Image select

Image select con jquery  para un dropdown con imágenes desplegables, este plugin está hecho para generar un dropdown depegable que puede servir para las plataformas redes sociales, que necesitan facilitar la búsqueda y relación de personas, esto para lograr, puedes utilizar este plugin para relacionar información uno a muchos o uno a uno, el autor asegura que no ha encontrado plugins que contengan esta funcionalidad.

Con este plugin puedes trabajar como se muestra en los siguientes ejemplos:

1.- Multiple Select (Una etiqueta select y option )


<select multiple="multiple" class="my-select">
 <option data-img-src="img/adnan.png">Adnan Sagar</option>
 <option data-img-src="img/rena.png">Rena Cugelman</option>
 <option selected="selected" data-img-src="img/tavis.png">Tavis Lochhead</option>
 <option data-img-src="img/brian.png">Brain Cugelman</option>
</select>


 $(".my-select").chosen({
 width:"100%",
 });

2.- Con un solo dato seleccionable


<select class="my-select">
 <option data-img-src="img/adnan.png">Adnan Sagar</option>
 <option selected="selected" 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">Brain Cugelman</option>
</select>


3.-Imagen personalizable


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

Ejemplo: http://websemantics.github.io/Image-Select/

Hay que tener en cuenta que para utilizar este plugin tienes que tener creado la referencia a los archivos siguientes:


<script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/ImageSelect.jquery.js" type="text/javascript"></script>

You may also like...

  • jin

    Insertar tu html o css a joomla.3.xxx