Evento que despliega un div y muestra una imagen que afecta a todos los elementos

  • Autor Autor Carlos33
  • Fecha de inicio Fecha de inicio
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:

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
 

Adjuntos

  • rejilla.webp
    50,2 KB · Visitas: 32
  • rejillaDespliegue.webp
    30,7 KB · Visitas: 48
  • rejillaHover.webp
    48,3 KB · Visitas: 31
Podrias poner el codigo html?? De todas formas creo que es porque estas actuando con todos los elementos que tienen respectivas clases. Utiliza el objeto $(this) para especificar que es aquel al que le hiciste click o no a todos ^^
 
Tal como tienes el código THIS no funcionaria. Tu llamas a la class .imagewrap y ejecutas la class workhover y la class workactive. This haría referencia a imagewrap,

Si tienes ordenado el código podías mirar de usar la función index() para saber la posición del click y ejecutar en la posición del class workhover y workactive
Tendrías que poner el html.
 
Última edición:
Gracias a ambos por las respuestas. La verdad que me he pasado el día investigando pero no doy con la solución porque de Javascript entiendo muy poco. Os paso el código HTML con solo dos imágenes (sino se hace muy largo y supongo que lo hago funcionar con dos imagenes lo podría hacer funcionar con todas), ahí va:

HTML: 
			<!-- main content -->
			<div class="row portfolio clearfix">
                                <!-- work grid -->
				<ul class="col-xs-12 list" id="og-grid">

					<!-- new work -->
					<li class="workswrap inspiration" data-content="#project1">

						<!-- thumb new work -->
						<div class="imagewrap">

							<!-- info work hover -->
							<div class="workhover">
								<img src="http://forobeta.com/images/t1.jpg" class="img-responsive" alt="Responsive image"/>
						  		<div class="workinfo colio-link">
						  			<h2>Las pruebas de Neymar Jr.</h2>
						  		</div>
					  		</div><!-- end info work hover -->

					  		<!-- info work active -->
							<div class="workactive">
								<img src="http://forobeta.com/images/t1.jpg" class="img-responsive" alt="Responsive image"/>
								<div class="workinfo">
									<h2>Las pruebas de Neymar Jr.</h2>
									<div class="arrowWork">
										<img src="http://forobeta.com/images/arrowWork.png" class="img-responsive" alt="Responsive image"/>
									</div>
								</div>
							</div><!-- end info work active -->


						</div><!-- end thumb new work -->


						<!-- work content-->
						<div id="project1" class="workContent">
							<!-- main -->
							<div class="main row">

								<!-- first image -->
								<div class="col-xs-12 workImage">
									<img src="pictures/pic1.jpg" class="img-responsive" alt="" />
								</div><!-- end of first image -->

								<!-- work info -->
								<div class="col-lg-5 col-lg-offset-1 col-sm-5 col-sm-offset-1 col-xs-12 workInfo">
									<h2>Portfolio expanding plugin</h3>
									<h3>Categories</h3>
									<ul class="filters">
										<li>
											<a href="#" class="filter-active">All,</a>
										</li>
										<li>
											<a href="#design">Web Design</a>
										</li>
									</ul>
									<h3>Share</h3>
									<ul>
										<li>
											<a class="facebook" href="http://facebook.com">Facebook,</a>
										</li>
										<li>
											<a class="twitter" href="http://twitter.com">Twitter,</a>
										</li>
										<li>
											<a class="google" href="http://google.com">Google</a>
										</li>
									</ul>
								</div><!-- end of work info -->

								<!-- additional info -->
								<div class="col-lg-5 col-sm-5 col-xs-12 additionalInfo">
									<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <a href="http://google.com">inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo.</p>
								</div><!-- additional info -->
							</div><!-- end main -->
						</div><!-- end work content-->

					</li><!-- end new wok-->

					<!-- new work -->
					<li class="workswrap inspiration" data-content="#project2">

						<!-- thumb new work -->
						<div class="imagewrap">

							<!-- info work hover -->
							<div class="workhover">
								<img src="http://forobeta.com/images/t1.jpg" class="img-responsive" alt="Responsive image"/>
						  		<div class="workinfo colio-link">
						  			<h2>Las pruebas de Neymar Jr.</h2>
						  		</div>
					  		</div><!-- end info work hover -->

					  		<!-- info work active -->
							<div class="workactive">
								<img src="http://forobeta.com/images/t1.jpg" class="img-responsive" alt="Responsive image"/>
								<div class="workinfo">
									<h2>Las pruebas de Neymar Jr.</h2>
									<div class="arrowWork">
										<img src="http://forobeta.com/images/arrowWork.png" class="img-responsive" alt="Responsive image"/>
									</div>
								</div>
							</div><!-- end info work active -->


						</div><!-- end thumb new work -->


						<!-- work content-->
						<div id="project2" class="workContent">
							<!-- main -->
							<div class="main row">

								<!-- first image -->
								<div class="col-xs-12 workImage">
									<img src="pictures/pic1.jpg" class="img-responsive" alt="" />
								</div><!-- end of first image -->

								<!-- work info -->
								<div class="col-lg-5 col-lg-offset-1 col-sm-5 col-sm-offset-1 col-xs-12 workInfo">
									<h2>Portfolio expanding plugin</h3>
									<h3>Categories</h3>
									<ul class="filters">
										<li>
											<a href="#" class="filter-active">All,</a>
										</li>
										<li>
											<a href="#design">Web Design</a>
										</li>
									</ul>
									<h3>Share</h3>
									<ul>
										<li>
											<a class="facebook" href="http://facebook.com">Facebook,</a>
										</li>
										<li>
											<a class="twitter" href="http://twitter.com">Twitter,</a>
										</li>
										<li>
											<a class="google" href="http://google.com">Google</a>
										</li>
									</ul>
								</div><!-- end of work info -->

								<!-- additional info -->
								<div class="col-lg-5 col-sm-5 col-xs-12 additionalInfo">
									<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <a href="http://google.com">inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo.</p>
								</div><!-- additional info -->

							</div><!-- end main -->
						</div><!-- end work content-->

					</li><!-- end new wok-->

				</ul><!-- end work grid -->
			</div><!-- end main content -->

No sé si con este pedazo de código os puedo ayudar. Había puesto en el anterior mensaje .imagewrap pero la verdad es que el evento se ejecuta en la clase .colio-link que es donde realmente se hace click. El <ul> con id #og-grid es el que contiene la rejilla y cada <li> con clase . workswrap es el contenido de cada imagen; imagen en miniatura sobre la que se hace hover (.workhover), la imagen que se muestra cuando está activo (.workactive) y el div desplegable con el contenido en sí (.workContent).

Si necesitáis que explique alguna cosa, soy todo vuestro. No me quiero alargar para no hacer el mensaje muy pesado.

Muchas gracias a ambos de nuevo por la ayuda.

Un saludo
 
Última edición:

Como las clases .active y .hover se encuentra dentro de la imagewraper utiliza el this

Insertar CODE, HTML o PHP: 
$('.imagewrap').on('click', function() {  // Al hacer click sobre la imagen se ejecuta lo que viene abajo
 
		$(this).find('.workhover').css({display: 'none'}); // se esconde la imagen original sobre la que hacemos hover 
		$(this).find('.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() {
 
		$(this).parent().find('.workhover').css({display: 'block'});
		$(this).css({display: 'none'});
});

Prueba con este modificacion y dime si te sirve ^.^ . En teoria con eso estas haciendo referencia unicamente a los .workhover y los .workactive de las respectivas .imagewrap
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro