Acceder Registrarme

Selección de imagenes en una galeria


Por: Orlando Escamilla Publicado el: 2016-10-28 09:33:09 Pregunta abierta

Buenos dias comunidad, he hecho una galeria de imagenes con jquery que funciona bien, pero ademas quiero implementar que al momento que se le de click a una imagen de la galeria, esta pequeña imagen se seleccione con un borde azul y que obviamente se deseleccione al momento de hacer click en otra imagen y que esta nueva imagen a la que  le di click se seleccione y asi sucesivamente  como lo muestro en el ejemplo.

Saben como puedo hacer eso? Saludos!




JQuery

Usuario de (Perú)

Hola Orlando, para realizar la acción que quieres lo puedes hacer de la siguiente manera.

Primero considera que debes darle un borde de 3px por ejemplo a todas las imágenes en un color que coincida con el fondo, esto para que al momento de asignar el borde no se altere el diseño ya que el borde aumentará píxeles a tu imagen.

Seguidamente, imagina que tienes dos class "imgBordeTransparente" -> Sin borde, "imgBordeAzul" -> Con borde. La idea ser'ia la siguiente.

Cuando le das clickauna imagen, mediante JQuery le quitas el class Sin borde y le asignas el class Con borde de esta manera irá cambiando el estilo de acuerdo al evento y ahora, para quitar el borde a la otra imagen que fue seleccionada antes, pues para esto puedes recorrer todas las imágenes mininiatura en el div que lo contenga y en cada iteración ir quitando el css Con borde e ir asignado el css Sin borde.

Es importante que primero hagas el recorrido para quitar el css y luego ya asignes el borde al componente del evento "La imagen actual".

Espero te sirva un poco esta explicación.

Saludos.

  • 2016-10-28 10:31:36
  • Me gusta(1)

  • Debes estar logueado para realizar comentarios