Seleccionar imagenes con jQuery

En este artículo vamos a ver como se puede seleccionar imágenes usando la libreria de jQuery.

Para nuestro ejemplo vamos a necesitar:

  • Cargar libreria jQuery.
  • Crear una hoja de estilo (CSS) para declarar los estilos necesarios para visualizar la imagen seleccionada.
  • Cargar imágenes en nuestra aplicación.

El proceso será el siguiente:

  1. Están todas las imágenes sin seleccionar.
  2. Seleccionamos una imagen y le aplicamos los estilos de selección definidos en nuestra hoja de estilos.
  3. Si pulsamos otra imagen se eliminaran los estilos de selección de la imagen actual y se aplicaran sobre la nueva imagen.

Para ver una demo de nuestro caso práctico PULSAR AQUÍ

A continuación visualizaremos el script que nos realizará la función de selección:

 
<script>
 
$(document).ready(function(){
 
//recibe evento al realizar click dentro del elemento que contiene la clase img
$(".img").click(function(){
 
//comprobamos si existe una imagen seleccionada
if ( $( ".img" ).hasClass( "img-selected" ) ) {
/*en el caso que exista ya una imagen seleccionada la eliminamos para que únicamente solo se tenga una imagen seleccionada*/
$(".img").removeClass("img-selected");
}
//añadimos la clase de la imagen seleccionada
$(this).addClass("img-selected");
});
});
 
</script>

A continuación voy a dejar el código completo de los dos archivos que hemos utilizado.

Archivo HTML:

 
<!DOCTYPE html>
<html lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<title>Captcha bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/style.css" media="all" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 
<div class="container text-center ">
<br/><br/><br/>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 bg-info">
<div class="div-general-img">
<div class="img"> <a> <img src="icons/1.png" /> </a> </div>
<div class="img"> <a> <img src="icons/2.png" /> </a> </div>
<div class="img"> <a> <img src="icons/3.png" /> </a> </div>
<div class="img"> <a> <img src="icons/4.png" /> </a> </div>
</div>
</div>
</div>
</div>
<script>
 
$(document).ready(function(){
 
//recibe evento al realizar click dentro del elemento que contiene la clase img
$(".img").click(function(){
 
//comprobamos si existe una imagen seleccionada
if ( $( ".img" ).hasClass( "img-selected" ) ) {
/*en el caso que exista ya una imagen seleccionada la eliminamos para que únicamente solo se tenga una imagen seleccionada*/
$(".img").removeClass("img-selected");
}
//añadimos la clase de la imagen seleccionada
$(this).addClass("img-selected");
});
});
 
</script>
 
</body>
</html>

Archivo CSS:

 
.div-general-img
{
display: inline-flex;
}
 
.img
{
background-color: #fff;
margin:5px;
padding:5px;
}
 
.img-selected
{
border: 3px dashed #099a9f;
margin:5px;
padding:5px;
}

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

4 comentarios sobre “Seleccionar imagenes con jQuery

  • el Jul 29, 2016 a las 6:48 am
    Permalink

    Las imágenes y la selección funciona perfectamente, pero como puedo llevarme la variable para un formulario. Mi idea es poner varias tallas y que el usuario seleccione una. Gracias.

    Respuesta
    • el Ago 2, 2016 a las 3:39 pm
      Permalink

      Otra forma de hacerlo más sencilla es dejar todo como está en mi ejemplo y luego poner dentro del formulario un input invisible (hidden), cuando selecciones una imagen y accedas al javascript lo único que tienes que hacer es alimentar a este input (solo habrá uno) cargando en su atributo value el id correspondiente de la imagen (osea la talla).

      Saludos!

      Respuesta
  • el Ago 2, 2016 a las 2:50 pm
    Permalink

    Hola, pues habrán muchas maneras de hacerlo pero yo te digo una que se me ha ocurrido.

    Para obtener la imagen seleccionada y usarla en un formulario debes hacerlo con javascript, en los input de las imágenes de tu formulario deber tener un atributo value, inicialmente a vacio, cuando una imagen se seleccione entrará al javascript y comprobaremos que imagen se ha seleccionado y así asignarle un valor a tu atributo value del input (el valor deberá ser el id del input que indicará la talla correspondiente), una vez enviado el formulario debes comprobar que value de tus inputs tiene valor y obtienes su valor para saber que imagen a seleccionado.

    Yo lo que haría como he mencionado antes sería tener un atributo id de la imagen y cuando entre al javascript que meta en el atributo value su correspondiente id de la imagen.

    Así cuando manejes en el formulario desde PHP ya sabrás de que imagen se trata ya que obtendrás su id, eso si solo una imagen puede tener valor por lo tanto cada vez que pulses una deberás rellenar su atributo value y dejar en blanco el atributo value de la anterior imagen seleccionada.

    Saludos!

    Respuesta
  • el Oct 25, 2016 a las 3:17 pm
    Permalink

    Hola Iván, me va genial este artículo.
    Sólo me falta una cosa, podrías poner un ejemplo sencillo de cómo asignar la id a una imagen mediante javascript y transportarla al value del formulario hidden?

    Es que no sé javascript, sólo sé html, css y php.

    Muchas gracias

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.