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

  • David Arenales

    MMMMM

  • Jacqueline Vasquez

    te ha faltado información es este post, que es el siguiente:
    Install dependencies,
    bower i
    Browse to index.html or example.html
    Bower Package

    Install in your project,

    bower install image-select –save
    To get information about available packages

    bower info image-select

    para que no pierdan el tiempo tratando de hacerlo funcionar así solamente.