Aller plus loin avec le tutoriel "Galerie photo avec JavaScript&q

Coucou, j'ai utilisé le tutoriel "Galerie photo avec JavaScript" par Olivier, voici le lien pour rappel :http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

Super çà fonctionne tip top :

Juste pour aller plus loin,
Imaginons qu'au lieu d'un simple titre d'image (Titre de la photo 1, 2 etc...) nous réalisons une galerie de tableau, donc besoin d'afficher Titre, taille et N°référence.
Comment insérer un titre du style "Titre<br/>taille<br/>référence, etc..." dans la balise <dt>Titre de la photo 1</dt> ???

Si on fonctionne ainsi, le titre affiche les balises HTML...
Quelqu'un à une idée ???
MERCI d'AVANCE !!!

Deuxième question : utiliser ce script, mais au lieu de cliquer sur l'image, n'utiliser que le survol de la souris...
Ya t'il y génie du javascript dans le coin ?

htaine a écrit :
Deuxième question : utiliser ce script, mais au lieu de cliquer sur l'image, n'utiliser que le survol de la souris...

Pour que ça puisse pas être utilisé sur un terminal tactile (au pif: un smartphone quel qu'il soit, un iPad...)? Pas sûr de l'intérêt de la manoeuvre. Ou alors double ce comportement par un comportement au clic.

Et donc le survol, ce sont les évènements mouseover et mouseout. Directement dans le code HTML on pourra utiliser les attributs onmouseover et onmouseout, et en JavaScript on peut avoir:

var test = document.getElementById('test');
test.onmouseover = function(){
  // traitement à l'arrivée du pointeur sur l'élément
}
test.onmouseout = function(){
  // traitement lorsque le pointeur sort de l'élément
}

Pour systématiser ça pour tout un ensemble d'éléments, il va falloir un code un poil plus complexe que cet exemple, bien sûr.

htaine a écrit :
Quelqu'un à une idée ???

Apprendre JavaScript et le DOM.

Une solution relativement simple ici serait de préparer un code HTML comme suit:

<ul id="blabla-nav">
  <li><a href="#blabla1"><img src="blabla1-small.jpg" alt="Bla bla 1" /></a></li>
  <li><a href="#blabla2"><img src="blabla2-small.jpg" alt="Bla bla 2" /></a></li>
  <li><a href="#blabla3"><img src="blabla3-small.jpg" alt="Bla bla 3" /></a></li>
</ul>
<div id="blabla-container">
  <div class="blabla-item" id="blabla1">
    <h2>Titre</h2>
    <img .../>
    <p>Taille</p>
    <p>Référence</p>
  </div><!--.blabla-item-->
  <div class="blabla-item" id="blabla2">
    <h2>Titre</h2>
    <img .../>
    <p>Taille</p>
    <p>Référence</p>
  </div><!--.blabla-item-->
  <div class="blabla-item" id="blabla3">
    <h2>Titre</h2>
    <img .../>
    <p>Taille</p>
    <p>Référence</p>
  </div><!--.blabla-item-->
</div><!--#blabla-container-->

Par défaut, tu affiches toutes tes fiches les unes sous les autres.
Ensuite, au chargement de la page, en utilisant JavaScript tu masques toutes les fiches, ou toutes sauf la première, quelque chose du genre. Tu peux le faire en ajoutant une classe sur les éléments concernés, et en gérant le reste (display:none ou autre solution) en CSS.
Ensuite, au clic sur les petites images, tu masques le DIV en cours et affiches le DIV ciblé.

ya pas moyen, en combinant ta réponse et le script original en ajoutant une <div> cachée (en CSS) dans le <li> de l'image cliquée,
récupérée par un truc du genre

var descript = photos.getElementsById('toto')[0].innerHTML ;

Par contre c'est pour l'adapter à la commande de remplacement de la div ou s'affiche le titre et titre par défaut que je n'arrive pas à capter :

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 
            descript.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 
        }; 
    } 

[/i]

J'ai pas été super claire, je recommence (problème mettre une div avec titre, taille, etc...a la place du simple titre actuel):

Mon code HTML :

<!--Grand photo générale-->
<dl id="photo"> 
        <dt>Ici titre par défaut</dt> 
        <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd> 
</dl> 
<!--Petites photos -->

