simplifier un code + fadeIn JQuery

Répondre
Citer ce message
Suta
le 09/03/2011 à 18:07
Suta
Bonjour,

alors voila un code que je developpe pour faire une sorte de mini gallerie photo (showroom).

Jai 5 photos et ce nombre ne varie pas.


<html>

<head>



<script src="jquery.js" type="text/javascript"></script>



<script type="text/javascript">



//la fonction taxigal permet dafficher limage selectionner uniquement



function taxigal(v1,h1,h2,h3,h4)

{

    node_v = document.getElementById(v1);

    node_v.style.visibility = "visible";

    node_v.style.height = "auto";



    node_2 = document.getElementById(h1);

    node_2.style.visibility = "hidden";

    node_2.style.height = "0";

    

    node_3 = document.getElementById(h2);

    node_3.style.visibility = "hidden";

    node_3.style.height = "0";



    node_4 = document.getElementById(h3);

    node_4.style.visibility = "hidden";

    node_4.style.height = "0";



    node_5 = document.getElementById(h4);

    node_5.style.visibility = "hidden";

    node_5.style.height = "0";

}



// les fonction qui suivent etablisse un lien avec jquery pour faire apparaitre et disparaitre les images en fadeIn et fadeOut



$(document).ready(function(){

  $("#bp1").click(function(){

    $("#1").fadeIn();

    $("#2").fadeOut();

    $("#3").fadeOut();

    $("#4").fadeOut();

    $("#5").fadeOut();

  });

  $("#bp2").click(function(){

    $("#2").fadeIn();

    $("#1").fadeOut();

    $("#3").fadeOut();

    $("#4").fadeOut();

    $("#5").fadeOut();

  });

  $("#bp3").click(function(){

    $("#3").fadeIn();

    $("#2").fadeOut();

    $("#1").fadeOut();

    $("#4").fadeOut();

    $("#5").fadeOut();

  });

  $("#bp4").click(function(){

    $("#4").fadeIn();

    $("#2").fadeOut();

    $("#3").fadeOut();

    $("#1").fadeOut();

    $("#5").fadeOut();

  });

  $("#bp5").click(function(){

    $("#5").fadeIn();

    $("#2").fadeOut();

    $("#3").fadeOut();

    $("#4").fadeOut();

    $("#1").fadeOut();

  });

});

</script>



</head>

<body>





<div id="1"><img src="resize-big.php?f=tcab1.png"></div>

<div id="2" style="visibility:hidden; height:0"><img src="tcab2.png"></div>

<div id="3" style="visibility:hidden; height:0"><img src="tcab3.png"></div>

<div id="4" style="visibility:hidden; height:0"><img src="tcab4.png"></div>

<div id="5" style="visibility:hidden; height:0"><img src="tcab5.png"></div>



<a href="#" id="bp1" onclick = "taxigal('1','2','3','4','5')">bp1</a>

<a href="#" id="bp2" onclick = "taxigal('2','1','3','4','5')">bp2</a>

<a href="#" id="bp3" onclick = "taxigal('3','1','2','4','5')">bp3</a>

<a href="#" id="bp4" onclick = "taxigal('4','1','2','3','5')">bp4</a>

<a href="#" id="bp5" onclick = "taxigal('5','1','2','3','4')">bp5</a>



</body>

</html>




1) Je suis persuader que l'on pourrai simplifier ce code mais mes connaissances en JS me bloque a ce stade

2) comment combiner ma fonction jquery avec celle que jai fait (taxigal)

3) Jai toutefois un probleme au niveau de la fonction fadeIn et fadeOut : au premier clic la fadeIn ne marche pas (ce qui est normal vu que lopacite de limage est deja a 100%). Comment regler lopaciter des image au chargement de la page ?

Merci d'avance pour votre aide et a bientot !
Citer ce message
LupusMic
le 12/03/2011 à 08:28
LupusMic
Pas testé, mais un truc comme ça devrait faire l'affaire :
<html>

<head>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>



<script type="text/javascript">



$(document).ready(function()

{

	$(".shower").click(function()

	{

		$(".image").fadeOut();

		var id = '#image' + this.id.slice(this.id.indexOf('-'))

		$(id).fadeIn();

	});

});

</script>



</head>

<body>





<?php for($n = 0 ; $n < 5 ; ++$n) : ?>

<div class='image' id='image-<?php echo $n + 1 ?>'><img src="tcab<?php echo $n + 1 ?>.png"></div>

<?php endfor ?>



<?php for($n = 0 ; $n < 5 ; ++$n) : ?>

<span class="button" id='button-<?php echo $n + 1 ?>'>Show <?php echo $n + 1 ?></span>

<?php endfor ?>



</body>

</html>
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Citer ce message
Athee
le 22/05/2012 à 17:46
Athee
Tu devrais placer toutes tes images dans une div qui ne contiendrait que ça, ensuite tu récupère toutes les images qu'elle contient avec le sélecteur, et tu boucle dessus pour modifier leur état affiché/masqué :
$('#mondiv img').each...
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours