Script et iframes

realiser une galerie photo avec du html et du js?

Sujet résolu

9 octobre 2009 à 10:25:25

Bonjour membres du forum,
Je suis nouveau sur ce forum et je viens à vous car j’ai un petit souci pour faire un script. Je vous expose mon problème.

Je suis actuellement en train de développer une galerie photo pour le site web de mon employeur. Celle-ci est composée de la sorte :

• Une page html nommé gallery.html qui contient 2 iframes
• Une page miniature.html qui contient toutes les photos de la galerie photo réduite grâce à un premier script.
• Une page grandpicture.html qui affiche une des photos de sa taille réelle ainsi que le nom du photographe et du lieu où a été pris ce cliché

Autour de ses pages j’utilise des scripts qui réduisent la taille des photos, et affichent la photo en taille réel (ainsi que le photographe et le lieu )dans grandpicture lorsque l’on clique sur sa miniature.

Mon problème c’est que je n’arrive pas à faire ce 2e script. J’ai réussi à le faire pour la 1ère photo mais lorsque je clique sur une autre photo il ne se passe rien… de plus je n’arrive pas à changer le nom du photographe et le lieu.

Pourriez-vous cher internaute m’aider à réaliser ce script ?

birdy42

9 octobre 2009 à 10:29:39

Sans aucun code, c'est impossible

smoothyo

9 octobre 2009 à 10:39:58

Oui très bien alors voici le code de la page html miniature

<script language="javascript">
    function changesrc(){
    parent.Topframe.change_photo();
	//window.alert("changesrc");
    }
    </script>

<body bgcolor="#CCCCCC" >
    <div id="miniature" align="center" >
	<table>
           <tr><td><a href="#" onclick="changesrc();"><img id="photo1" src="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Anglet%20Adeline%203.jpg" border="0" height="58.349999999999994" width="82.5" /></a></td></tr>
  
          <tr><td><a href="#" onclick="changesrc();"><img id="photo2" src="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Anglet%20Adeline%203.jpg" border="0" height="58.349999999999994" width="82.5" /></a></td></tr>
      </table>
</body>

et le code de la page grandpicture

<head>
<script type="text/javascript">

function change_photo(){
//window.alert("OUI");
if (parent.getElementById("photo1").onclick)
	document.getElementById("photocible").src ="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Anglet%20Adeline%203.jpg";
else (parent.getElementById("photo2").onclick)
	document.getElementById("photocible").src ="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Adeline%20Anglet.jpg";

}
</script>
</head>

<body>

<div align="center" >
<table align="center">

<tr><td align="center" valign=top style="width:600;height:600;">

<img id="photocible" alt="" src="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Adeline%20Anglet.jpg" />
</td>
</tr>
<tr><td align="center" ><div id="Title">SOleil </div></td></tr>
<tr><td align="center" ><div id="Copyright">Marie</div></td></tr>

</table>
</div>

</body>

birdy42

9 octobre 2009 à 10:56:58

Je te conseillerais plutôt de passer le numéro de la photo en paramètre, parce que ta condition
(if (parent.getElementById("photo1").onclick))
est toujours vraie (si si

)

function changesrc(nb){
    parent.Topframe.change_photo(nb);
	//window.alert("changesrc");
    }

function change_photo(nb){
//window.alert("OUI");
   if (nb=="1"){
   	document.getElementById("photocible").src ="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Anglet%20Adeline%203.jpg";
   }
   else{
      if(nb=="2"){
	   document.getElementById("photocible").src ="http://fr.franceguide.com/GetV4FO/Images/0/Littoral/Galerie/Borddemer/images/Adeline%20Anglet.jpg";
      }
   }
}

et pour l'appeler :

<a href="#" onclick="changesrc('1');"> <!-- affichera la photo 1 dans la cible -->

smoothyo

9 octobre 2009 à 11:17:20

Super ça fonctionne très bien! Je tente de faire pareil pour les div. Si ça fonctionne ce serai génial.

Je te remercie énormément.

birdy42

9 octobre 2009 à 11:37:08

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page

(et sinon, bah dis ce qu'on peut faire encore

)

smoothyo

9 octobre 2009 à 11:44:00

non c'est bon c'est parfait merci