simplifier un code + fadeIn JQuery

Répondre
Suta
le 09/03/2011 à 18:07
Suta
Déconnecté
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.


  1.  
  2. <html>
  3. <head>
  4.  
  5. <script src="jquery.js" type="text/javascript"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. //la fonction taxigal permet dafficher limage selectionner uniquement
  10.  
  11. function taxigal(v1,h1,h2,h3,h4)
  12. {
  13. node_v = document.getElementById(v1);
  14. node_v.style.visibility = "visible";
  15. node_v.style.height = "auto";
  16.  
  17. node_2 = document.getElementById(h1);
  18. node_2.style.visibility = "hidden";
  19. node_2.style.height = "0";
  20.  
  21. node_3 = document.getElementById(h2);
  22. node_3.style.visibility = "hidden";
  23. node_3.style.height = "0";
  24.  
  25. node_4 = document.getElementById(h3);
  26. node_4.style.visibility = "hidden";
  27. node_4.style.height = "0";
  28.  
  29. node_5 = document.getElementById(h4);
  30. node_5.style.visibility = "hidden";
  31. node_5.style.height = "0";
  32. }
  33.  
  34. // les fonction qui suivent etablisse un lien avec jquery pour faire apparaitre et disparaitre les images en fadeIn et fadeOut
  35.  
  36. $(document).ready(function(){
  37. $("#bp1").click(function(){
  38. $("#1").fadeIn();
  39. $("#2").fadeOut();
  40. $("#3").fadeOut();
  41. $("#4").fadeOut();
  42. $("#5").fadeOut();
  43. });
  44. $("#bp2").click(function(){
  45. $("#2").fadeIn();
  46. $("#1").fadeOut();
  47. $("#3").fadeOut();
  48. $("#4").fadeOut();
  49. $("#5").fadeOut();
  50. });
  51. $("#bp3").click(function(){
  52. $("#3").fadeIn();
  53. $("#2").fadeOut();
  54. $("#1").fadeOut();
  55. $("#4").fadeOut();
  56. $("#5").fadeOut();
  57. });
  58. $("#bp4").click(function(){
  59. $("#4").fadeIn();
  60. $("#2").fadeOut();
  61. $("#3").fadeOut();
  62. $("#1").fadeOut();
  63. $("#5").fadeOut();
  64. });
  65. $("#bp5").click(function(){
  66. $("#5").fadeIn();
  67. $("#2").fadeOut();
  68. $("#3").fadeOut();
  69. $("#4").fadeOut();
  70. $("#1").fadeOut();
  71. });
  72. });
  73. </script>
  74.  
  75. </head>
  76. <body>
  77.  
  78.  
  79. <div id="1"><img src="resize-big.php?f=tcab1.png"></div>
  80. <div id="2" style="visibility:hidden; height:0"><img src="tcab2.png"></div>
  81. <div id="3" style="visibility:hidden; height:0"><img src="tcab3.png"></div>
  82. <div id="4" style="visibility:hidden; height:0"><img src="tcab4.png"></div>
  83. <div id="5" style="visibility:hidden; height:0"><img src="tcab5.png"></div>
  84.  
  85. <a href="#" id="bp1" onclick = "taxigal('1','2','3','4','5')">bp1</a>
  86. <a href="#" id="bp2" onclick = "taxigal('2','1','3','4','5')">bp2</a>
  87. <a href="#" id="bp3" onclick = "taxigal('3','1','2','4','5')">bp3</a>
  88. <a href="#" id="bp4" onclick = "taxigal('4','1','2','3','5')">bp4</a>
  89. <a href="#" id="bp5" onclick = "taxigal('5','1','2','3','4')">bp5</a>
  90.  
  91. </body>
  92. </html>
  93.  




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 !
LupusMic
le 12/03/2011 à 08:28
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Pas testé, mais un truc comme ça devrait faire l'affaire :
  1. <html>
  2. <head>
  3.  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. $(document).ready(function()
  9. {
  10.    $(".shower").click(function()
  11.    {
  12.       $(".image").fadeOut();
  13.       var id = '#image' + this.id.slice(this.id.indexOf('-'))
  14.       $(id).fadeIn();
  15.    });
  16. });
  17. </script>
  18.  
  19. </head>
  20. <body>
  21.  
  22.  
  23. <?php for($n = 0 ; $n < 5 ; ++$n) : ?>
  24. <div class='image' id='image-<?php echo $n + 1 ?>'><img src="tcab<?php echo $n + 1 ?>.png"></div>
  25. <?php endfor ?>
  26.  
  27. <?php for($n = 0 ; $n < 5 ; ++$n) : ?>
  28. <span class="button" id='button-<?php echo $n + 1 ?>'>Show<?php echo $n + 1 ?></span>
  29. <?php endfor ?>
  30.  
  31. </body>
  32. </html> 
Athee
le 22/05/2012 à 17:46
Athee
Déconnecté
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
Accès rapide :

Remonter Remonter
Jamma Play - L'éditeur javascript - CSS - Tutoriaux PHP - Tutoriels PHP - Bretagne - php - Moto - Kit graphique