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
la communauté d'entraide francophone dédiée au PHP
galerie d'image qui s'ouvre dans une autre fenêtre
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
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".
J'ai testé de mon côté, tout fonctionne bien.
Page HTML :
Script JS :
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.
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>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 pageimages (au même niveau que page html) contient :
- toutes les images aggrandies
- le répertoire "minis" qui contient les petites images du haut.
Invité
Invité n'ayant pas de compte PHPfrance
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!
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.
Invité
Invité n'ayant pas de compte PHPfrance
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...
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...
Invité
Invité n'ayant pas de compte PHPfrance
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...
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 ?
As-tu une adresse que je puisse jeter un oeil ?
Invité
Invité n'ayant pas de compte PHPfrance
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:
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 :
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]
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");
?>)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 ?
Invité
Invité n'ayant pas de compte PHPfrance
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!
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!
étonnantca 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)
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();"/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute