18041 sujets

Questions générales et questions de débutants

Galerie d'images

Bonjour,

Je viens de découvrir ce site et j'avoue que je suis extrêmement heureuse d'avoir enfin des réponses accessibles!

Je suis entrain de créer un site et je souhaiterai y intégrer un petite galerie photos. J'ai utilisé le tuto d'Olivier : http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

Après avoir faire des tests sur une page web vierge (où tout fonctionnait correctement), j'ai voulu intégré le code dans mon site. Mais là ça coince... Ma galerie s'affiche bien mais lorsque je clique sur une vignette un nouvelle page s'ouvre avec la photo originale au lieu de s'afficher sur la même page en dessous... Je n'arrive pas à trouver l'erreur.

Je vous remercie par avance et m'excuse si je n'ai pas utilisé correctement les règles de ce forum.

Voici mon code :


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<head>
<script src="gallery.js" type="text/javascript"></script>
</head>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
	background-image: url(fond.gif);
	background-repeat: repeat;
	text-align: center;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
	margin: auto;
	margin-left: auto;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
}
.Contenu {
	text-align: justify;
	width: 810px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FFF;
	background-image: url(fond.gif);
	background-repeat: repeat;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #8C8C8C;
}
.maincontent {
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	background-color: #FFF;
}
.bandeaubas {
	color: #333;
	text-align: center;
}
div#galerie 
{
	width: 700px;
	background: #eed;
	border: 1px solid #dcb;
	padding: 15px;
	text-align: center;
	font: 0.9em Georgia, serif;
	margin-top: 15px;
	margin-right: 30px;
	margin-bottom: 15px;
	margin-left: 30px;
} 
 
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">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

</head></html>
<body onload="MM_preloadImages('accueil-fonce.gif','accueil-clair.gif','galerie-fonce.gif','galerie-clair.gif','real-fonce.gif','tarif-fonce.gif','tarif-clair.gif','contatc-fonce.gif','contact-clair.gif')">
<div class="Contenu" id="container">
  <p><img src="baniere1.gif" width="809" height="131" align="top" /></p>
    <table border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="60"><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','Accueil','accueil-clair.gif',1)" onmouseover="MM_nbGroup('over','Accueil','accueil-fonce.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="accueil-clair.gif" alt="" name="Accueil" border="0" id="Accueil" onload="" /></a></td>
        <td><a href="Galerie.htm" target="_top" onclick="MM_nbGroup('down','group1','Galerie','galerie-clair.gif',1)" onmouseover="MM_nbGroup('over','Galerie','galerie-fonce.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="galerie-clair.gif" alt="" name="Galerie" border="0" id="Galerie" onload="" /></a></td>
        <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Realisation','real-fonce.gif',1)" onmouseover="MM_nbGroup('over','Realisation','real-fonce.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="real-fonce.gif" alt="" name="Realisation" border="0" id="Realisation" onload="" /></a></td>
        <td><a href="Tarifs.htm" target="_top" onclick="MM_nbGroup('down','group1','Tarifs','tarif-clair.gif',1)" onmouseover="MM_nbGroup('over','Tarifs','tarif-fonce.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="tarif-clair.gif" alt="" name="Tarifs" border="0" id="Tarifs" onload="" /></a></td>
        <td><a href="Contact.htm" target="_top" onclick="MM_nbGroup('down','group1','Contact','contact-clair.gif',1)" onmouseover="MM_nbGroup('over','Contact','contatc-fonce.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="contact-clair.gif" alt="" name="Contact" border="0" id="Contact" onload="" /></a></td>
      </tr>
  </table>
