Forum d'entraide PHPFrance

Bonjour!

Voila, pour réaliser une galerie photo en javascript je me suis servi d'un tuto à l'adresse suivante :

http://css.alsacreations.com/Tutoriels- ... javascript

Dnas leur exemple ça marche très bien
Mais avec leur code que je reprend chez moi à chaque fois la grande image s'affiche dans une autre fenêtre.
Après une recherche sur le forum d'alsacreation, je me suis aperçu qu'un autre personne avait déjà eu ce problème il y a quelques temps mais personne n'avait pu l'aider!

Si je ne suis pas la seule je pense donc qu'il y a une erreur dans le code mais je ne trouve pas!

Quelqu'un peut m'éclairer?
Merci d'avance!

crampouz

Remplaces le .js par celui ci :

Code : Tout sélectionner

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

nan ça ne marhce pas mieux...

Pour que ça marche, ton fichier HTML doit se trouver au même niveau que le répertoire "images". Est-ce le cas ? Sinon l'image s'ouvre en "_parent".

non non les chemins sont bons...

J'ai testé de mon côté, tout fonctionne bien.

Page HTML :

Code : Tout sélectionner

<!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>Galerie photo en xHTML CSS et JavaScript</title>

	  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<style type="text/css">
		body
		{
			margin: 0 ;
			padding: 0 ;
			font: 0.9em Georgia, serif ;
		}
		h1
		{
			margin: 15px 10px ;
			text-decoration: underline ;
			color: #dcb ;
		}
		
		p
		{
			line-height: 1.5em ;
			text-indent: 1em ;
			margin: 15px 10px ;
		}
		
		div#galerie
		{
			width: 410px ;
			background: #eed ;
			border: 1px solid #dcb ;
			padding: 15px ;
			margin: 15px 30px ;
			text-align: center ;
		}
		
		ul#galerie_mini
		{
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
		}
		
		ul#galerie_mini li
		{
			float: left ;
		}
		
		ul#galerie_mini li a img
		{
			margin: 2px 1px ;
			border: 1px solid #dcb ;
		}
		
		dl#photo
		{
			clear: both ;
			margin: 0 auto ;
		}
		
		dl#photo dt
		{
			font: italic 2.5em/1.5em Georgia, serif ;
			color: #dcb ;
		}
		
		dl#photo dd
		{
			margin: 0 ;
		}
		
		dl#photo img
		{
			border: 1px solid #dcb ;
		}
		</style>
		
		<script type="text/javascript" src="script.js"></script>
	</head>
	
	<body>
	
	<div id="galerie">
		<ul id="galerie_mini">
			<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
			<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
			<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
			<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
			<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
			<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
			<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
			<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
			<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
		</ul>
		
		<dl id="photo">
			<dt>Titre de la photo 1</dt>
			<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
		</dl>
	</div>
	
	</body>
</html>

Script JS :

Code : Tout sélectionner

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

Arborescence images :
images (au même niveau que page html) contient :
- toutes les images aggrandies
- le répertoire "minis" qui contient les petites images du haut.

okioki alors en fait, quand je prends tout ça sur des pages vierges ça marche, et quand je rajoute le tout sur une page qui a déjà du contenu ça ne marche plus....
Le fait que la div soit dans une autre div, ou qu'il y ait du php sur la pge change quelque chose? ça pourrait empecher le javascript de fconftionner? sachant que j'ai copier coller le code!

Je pense que le souci se situe dans l'arborescence. Tu utilises des pseudos frames ? include ? ça peut jouer dessus.

Bon j'ai découvert un nouveau truc mais la ça dépasse les frontières du réèl pour moi...

La je travaille sur un serveur local, et la donc ca ne marche pas, je copie colle mes fichiers sur le bureau.. et la ca marche...

Est ce normal???
je vais tester en ligne directement pour voir...

bon ben ça ne marche pas en ligne, ça ne marche que sur mon bureau c'est génial.

J'utilise effectivement des includes dans ma pages mais aucune parti du code concerné ne se trouve dans un de ces includes.
Et si ça marche sur mon bureau c'est quand même étrange...

Tu as exactement la même arborescence sur ton serveur local et distant ? Sur le bureau tu testes quoi ? Juste les pages concernées ou le site entier avec cette galerie ?

As-tu une adresse que je puisse jeter un oeil ?

