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 !