[Résolu] Galerie photos en javascript:: probléme affichage...

Question

Artno

13 Sep 2006 à 16:59

Bonjour,

J'ai utilisé le tuto de la galerie photos avec javascript. J'ai un soucis sûrement tout bête mais dont je n'arrive pas à me sortir ( trop la tête dans le guidon sûrement >< )

Lorsque je sélectionne une image en miniature, au lieu que celle-ci s'affiche en grand dans la fenêtre dédié, le lien est pris comme un accès à une nouvelle page. J'ai l'impression que le javascript n'est pas pris en compte. Lorsque je vérifie en local je n'ai aucun soucis, c'est uniquement quand je consulte la page via mon hébergeur. Smiley sweatdrop

J'ai beau vérifier les liens, fichiers etc je ne vois pas... Si quelqu'un qui a un peu de recul peut me renseigner Smiley smile

Le lien vers la page qui pose soucis: http://s140391601.onlinehome.fr/lagardedamakna/fanart.html

Le code HTML de la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>La Garde d'Amakna: Le site.</title>
<meta name="author" content="ArtNo" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-15" /> 
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Dofus,MMORPG,MMOG,Ankama,jeux PC, jeux massivement multi-joueurs,jeu en ligne, rpg, flash, artno, guilde, garde" />
<meta name="Category" content="Games" />
<meta name="description" content="Dofus - Site et forum de discussion sur le MMORPG (jeux massivement multi-joueurs)" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="3 days" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

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

</head>

<body>
<div id="conteneur">

		<div id="header"></div>

		<div id="haut">
	  		<ul class="menuhaut">
			<li><span>Menu " L'Antre" ></span></li>
			<li><a href="accueil.html" title="Retour à la page d'Accueil">Retour</a></li>
			<li><a href="antre.html" title="Les dernières infos du site">News</a></li>
			<li><a href="fanart.html" title="Galerie des artistes dofusiens">FanArt</a></li>
			<li><a href="plan.html" title="Perdu?">Plan du site</a></li>
			<li><a href="livre.php" title="Un petit mot?">Livre d'Or</a></li>
			<li><a href="tchat.html" title="Blabla et non Chacha!">Tchat</a></li>
			<li><a href="liens.html" title="Pleins d'autres sites à visiter">Liens</a></li>
			<li><a href="mailto:lagardedamakna&#64;no&#45;log&#46;org" title="Contacter le webmaster">Contact</a></li>
			</ul>
		</div>

		<div id="gauche">
	  		<ul class="menugauche">
			<li><a id="menu1" href="accueil.html" title="Retour à la page d'Accueil"><span>Accueil</span></a></li>
			<li><a id="menu2"href="ordre.html" title="L'histoire, les membres et le fonctionnement de la guilde"><span>L'Ordre</span></a></li>
			<li><a id="menu3" href="recrutement.html" title="Envie de postuler? C'est ici!"><span>Recrutement</span></a></li>
			<li><a id="menu4"href="jeu.html" title="Présentation du jeu Dofus"><span>Le jeu</span></a></li>
			<li><a id="menu5"href="antre.html" title="Tout le bazar du site: FanArt, News, liens, livre d'or, Tchat etc"><span>L'Antre</span></a></li>
			<li><a id="menu6"href="http://lagardedamakna.free.fr/forum" title="Accès au forum de la guilde"><span>Le forum</span></a></li>
</ul>
		</div>
	  
	<div id="centre">
	
<br /> 

<h1>FanArt Dofus</h1>

<p>La galerie devrait se compléter progressivement. Si vous souhaitez vous aussi "exposer", n'hésitez pas à nous transmettre vos créations via <a class="centre" href="mailto:lagardedamakna&#64;no&#45;log&#46;org">notre email.</a></p><br />

<p>Merci de bien vouloir respecter le travail d'autrui et de demander à l'auteur l'autorisation de reprendre une de ses réalisations ( au besoin contacter nous!). Toutes les images sont " copyright".</p><br />

<div id="galerie">

<ul id="galerie_mini">

<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img1.jpg" title="Zolen, illustration réalisé dans le cadre du FanBook ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_01.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img2.jpg" title="La Garde d'Amakna, illustration pour l'intro du site version 2.0 ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_02.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img3.jpg" title="Gateau pour le premier anniversaire de la Garde ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_03.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img4.jpg" title="Zolen ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_04.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img5.jpg" title=" Chosept rentre de vacances ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_05.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img6.jpg" title="Klubuts en mode No Life ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_06.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img7.jpg" title="Polgaria se préparant à un combat acharné ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_07.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img8.jpg" title="Tite Nana vise juste ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_08.gif" alt="ArtNo" /></a></li>
<li><a href="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/img9.jpg" title="Weetos, le temps est compté ( par ArtNo)"><img src="http://s140391601.onlinehome.fr/lagardedamakna/images/fanart/m_09.gif" alt="ArtNo" /></a></li>