<ul id="galerie_mini">
  <!--Une miniature-->
        <li>
            <a href="images/photo1.png" title="titre"><img src="images/m_photo1.png" alt="" /></a>
            <div id="title">Titre<br/>Taille<br/>Ref.</div>
        </li>
         <!--Une miniature, etc...--> 
</ul>  

Et la portion que j'essaie d'adapter mais çà foire car je n'arrive pas à adpater l'affichage du résultat sur l'emplacement du titre :

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 

 /*ANCIENNE INSTRUCTION
    var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
    // Et enfin le titre de la photo de taille normale */

/*--->>>>>NOUVELLE INSTRUCTION QUI FOIRE*/
//récupérer le contenu de la div TOTO qui contiens le titre composé en HTML

 var descript = photos.getElementsByTagName('li').getElementsById('title').innerHTML ; 
 
    // 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 

//--->Et ici comment faire ?
            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 
        }; 
    } 
} 

[/i]

Bonjour,

J'aime bien ce script qui est simple, et je l'ai utilisé jusqu'à aujourd'hui ça marchait à merveille, mais voilà qu'à présent, au lieu d'afficher les images dans la page à l'endroit prévu, celles-ci s'ouvrent dans une nouvelle fenètre, et ce sur tous les navigateurs !!
Y a-t-il eu des mises à jour qui ont changé les paramètres de traitement du script? Que dois-je modifier pour pouvoir l'utiliser à nouveau?

grandile a écrit :
Bonjour

Bonjour aussi.
Merci de poser vos questions dans un sujet différent. Nous sommes ici dans un sujet ouvert par htaine, et nous tentons de répondre à ses questions.

Je reprends sur le problème de départ.

Aparemment on est face à une difficulté: un niveau en JavaScript trop bas. Dans ce cas de figure, trois options:
1. Se former (en anglais, il y a une excellente liste d'articles ici). C'est à priori le bon choix pour ceux qui veulent à l'avenir réaliser plein de sites web, en particulier pour les apprentis webdesigners et développeurs web.
2. Chercher un script tout fait, qui fasse exactement ce que l'on cherche à réaliser. Ne pas bidouiller des scripts si on n'a pas le niveau et qu'on n'a pas l'ambition de l'atteindre.
3. Engager un professionnel (intégrateur web).

En imaginant que l'on est dans le premier cas de figure, je vais rapidement pointer une partie des erreurs commises:
1. La structure HTML utilisée n'est pas exploitable. Le principal problème est que l'on utilise un id="title", alors que cette structure doit être répétée pour chaque image. On ne PEUT PAS avoir plusieurs fois le même identifiant dans une page. On utiliser plutôt une classe.
2. Le code suivant commet est erroné:

photos.getElementsByTagName('li').getElementsById('title').innerHTML

- photos correspond à <ul id="galerie_mini">...</ul>, jusque là ça va;
- photos.getElementsByTagName('li') retourne une liste de tous les éléments LI enfant ou descendant de cet UL. Tu ne peux pas chainer un getElementById à la suite de ça. Il faut itérer sur le résultat, comme montré dans cet exemple.
- attention, c'est getElementById, pas getElementsById. Pour un id donné, il n'y a qu'un seul élément. (S'il y en a plusieurs dans la page, la méthode retourne le premier.)

Bonne continuation.

Merci pour ton aide Florent. C'est pas le top mais c'est en bidouillant les scripts que j'arrive à comprendre leur logique, accompagné d'un bouquin sur le javascript. Mais mal grès tout c'est pas évident. Mais j'ai trouvé !!!!

Voici une solution :

<dl id="photo">
    	<dd id="CHAMP_1">Titre</dd>
          <dd id="CHAMP_2">Taille</dd>
          <dd id="CHAMP_3">Reference</dd>
        <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
          
</dl> 

<ul id="galerie_mini">
        	 <li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/m_photo2.png" alt="Taille" class="Reference"/></a></li>
</ul>

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
		  //-------------------------------------------
		  //-- C'est ICI que l'on met les champ a jour
		  //-------------------------------------------
		  document.getElementById("CHAMP_1").innerHTML = this.title;          // par exemple
		  document.getElementById("CHAMP_2").innerHTML = this.firstChild.alt; // par exemple
		  document.getElementById("CHAMP_3").innerHTML = this.firstChild.className; // par exemple
		  return false; // Et pour finir on inhibe l'action réelle du lien
		};

Celà fonctionne, après si c'est correctement correcte, ya qu'un pro comme toi pour le dire...
Merci !!! Bonne continuation [/i]