Clic que oculte 1 imagen, muestre otra y luego haga otra acción

[JoseCuevas]

Hola betas, buenos días todavía.

Tengo un problemilla... Estoy armando un sitio web y estoy en un dilema, necesito que El usuario tras dar clic en una imagen, este muestre otra (Gif) y que tras 3 segundos mande un POPup con una imagen al azar dentro de una base de datos (Con eso no estoy pidiendo ayuda por ahora xD).


El algortimo seriá así:

1.- El usuario da click en una imagen
2.- La imagen se oculta/desaparece y muesta otra (UN GIF)
3.- 3 segundos de espera después de la aparición del gif
4.- Sale un popup

¿Alguien podría ayudarme con esto?

Muchas gracias de antemano! :encouragement:

 

[YeltsinReyes]

Creo que esto funcionaria y que el popup podria bloquearse!

<img class="imagenjpg" src="imagen.jpg">
<img class="imagengif" src="imagen.gif" style="display: none;">

$(document).ready(function(){
	$('.imagenjpg').click(function(){
		$(this).hide();
		$('.imagengif').show();
		setTimeout(function(){
			window.open('popup.html', 'popup', 'width=560,height=640,top=0,lef=0');
		}, 3000);
	});
});

 

[JoseCuevas]

Creo que esto funcionaria y que el popup podria bloquearse!

<img class="imagenjpg" src="imagen.jpg">
<img class="imagengif" src="imagen.gif" style="display: none;">

$(document).ready(function(){
	$('.imagenjpg').click(function(){
		$(this).hide();
		$('.imagengif').show();
		setTimeout(function(){
			window.open('popup.html', 'popup', 'width=560,height=640,top=0,lef=0');
		}, 3000);
	});
});

Gracias, ya lo stoy probando pero tengo 2 dudas:

1.- ¿Cómo puedo poner dos classes dentro del mismo div?
2.- ¿Cómo puedo hacer para que no se pueda bloquear el popup? ¿Habrá otro metodo?

Gracias 😛7:

 

[YeltsinReyes]

Gracias, ya lo stoy probando pero tengo 2 dudas:

1.- ¿Cómo puedo poner dos classes dentro del mismo div?
2.- ¿Cómo puedo hacer para que no se pueda bloquear el popup? ¿Habrá otro metodo?

Gracias 😛7:

1.- class="una dos" hay tienes dos clases en el mismo div.
2.- si se esta bloqueando el problema es que no se puede abrir automáticos porque el navegador lo bloquea tiene que ser con un click,
si quitas setTimeout(function(){ }, 3000); abriría sin problema pero ya no tendrías el efecto del gif si es un gif de cargando que tienes XD

 

[JoseCuevas]

1.- class="una dos" hay tienes dos clases en el mismo div.
2.- si se esta bloqueando el problema es que no se puede abrir automáticos porque el navegador lo bloquea tiene que ser con un click,
si quitas setTimeout(function(){ }, 3000); abriría sin problema pero ya no tendrías el efecto del gif si es un gif de cargando que tienes XD

Bueee tendré que quitar el gif de cargando que exactamente es lo que tenía jaja

Gracias amigo :encouragement:

Otra cosa:

Es posible que tras dar clic en la imagen, salga el gif y el popup salga después? Me refiero a que el popup tenga un retraso de 3 segundos... pero mientras eso, el gif (la imagen) esté ahí... se podrá?

Espera espera me llegó esta idea:

Puedo poner 2 clases, que una abra el gif y otra abra el popup? Serán 2 clases totalmente diferentes ejecutandose en el mismo div

 

[YeltsinReyes]

...

Seria lo mismo que usaras este código, el problema seria que al abrirse el popup el gif se taparía o estaría de mas XD

$(document).ready(function(){
    $('.imagenjpg').click(function(){
        $(this).hide();
        $('.imagengif').show();
         window.open('popup.html', 'popup', 'width=560,height=640,top=0,lef=0');
    });
});