11496 sujets

JavaScript, DOM et API Web HTML5

[résolu] Jquery et image

Bonjour à tous,

Je me lance dans jquery et j'ai un petit souci.

Je souhaite faire en sorte d'avoir une vignette qui quand on clique dessus s'aggrandit. Et quand on reclique l'aggrandissement redeviens une vignette. J'ai en partie réussi mais il reste un petit truc qui fonctionne pas comme je le voudrais : lorsque je clique sur ma vignette l'image aggrandie s'affiche bien mais quand je reclique la vignette apparaît avant que la grande ait finie de "disparaître". J'ai utilisé slideDown et slideUp pour la grande et show et hidde pour la vignette.

Voici mon code :


<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('img').click(function() {
		 if ($("#imageGd").is(':hidden')) {
			 $("#imageGd").slideDown();
			 $("#imagePt").hide();
		 } 
		 else {//masquage de la grande image
			 $("#imageGd").slideUp();
			 $("#imagePt").show();
		 }
	});
});
</script>

</head>
<body>
<h1>Test image jquery</h1><br><br>
<img src="images/photoPt.jpg" id="imagePt">

<img src="images/photo.jpg" id="imageGd" style="display:none;">
</body>
</html>


Est-ce que quelqu'un pourrait m'éclairer pour faire en sorte que la vignette n'apparaisse que lorsque la grande à disparu ?


Merci
Modifié par macara (09 Mar 2009 - 19:26)
Salut,

Au vue de ma mince utilisation de Jquery, évite les effets qui prennent du temps dans leur déroulement.

Change tes effet slideUP par SHOW, et SlideDown par HIDE

tu verras, tu n'auras plus de problèmes de chevauchement. Mais aussi, plus d'animation Smiley ohwell (Mais regarde le bug que ça t'évite, clique plein de fois sur la vignette et l'image agrandi, si tu clique assez vite, et que tu t'arrête, le script garde tout en même mémoire, et le fait autant de fois que tu as cliqué (à cause de la latence que tu met avec slideDown/SlideUP)).

A moins que l'on puisse dire à Jquery de ne pas effectuer d'action tant que celle en cours n'est pas terminé
Le but est d'avoir l'animation sinon j'aurais utilisé hidde et show...

C'est ce que je veux savoir si on peut dire : "quand l'animation est finie alors tu peux faire revenir la vignette"
Super_baloo8 a écrit :
A moins que l'on puisse dire à Jquery de ne pas effectuer d'action tant que celle en cours n'est pas terminé

C'est le principe même des callbacks, disponibles dans bon nombre de méthodes…
Merci Benjamin D.C. ça fonctionne avec le callback, je ne connaissais pas mais c'est bien pratique.
Serait t'il possible d'avoir la résolution pour pouvoir s'en inspirer stp ? Merci !

Sinon, si j'ai bien compris, la solution à son problème était :
if ($("#imageGd").is(':hidden')) {
			 $("#imageGd").slideDown("normale", $("#imagePt").hide());
		 }

Modifié par Super_baloo8 (11 Mar 2009 - 15:44)
Salut,

voilà la solution, désolée j'avais oublié de la mettre.

$(document).ready(function() {
	$('img').click(function() {
		 if ($("#imageGd").is(':hidden')) {
			 $("#imageGd").slideDown();
			 $("#imagePt").hide();
		 } 
		 else {//masquage de la grande image
			 $("#imageGd").slideUp("normal", function(){ $("#imagePt").show(); }); 			 
			 //alert("gde");
		 }
	});
});
Sujet clos
Aller à