</ul>

<dl id="photo">
		
<dd><img id="big_pict" src="images/fanart/img0.jpg" alt="image d'acceuil de la galerie" /></dd>

<dt>Sélectionner une miniature pour l'afficher en grand.</dt>
	
</dl>

</div>
<br />
<a class="retour" href="#">Retour en haut de page</a><br />
<br />
</div>
	  
	<div id="pied">Réalisation du site <a href="mailto:artno&#64;no&#45;log&#46;org">ArtNo</a> © 2005 La Garde d'Amakna. Tous droits réservés.<br/>
Les images et textes issus de <a href="http://www.dofus.com/fr/">Dofus</a> sont © 2004 <a href="http://www.ankama-studio.com/fr/accueil.html">Ankama Studio</a>.Tous droits réservés.
	</div>
	  
</div>
</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

Le fichier script.js

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
		};
	}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page

Par avance, merci de votre aide Smiley smile

[/i]
Modifié par Artno (14 Sep 2006 - 18:01)

Christian Le Bouler

14 Sep 2006 à 05:00

Salut,

Le deuxième onload

window.onload = SymOnLoad;

que l'on trouve en fin de document annihile le premier, celui du script d'olivier.

Artno

14 Sep 2006 à 13:16

Bonjour clb56 et merci de ta réponse mais... Je n'ai pas compris. ^^

Tu parle de quelle partie qui est "de trop"?

En prime, j'ai beau relire j'ai repris code pour code celui d'Olivier côté javascript ( je ne me suis pas aventuré à modifier quoi que ce soit puisque je ne connait rien de rien à ce language ^^)

Vero

14 Sep 2006 à 13:26

Bonjour,

Il y a un autre script en bas de ta page html.
Smiley cligne

yodaswii

14 Sep 2006 à 13:29

Bonjour Artno,

clb56 parle de cette partie (située après la balise fermante html de ton document) :

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;
function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
  SymRealOnUnload();
}
function SymOnLoad()
{
  if(SymRealOnLoad != null)
  SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}
SymRealOnLoad = window.onload;
[b]window.onload = SymOnLoad;[/b]
//-->
</script>

Ce window.onload courcicuite celui que tu utilises pour affecter les événements à chaque miniature ...

Bonne continuation.
Romain

Artno

14 Sep 2006 à 13:49

Merci de votre aide Vero et yodaswii... Décidément je n'aurais jamais autant mérité ma signature qu'aujourd'hui. Smiley ohwell

J'avais donc bien suivi les propos de clb56. Seulement je ne comprends pas si je dois simplement supprimer cette ligne ou l'intégralité de cette partie que tu cite yodaswii?

J'ai testé les deux types de suppression mais cela ne change rien à mon problème. De plus, sur le tuto d'Olivier cette partie est bien présente en fin de page, y compris avec cette ligne que tu mets en gras Smiley ohwell

En prime, je ne comprends pas que cela fonctionne en local sur mon PC et pas une fois hébergé... Smiley sweatdrop

Bref, je suis complétement paumé et d'autant plus que la solution vous semble évidente... Smiley biggol

Modifié par Artno (14 Sep 2006 - 13:50)

yodaswii

14 Sep 2006 à 13:52

Re-bonjour,

En fait, enlève cette instruction (window.onload) de ton fichier js et modifie celle en fin de page par ceci :

window.onload = function ()
{
displayPics();
SymOnLoad();
}

Bonne journée.
Romain
Modifié par yodaswii (14 Sep 2006 - 13:53)

Artno

14 Sep 2006 à 14:08

Si je comprends bien, je me retrouve avec un fichier js comme ceci:

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
		}
	}
}

Et sur ma page, après la balise </html> j'ai:

<script language="JavaScript">

<!--

var SymRealOnLoad;

var SymRealOnUnload;

function SymOnUnload()

{

  window.open = SymWinOpen;

  if(SymRealOnUnload != null)

  SymRealOnUnload();

}

function SymOnLoad()

{

  if(SymRealOnLoad != null)

  SymRealOnLoad();

  window.open = SymRealWinOpen;

  SymRealOnUnload = window.onunload;

  window.onunload = SymOnUnload;

}

window.onload = function ()

{

displayPics();

SymOnLoad();

}

//-->

</script>

Si oui, cela ne change rien en ligne, par contre en local sur mon PC la galerie n'affiche plus correctement les miniatures agrandies Smiley sweatdrop

[/i]

koala64

Modérateur

14 Sep 2006 à 14:18

Salut,

