[Résolu] GALERIE PHOTO AVEC JAVASCRIPT

Bonjour, Je suis en train de réaliser le site internet de notre club de pétanque, www.etoilepetanque.fr hébergé par one.com en utilisant leur WEBEDITEUR qui permet d’insérer un bloc code.
Etant architecte à la retraite mes notions informatiques sont très faible et nul pour le JavaScript.
Sur la page test du site j’ai essayé de d’utiliser votre didacticiel « GALERIE PHOTO AVEC JAVASCRIPT ».
Tout fonctionne pour l’affichage mais lorsque je click avec la souris une nouvelle page s’ouvre pour afficher la photo en grand. (dommage)
Pouvez vous m’aider à incorporer correctement le code JavaScript dans la page HTML (je n’ai pas réalisé un fichier .js trop compliqué pour moi (pensant pouvoir le traiter « à ma façon »
)Merci d’avance

Bonjour,

En fait, la fonction qui gère les clics sur les petites images n'est pas appelées dans votre code suite à une erreur de script.

Vous avez mis :

<window.onload = "displayPics();">

au lieu de

window.onload = "displayPics();"

.
De plus, il faut placer cela juste à la fin du script (et pas en dehors ).

Conseil: votre page présente de sérieux problèmes étant donné que vous avez copié/collé la page d'Alsacréations telle quelle sans adapter (ainsi, vous avez 2 doctypes, 2 heads, 2 bodys ...)

Merci pour votre réponse rapide je rectifie et je vous tiens au courant.

Je viens de modifier : window.onload = "displayPics();" mais cela n'a pas de résultat désolé.
Concernant les doubles entetes :
Pour faire mes essais je fonctionne en local sur une page HTML indépendante du site ONE.COM
que je mette le morceau en JAVASCRIP ou non le résultat est le meme.
Je doit avoir une erreur de non de variable ou ....
Je peux vous faire passer ce fichier certainement plus simple à regarder si vous le souhaitez avec les images correspondantes par Email
Cordialement.

Re Bonjour,
Si je pouvais faire fonctionner votre tutorial je pourrais peut etre trouver la solution sans trop vous déranger. Pour faire ces essai pouvez vous me tranmettre le fichier script.js correspondant à votre tutorial. Je pourrais voir la correspondance entre les variables et vérifier mon adaptation.
A+

Bonjour jacquesg,

Le fichier js se trouve dans le tutoriel et dans la page de test :

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale
	
	for(var i = 0 ; i < liens.length ; i++)
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	{
		liens[i].onclick = function()
		// Au clique sur ces liens
		{
			big_photo.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title ; // On change son titre
			titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
			return false ; // Et pour finir on inhibe l'action réelle du lien
		}
	}
}

window.onload = displayPics ;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page

Tout comme la feuille de styles, le code html, les images...

Inutile d'envoyer quoi que ce soit, les fichiers sont à disposition via votre page.

Comme lddsoft vous en a fait la remarque, il est impératif de travailler avec un code correct, commencez par corriger les erreurs, vous y verrez plus clair.
[/i]