oui j'ai exactement la même arbo.
En fait j'utilise:
- transfert.php ,la page ou se trouve l'html en question
- style.css, la feuille de style
- script_transfert.js, le fichier javascript pour la galerie

Dans la page transfert en gros il se passe ca:

include du fichier partie_un.php, c'est une partie commune a toutes les pages du site

html avec contenu dont la galerie

include du fichier partie_deux.php, également une partie commune a toutes les pages du site.

J'ai donc simplement copier sur mon bureau ces 5 fichiers qui se trouvent au même nivo (donc pas de problèmes d'arbo) aisin que le dossier images (pas de prb d'arbo puisque de toute facon les images s'affichent).
Plus concrètement niveau code ça donne ça:

Code : Tout sélectionner


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>-----</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="script.js" language="JavaScript" type="text/JavaScript"></script>

<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script_transfert.js"></script> 
</head>

<!-- Début identique à chaque page-->
<?php
include("partie_un.php");
?>

<!-- stats-->
<script type="text/javascript">
<!--
xtnv = document;           //affiliation frameset : document, parent.document ou top.document
xtsd = "http://logi10";
xtsite = "212622";
xtpage = "Goodies::transfert01";             //placer un libellÈ de page pour les rapports Xiti
xtdmc = "";           //Domaine cookie en ".monsite.fr" (optionnel)
xtprm = "";           //ParamËtres supplÈmentaires (optionnel)
//-->
</script>
<script type="text/javascript" src="http://www.jeunestyliste.com/xiti.js"></script>

<!-- Contenu de la page, idem à la page des goodies -->
    
<td width="640" align="left" valign="top"> <img src="images/goodies/bande_menu_bleue_accporte.gif" width="641" height="19" border="0" usemap="#Map"> 
  <map name="Map">
    <area shape="rect" coords="12,4,135,18" href="cartinvit.php">
    <area shape="rect" coords="239,3,324,18" href="goodies.php">
  </map> 

<div>

  <div id="galerie"> 
      <ul id="galerie_mini"> 
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li> 
         <li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li> 
         <li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li> 
         <li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li> 
         <li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li> 
         <li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li> 
         <li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li> 
         <li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li> 
         <li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li> 
      </ul> 
       
      <dl id="photo"> 
         <dt>Titre de la photo 1</dt> 
         <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd> 
      </dl> 
   </div> 



</div> 
  </td>
  </tr>
  </body> 


<!-- Fin identique à chaque page-->
<?php 
include("partie_deux.php");
?>

ca va peut-etre vous paraitre un peu le bordel...
Et donc ce fichier la sous mon bureau marche, il ne prends pas les include en compte ( dans le code source il est écrit tel quel :

Code : Tout sélectionner

<?php
include("partie_un.php");
?>)

sur le serveur local ou en ligne ca ne marche plus, les includes sont remplacés par le contenu de la page partie_un et partie_deux, et le javascript n'est en quelque sorte plus appelé puisq mon image saffiche seul sur la page lorsque l'on clique sur la miniature.

Enfin je sais pas si ca a un rapport mais c'est quand même étrange

Voilà j'espère qu'avec ca vous pourrez m'éclairer parce que la je désespère!

Merci d'avance[/code]

J'ai repris exactement ton code sur mon serveur local et tout marche bien. Es-tu sûr que ton fichier script.js de la galerie se trouve bien au bon endroit ?

ca y est j'ai trouvé le bug.
C euq je ne savasi pas c que il y avait déja un onload dans la page (dans un autre fichier javascript fans un autre include), fallait le trouver ce bout de code la!
Et du coup mon onload a moi qui arrivait après ne marhcait pas forcément... bon maintenant il faut que jarrive a faire fonctionner les 2onload en même temps!

ca y est j'ai trouvé le bug.
C euq je ne savasi pas c que il y avait déja un onload dans la page (dans un autre fichier javascript fans un autre include)

étonnant

Un "onload" se place dans la baslise <body> ce qui veut dire que tu as plusieurs <body> dans la meme page

sinon pour plusieurs appel de fonctions tu peux faire comme ceci:

onload="fonction1();fonction2();"

Forum d'entraide PHPFrance

galerie d'image qui s'ouvre dans une autre fenêtre

galerie d'image qui s'ouvre dans une autre fenêtre