C
Carlos33
Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos, es mi primer mensaje en este foro y me gustaría ver si me pueden echar una mano ya que ando atascado y no entiendo mucho de Javascript.
Tengo una rejilla de imágenes que ocupan toda la pantalla. Cada imagen están dentro de un div con la clase .imagewrap. Al pinchar sobre la imagen se despliega un div que contiene más información sobre la imagen y unos botones para pasar a la siguiente, o anterior, imagen y otro botón para cerrar el div desplegado. También, cuando hago click en la imagen, oculto la imagen (con clase .workhover) y muestro otra imagen distinta, del mismo tamaño y en la misma posición, para señalar que es la imagen activa. Esta nueva imagen tiene la clase .workactive. El problema es el siguiente:
Estas dos clases están en varias imágenes de la rejilla, por lo que, cuando pincho en una, me oculta .workhover y me muestra .workactive de todas las imágenes en lugar de sólo en la que hice click. Este es el código que tengo:
Obviamente intento que estos eventos solo afecten a la imagen sobre la que hago click y no en todas a la vez. He estado leyendo que a lo mejor con el valor this puedo ejecutar esto pero la verdad que no acabo de controlar su funcionamiento. A alguien se le ocurre alguna idea de como podría solucionar este problema.
Adjunto unas imágenes por si ayudan, desgraciadamente no tengo ninguna url.
Desde ya muchas gracias por su tiempo y ayuda.
Un saludo
Tengo una rejilla de imágenes que ocupan toda la pantalla. Cada imagen están dentro de un div con la clase .imagewrap. Al pinchar sobre la imagen se despliega un div que contiene más información sobre la imagen y unos botones para pasar a la siguiente, o anterior, imagen y otro botón para cerrar el div desplegado. También, cuando hago click en la imagen, oculto la imagen (con clase .workhover) y muestro otra imagen distinta, del mismo tamaño y en la misma posición, para señalar que es la imagen activa. Esta nueva imagen tiene la clase .workactive. El problema es el siguiente:
Estas dos clases están en varias imágenes de la rejilla, por lo que, cuando pincho en una, me oculta .workhover y me muestra .workactive de todas las imágenes en lugar de sólo en la que hice click. Este es el código que tengo:
Insertar CODE, HTML o PHP:
$('.imagewrap').on('click', function() { // Al hacer click sobre la imagen se ejecuta lo que viene abajo
$('.workhover').css({display: 'none'}); // se esconde la imagen original sobre la que hacemos hover
$('.workactive').css({display: 'block'}); //se muestra una imagen un poco distinta para diferenciarla del resto que hay en la pantalla
});
// Si hacemos de nuevo click sobre la imagen activa se cierra el div desplegado y se esconde la imagen y se muestra la original volviendo al principio.
$('.workactive').on('click', function() {
$('.workhover').css({display: 'block'});
$('.workactive').css({display: 'none'});
});Obviamente intento que estos eventos solo afecten a la imagen sobre la que hago click y no en todas a la vez. He estado leyendo que a lo mejor con el valor this puedo ejecutar esto pero la verdad que no acabo de controlar su funcionamiento. A alguien se le ocurre alguna idea de como podría solucionar este problema.
Adjunto unas imágenes por si ayudan, desgraciadamente no tengo ninguna url.
Desde ya muchas gracias por su tiempo y ayuda.
Un saludo