Comme je vois que vous avez énormément de difficultés pour intégrer le script de galerie-photos, et que je suis un fervent bouliste , je me suis mis à nettoyer quelque peu votre page de manière à ce qu'elle fonctionne (du moins sur IE8, FF18.0.2 et Google Chrome Version 24.0.1312.57 m). Ce n'est pas encore parfait, mais ça marche ...
Remplacez votre page actuelle par le code ci-dessous:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TEST GALERIE</title>
<meta name="generator" content="One.com Web Editor" />
<link rel="stylesheet" href="http://etoilepetanque.fr/onewebstatic/c2e953c5c0.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://etoilepetanque.fr/onewebstatic/36bf642b4e.css" />
<![endif]-->
<style type="text/css">
body {padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font: 0.9em georgia, serif; padding-top: 0px}
h1 {margin: 15px 10px; color: #dcb; text-decoration: underline}
p {line-height: 1.5em; text-indent: 1em; margin: 1px 1px}
div# galerie {border-bottom: #dcb 1px solid; text-align: center; border-left: #dcb 1px solid; padding-bottom: 15px; margin: 15px 30px; padding-left: 15px; width: 700px; padding-right: 15px; background: #eed; border-top: #dcb 1px solid; border-right: #dcb 1px solid; padding-top: 5px}
ul#galerie_mini {padding-bottom: 0px; list-style-type: none; margin: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px}
ul#galerie_mini li {float: left}
ul#galerie_mini li a img {border-bottom: #dcb 1px solid; border-left: #dcb 1px solid; margin: 0px 1px; border-top: #dcb 1px solid; border-right: #dcb 1px solid}
dl#photo {margin: 0px auto; clear: both}
dl#photo dt {font: italic 1.5em/1.5em georgia, serif; color: #dcb}
dl#photo dd {margin: 0px}
dl#photo img {border-bottom: #dcb 1px solid; border-left: #dcb 1px solid; border-top: #dcb 1px solid; border-right: #dcb 1px solid}
</style>
<script type="text/javascript"> 
function displayPics(){
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[ 0 ] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i=0;i<liens.length;++i){
    // Au clique sur ces liens 
    liens[ i ].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
</script>
</head>
<body class="body blockbody">
<div class="innerBody self container" style="width:1174px;min-height:900px;width:1174px;margin:auto;"><div class="block">
<div class="self container horizontalcontainer" style="width:1174px;min-height:150px;height:150px;">
<div class="horizontalwrapper block" style="width:200px;">
<div class="self container" style="width:200px;min-height:150px;">
<div class="end"></div></div>
</div>
<div class="horizontalwrapper block" style="width:974px;">
<div class="self container" style="width:974px;min-height:150px;">
<div class="holder ">
<div class="self" style="width:974px;">
<div class="block filler">
<div class="self container" style="width:100%;height:100%;">
<div class="anchor block id7F702B2E8F3F4B6FAFF1A68DC1FC8123 menu">
<!--[if !IE]> --><div class="anchorwrapper"><!-- <![endif]-->
<div class="self menuself menuhorizontal menuhorizontalcenter menuverticalbottom" style="width:974px;height:148px;">
<ul class="menu1">
<li><div>
<a class="menu1item" href="http://etoilepetanque.fr/index.html">accueil</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item menu1expandable" href="http://etoilepetanque.fr/le-club/index.html">Le Club</a><div class="menucascadeanchor">
<ul class="menu1 menucascade">
<li><a class="menu1item" href="http://etoilepetanque.fr/le-club/historique.html">Historique</a></li><li class="divider menu1divider"></li><li><a class="menu1item" href="http://etoilepetanque.fr/le-club/c-a.html">C.A.</a></li><li class="divider menu1divider"></li><li><a class="menu1item" href="http://etoilepetanque.fr/le-club/plan-dacces.html">Plan d'accès</a></li><div class="end"></div>
</ul></div></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item" href="http://etoilepetanque.fr/ecole-de-petanque.html">Ecole de pétanque</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item" href="http://etoilepetanque.fr/calendrier.html">CALENDRIER</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item" href="http://etoilepetanque.fr/retrospective.html">RETROSPECTIVE</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item" href="http://etoilepetanque.fr/les-liens.html">Les liens</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item" href="http://etoilepetanque.fr/nous-contacter.html">Nous contacter</a></div>
</li><li><div class="divider menu1divider"></div><div>
<a class="menu1item menu1selected" href="http://etoilepetanque.fr/test.html">TEST GALERIE</a></div>
</li>
</ul>
</div>
<!--[if IE]><div class="float " style="width:687px;left:153px;bottom:-655px;">
<![endif]-->
<!--[if !IE]> -->
<div class="float " style="width:687px;left:153px;bottom:-658px;">
<!-- <![endif]-->
<div class="self" style="width:687px;min-height:552px;">
<div id="galerie">
	<ul id="galerie_mini">
		<li><a title="Patrick, Guy et James" href="http://etoilepetanque.fr/onewebphoto/G01.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m01.jpg" alt="photo 1" ></a></li>
		<li><a title="Patrick, Guy et James" href="http://etoilepetanque.fr/onewebphoto/G02.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m02.jpg" alt="photo 2" ></a></li>
		<li><a title="James" href="http://etoilepetanque.fr/onewebphoto/G03.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m03.jpg" alt="photo 3" ></a></li>
		<li><a title="Loulou" href="http://etoilepetanque.fr/onewebphoto/G04.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m04.jpg" alt="photo 4" ></a></li>
		<li><a title="Gino" href="http://etoilepetanque.fr/onewebphoto/G05.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m05.jpg" alt="photo 5" ></a></li>
		<li><a title="Lino et Jean Louis" href="http://etoilepetanque.fr/onewebphoto/G06.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m06.jpg" alt="photo 6" ></a></li>
		<li><a title="Jacques" href="http://etoilepetanque.fr/onewebphoto/G07.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m07.jpg" alt="photo 7" ></a></li>
		<li><a title="Jo, Jean Claude et Roland" href="http://etoilepetanque.fr/onewebphoto/G08.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m08.jpg" alt="photo 8" ></a></li>
		<li><a title="Patrick et James" href="http://etoilepetanque.fr/onewebphoto/G09.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m09.jpg" alt="photo 9" ></a></li>
		<li><a title="Jacques,José,Pierre et Francis" href="http://etoilepetanque.fr/onewebphoto/G10.jpg">
		<img src="http://etoilepetanque.fr/onewebphoto/m10.jpg" alt="photo 10" ></a></li>
	</ul>
	<dl id="photo">
	  <dt>Patrick, Guy et James</dt>
	  <dd><img id="big_pict" alt="Photo 1 en taille normale" src="http://etoilepetanque.fr/onewebphoto/G01.jpg"></dd>
	</dl>
</div>
</div>
</div>
<!--[if !IE]> --></div><!-- <![endif]-->
</div>
<div class="end"></div></div>
</div>
</div>
</div>
<div class="end"></div>
</div>
</div>
<div class="end"></div>
</div>
</div>
<div class="horizontalwrapper block id2F6709D58D5C4DB8B6D89E1F3D172960" style="width:959px;">
<div class="self text textparagraph" style="width:959px;min-height:15px;"><div style="text-align:right;line-height:1.2;"><p style=""><span style="font-size:12px;font-weight:normal;text-shadow:1px 1px 1px rgb(128,128,128);"><a class="textlink link" href="http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html">Galerie alsacréation</a></span></p></div></div>
</div>
</body>
</html>

EDIT: Petite excuse : dans mon post précédent, il fallait lire window.onload = displayPics;
Votre code ne fonctionnait pas principalement parce que vous avez modifié, semble-t-il, le script de départ (celui du tutoriel).
Modifié par lddsoft (13 Feb 2013 - 16:59)

Bonjour,
Je vous remercie la galerie fonctionne sur le site.
Si vous êtes de passage à VALRAS PLAGE envoyez moi un Email vous êtes mon invité pour une partie de pétanque (ou plusieurs) et surtout une bonne soirée …..
Encore merci.
P.S. pouvez vous me communiquer si vous le souhaitez le logo Alsacreations en « .gif » pour vous faire un peu de pub sur la page galerie et le lien vers votre site.