Le code de la page html est lu avant les fichiers liés. La galerie n'existe donc pas encore au moment où tu charges le script.

Essaye en déportant :

window.onload = function ()
{
displayPics();
SymOnLoad();
}

dans le fichier de la galerie. Smiley cligne

yodaswii

14 Sep 2006 à 14:33

Merci pour l'info Koala Smiley cligne

...

Je pensais que c'était le contraire ...

Romain

Artno

14 Sep 2006 à 14:51

Au secourrrrrrrrrr Smiley lol

Cette fois je suis complétement paumé... A force de modifier dans tout les sens je ne sais plus où j'en suis ni ce que je dois garder ou non. Smiley sweatdrop

Je vous livre ci-dessous où j'en suis en ayant essayé de modifier selon vos conseils.

Le fichier js :

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 = function ()

{

displayPics();

SymOnLoad();

}

Le bas de page du code html:

</body>
</html>

<script language="JavaScript">

<!--

var SymRealOnLoad;

var SymRealOnUnload;



function SymOnUnload()

{

  window.open = SymWinOpen;

  if(SymRealOnUnload != null)

     SymRealOnUnload();

}



function SymOnLoad()

{

  if(SymRealOnLoad != null)

     SymRealOnLoad();

  window.open = SymRealWinOpen;

  SymRealOnUnload = window.onunload;

  window.onunload = SymOnUnload;

}



SymRealOnLoad = window.onload;

//-->

</script>

J'ai dû me mélanger les pinceaux Smiley sweatdrop

Je découvre encore le html et le css mais il semble évident qu'il va falloir que je me mette aussi au javascript. C'est pas gagné quand je vois les lignes de code... J'ai jamais été doué pour les langues étrangères. Smiley murf

[/i]

chmel

14 Sep 2006 à 14:54

Bonjour,
Rien de tout cela, le script apparemment ajouté par l'hébergeur fonctionnait.
Le problème est que tu t'es gourré dans l'adresse d'accès au fichier script :

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

li y avait lagardedamakna en trôp
Smiley cligne

koala tu m'étonnes Smiley lol

Modifié par chmel (14 Sep 2006 - 14:59)

Artno

14 Sep 2006 à 15:03

Merci mais le changement de lien n'y change rien... J'avais déjà tenté en prime car j'avais pensé initialement à ça Smiley ohwell

koala64

Modérateur

14 Sep 2006 à 15:56

chmel a écrit :
koala tu m'étonnes

arf... no comment... suis pas concentré... Smiley confused

(window.onload agit une fois toute la page chargée)

mmh... Peux-tu virer tous les scripts dans la partie HTML et remettre le script d'Olivier tel qu'au départ puis tester en local ? Ensuite, remets ta page en ligne... et reteste. Que se passe-t-il dans ces deux cas ?
Modifié par koala64 (14 Sep 2006 - 16:21)

koala64

Modérateur

14 Sep 2006 à 16:04

a écrit :
Lorsque je vérifie en local je n'ai aucun soucis, c'est uniquement quand je consulte la page via mon hébergeur.

ok, je me trompe peut-être mais il me semble que tu n'y peux rien mis à part changer d'hébergeur... Smiley ohwell

(Ta page est d'ailleurs invalide à cause du script situé après la balise html de fermeture)

<edit> Au cas où... Place le code d'Olivier à la fin de la page HTML juste avant la balise de fermeture puis remplace window.onload = displayPics; par displayPics();
Modifié par koala64 (14 Sep 2006 - 16:13)

Artno

14 Sep 2006 à 16:27

Bon, j'ai viré tout les scripts dans la partie html et remis la feuille javascript séparé comme à l'origine.
En local comme en ligne pas de soucis, la page fonctionne nickel.

Il semble qu'en ligne les scripts dans la page html posaient donc problème. Vu ton second message j'en déduis que cela vient de mon hébergeur et que cela aurait même pu ne pas se résoudre par cette pirouette. Tu as une explication? ( je suis curieux Smiley smile

)

Dans tout les cas merci à tous Smiley cligne

koala64

Modérateur

14 Sep 2006 à 16:38

SymError, SymWinOpen,...

Ah ! Me souviens ! Smiley idee2

Ce n'est pas l'hébergeur... Sym comme Symantec ! Smiley ravi

C'est Norton Antivirus qui ajoute ce script ! Smiley lol

PS : Pense au petit [Résolu] Smiley cligne

Modifié par koala64 (14 Sep 2006 - 17:13)

Artno

14 Sep 2006 à 18:01

Je m'en occupe, j'attendais ta réponse pour l'hébergeur ^^

Encore merci à tous, je passe le sujet en résolu Smiley smile

( Il a du mal aujourd'hui koala64 Smiley lol

)

Sujet clos