<div id="mainContent">
<div id="galerie"> 
    <ul id="galerie_mini"> 
        <a href="Image/big/001.gif" title="Titre de la photo 1"><img src="Image/small/001.gif" alt="Le titre de la photo 1" /></a></li> 
 
        <li><a href="Image/big/002.gif" title="Titre de la photo 2"><img src="Image/small/002.gif" alt="Le titre de la photo 2" /></a></li> 
        <li><a href="Image/big/003.gif" title="Titre de la photo 3"><img src="Image/small/003.gif" alt="Le titre de la photo 3" /></a></li> 
        <li><a href="Image/big/004.gif" title="Titre de la photo 4"><img src="Image/small/004.gif" alt="Le titre de la photo 4" /></a></li> 
 
        <li><a href="Image/big/005.gif" title="Titre de la photo 5"><img src="Image/small/005.gif" alt="Le titre de la photo 5" /></a></li> 
        <li><a href="Image/big/006.gif" title="Titre de la photo 6"><img src="Image/small/006.gif" alt="Le titre de la photo 6" /></a></li> 
       
    </ul> 

    <dl id="photo"> 
        <dt>Titre de la photo 1</dt> 
        <dd><img id="big_pict" src="Image/big/001.gif" alt="Photo 1 en taille normale" /></dd> 
    </dl> 
</div>  
  
  <!-- fin de #mainContent --></div>
  <div> <p class="bandeaubas">Copyright © 2011 | Designed By </p> </div> 
<!-- fin de #container --></div>
</body>
</html>
[/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par aure11022 (27 May 2011 - 23:00)
Bonjour et bienvenue !

Si ton image ne s'affiche pas dans la galerie mais s'ouvre dans une nouvelle fenêtre c'est que le script semble ne pas fonctionner.

Es-tu certaine du chemin vers ton fichier gallery.js ?
Bonjour,

Merci pour ta réponse, je viens de vérifier et le chemin de mon script à l'air bon. Il se trouve à la racine, je devrais le mettre ailleurs? Dans le fichier de mes photos?

Merci!
Salut Salut !

Pour le placement de ton script, tout dépend d'où tu l’appelles.

S'il est au même endroit que le fichier HTML l'appelant :
<script src='MonScript.js' type='application/javascript'></script>


S'il est dans un sous dossier 'Scripts' :
<script src='Scripts/MonScript.js' type='application/javascript'></script>


S'il est dans un répertoire de plus haut niveau :
<script src='./MonScript.js' type='application/javascript'></script>

Ensuite, petite astuce pour voir si ton fichier JavaScript est bien appelé, rajoute un 'alert()' (ex : alert("Script appelé"); ) au début de la fonction 'MM_preloadImages()' de ton fichier gallery.js. Cette fonction est appelée à la fin du chargement de ta page, si une popup s'ouvre, ton fichier de script est bien appelé.

Je ne comprends pas trop le code que tu fournis...
A première vu, il s'agit d'une page HTML, contenant ton CSS et ton JavaScript.
Si c'est le cas, pourquoi appeler "gallery.js" au début si tes fonctions sont déjà dans ta page HTML?

Pour faire plus propre, tu devrais avoir au moins 3 fichiers :

_ Ta page HTML,
_ Ton fichier CSS,
_ Ton code JavaScript.

Ta page HTML se chargeant d'appeler ce dont elle a besoin :

<link rel="stylesheet" type="text/css" href="CSS/MonCSS.css" media="screen" />
<script src='Scripts/MonScript.js' type='application/javascript'></script>


Enfin pour l'histoire de la photo qui ne s'affiche pas à l'endroit voulu, voici quelques pistes :

J'ai survolé le code, si j'ai bien compris la chose, lors du clique sur la miniature de la photo, le script va chercher la div ayant pour id "photo" et fait son tintoin (remplacement des enfants? remplacement de certains attributs?).
Pour trouver le soucis, concentre toi sur la fonction 'MM_nbGroup()' où event == 'down'.
Test les valeurs passées à la fonction (via le débogueur JavaScript de FireBug par exemple, en affichant des 'alert()' ou en créant une div 'console' amenée à recevoir tes messages de test.) tu trouveras peut être le problème.
Sujet clos
Aller à