Discussion :

[Klink]

Bonjour a tous
je débute en javascript
j'ai un script pour un album photo. j'ai remarqué que si il n'y a pas de titre le script plante.
j'ai essayer de l'adapter en mettant if (this.title == "") continue; par exemple mais je n'y arrive pas. si vous pouviez m'aiguiller sur le problème,mes recherche internet on rien donnée.
d'avance merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
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
      document.location="#ancrephoto";
	  return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

[andry.aime]

Bonjour,

Essaie avec if (this.getAttribute("title") == 'undifined').

A+.

[SylvainPV]

Bonjour,

Peux-tu nous dire ce que tu as en console Javascript à l'exécution ?

@andry.aime : if (this.getAttribute("title") == undefined) est plus exact
bien qu'on ne sache pas exactement à quoi this fait référence ici

[andry.aime]

En effet SylvainPV .

[andry.aime]

bien qu'on ne sache pas exactement à quoi this fait référence ici

C'est un peu comme dans la faq.

[Klink]

@SylvainPV la console reste vide
voici le html qui corespond au javascript si ca peux vous aidé

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="galerie">
 
 <ul id="galerie_mini"> 
    <li>
    <?php if (!empty($photo0)){ echo "<a href=\"photos/fullsize/$photo0\" title=\"$titre0\"><img src=\"photos/mini/$photo0\" alt=\"$titre0>\" /></a>";}?>
      </li>
    <li>
    <?php if (!empty($photo1)){ echo "<a href=\"photos/fullsize/$photo1\" title=\"$titre1\"><img src=\"photos/mini/$photo1\" alt=\"$titre1>\" /></a>";}?>
      </li>
      <li>
    <?php if (!empty($photo2)){ echo "<a href=\"photos/fullsize/$photo2\" title=\"$titre2\"><img src=\"photos/mini/$photo2\" alt=\"$titre2>\" /></a>";}?>
      </li>
      <li>
    <?php if (!empty($photo3)){ echo "<a href=\"photos/fullsize/$photo3\" title=\"$titre3\"><img src=\"photos/mini/$photo3\" alt=\"$titre3>\" /></a>";}?>
      </li></ul>
<dl id="photo">
   <?php if (!empty($titre0)){echo "<dt>$titre0</dt>";} 
    if(!empty($photo0)){echo "<dd><img id=\"big_pict\" src=\"photos/fullsize/$photo0\" alt=\" ";} if (!empty($titre0)){echo " $titre0\"/></dd>";} ?>
  </dl>
  <a name="ancrephoto"></a></div>

[Kaamo]

Ceci est le php et non le HTML généré ....
On ne sait pas ce qu'il y a, par exemple, dans $titre0 ou encore $photo0

[Klink]

Tu ne souhaites pas le click sur le premier lien ?

vi je ne souhaite pas le click sur le premier lien.

voici le code html généré

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<div id="galerie">
<ul id="galerie_mini">
<li>
<a title="222" href="photos/fullsize/856b57e31f702963cc57039cf68cfa2a5fdc07e5.jpg">
<img alt="222>" src="photos/mini/856b57e31f702963cc57039cf68cfa2a5fdc07e5.jpg">
</a>
</li>
<li>
<a title="modif 32" href="photos/fullsize/0dedab255be40214602eeab7d2b9febeb74acbb5.jpg">
<img alt="modif 32>" src="photos/mini/0dedab255be40214602eeab7d2b9febeb74acbb5.jpg">
</a>
</li>
<li>
<a title="reerere" href="photos/fullsize/fe89e545605beb40b19b8a5b764d8ea87ebd2307.jpg">
<img alt="reerere>" src="photos/mini/fe89e545605beb40b19b8a5b764d8ea87ebd2307.jpg">
</a>
</li>
<dl id="photo">
<dt>222</dt>
<dd>
<img id="big_pict" alt=" 222" src="photos/fullsize/856b57e31f702963cc57039cf68cfa2a5fdc07e5.jpg">
</dd>
</dl>
<a name="ancrephoto"></a>
</div>

de plus j'ai remarquer que l'appel de l'ancre #ancre photo ne fonctionne pas sous chrome or que sur IE et firefox ca fonctionne sans souci...

edit : en fait je viens de me rendre compte que si la première photo n'a pas de titre le script ne fonctionne plus. si la premiere photo a un titre mais pas la deuxieme ca ne pose aucun souci....

[Kaamo]

La balise ul n'est pas fermée. Donc var liens va contenir ta balise ancre. liens aura alors quatre éléments dans ton cas, or, il n'y en a que trois de type souhaité.

Pour ta boucle. Ce que j'ai dit avant est archi faux (je devais avoir sacrément faim ). Les deux codes suivants sont équivalents.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
for (var i = 0; i < 3; ++i)
  console.log(i); // affichera : 0, 1, 2

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
for (var i = 0; i < 3; i++)
  console.log(i); // affichera : 0, 1, 2

C'est vrai que ++i permet d'ajouter 1 à i et ensuite de l'évaluer. i++ permet d'évaluer i et ensuite d'ajouter 1. Ce n'est pas vrai dans une boucle. Voilà ce qu'il se passe à chaque tour :
1 - test la condition de contrôle de boucle (ici i < length)
2 - si elle est fausse, on arrête
3 - si elle est vraie, on exécute le traitement de boucle
4 - on fait l'increment (ici i++ ou ++i)
Tu l'auras compris, l'incrément n'est fait qu'après avoir exécuté le traitement. Du coup, au premier tour i vaudra bien 0 et sera mis à 1 ensuite.
Donc ton script affectera bien un événement à ton premier lien. Fais plutôt :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
for (var i = 1; i < 3; i++)
  console.log(i); // affichera : 1, 2

[Klink]

un grand merci pour ces explication je vais pouvoir me débrouiller