Contenu div (texte) différent selon images

Bonjour,

J'aurais une petite demande, je sens que je ne suis pas très loin de la réponse mais je bloque.

Explication :

J'ai une galerie d'images qui fonctionne bien avec un bouton previous et un bouton next et j'aimerais ajouter une div "définitions" à cette galerie à côté où l'on aurait un texte complémentaire selon l'image de la galerie qu'on aura choisit.

Je pensais donc à utiliser la condition switch sur l'action du bouton previous et next, seulement je bloque.

Voici ce que j'ai débuté :

<div id="GalerieTotal">

<div id="Navigation">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="GalerieWrapper">
<ul>
<li><a class="sliderImage box" rel="gallery" href="images/image1" title="imageUno"><img alt="ImageUno" src="images/image1-small.jpg" /></a></li>
 <li><a class="sliderImage box" rel="gallery" href="images/image2" title="imageDos"><img alt="ImageDos" src="images/image2-small.jpg" /></a></li>
 <li><a class="sliderImage box" rel="gallery" href="images/image3" title="imageTres"><img alt="ImageTres" src="images/image3-small.jpg" /></a></li>                 		
</ul>
</div>
</div>

<div id="definitions">
mon texte 1
</div>


<script language="JavaScript">
			
$("#nextButton").click(function(){

var title = $('.box').attr('title');
				switch (title) {
				case 'imageUno' :
				// un truc avec le texte 1
				break;
				
				case 'imageDos' :
				// un truc avec le texte 2
				break;

                                case 'imageTres' :
				// un truc avec le texte 3
				break;

				default:
				alert('faux');
				}
							
});	

</script>

Sinon j'ai aussi ce petit bout de javascript qui fonctionne avec un onclick mais c'est pas ce que je veux :

function affiche_text(text){
document.getElementById("definitions").innerHTML = text;
}

Voilà, si jamais vous pouvez m'aider, ce serait vraiment super, car là je suis un peu perdu.

L'idée c'est donc que quand tu clique sur le bouton next, selon l'image (le lien) que tu as, tu met le texte correspondant dans le div définitions.

Merci d'avance pour l'aide.
Si vous avez des questions en plus n'hésitez pas.

Tu te compliques un peu la vie avec ton switch et ton test sur l'attribut "title". Ce serait plus simple d'avoir :

- une variable "index" de type entier
- une variable "t" de type tableau avec tes textes à l'intérieur

Tu initialises "index" à 0. Au clique sur les boutons "next" ou "previous", tu augmentes ou soustrais la valeur d'index de 1. Ensuite, tu affiches le texte contenu dans ton tableau en utilisant "index" comme clé de sélection.

var t = new Array();
t.push('blabla');
t.push('blabla 2');

function afficheText(key, tab) {

   document.getElementById("definitions").innerHTML = tab[key];

} 

// exemple d'appel
afficheText(0, t);

Egalement, tu peux aussi, plutôt que de passer par un tableau, utiliser l'attribut "alt" de tes images. Il faut alors aller chercher le bon élément dans la liste.

var def = $("#GalerieWrapper li").get(index).find('img').attr('alt');

affiche_text(def);

Modifié par SylvainG (08 Feb 2013 - 10:09)

Merci SylvainG,

Puis-je te demander détailler un peu le code javascript stp ?

J'ai essayé avec ton code, et ça ne fonctionne pas.
Je suppose qu'il faut ajouter des choses comme les évènements lors de la fonction next et previous, mais je suis complètement perdu là !

Il faut savoir que je débutes en construction de code javascript.

J'ai compris ça :

var index = 0 ;
var t = new Array();
t.push('blabla');
t.push('blabla 2');

$("#nextButton").click(function(){
index+1;

function afficheText(key, tab) {

   document.getElementById("definitions").innerHTML = tab key ;

} 

// exemple d'appel
afficheText(0, t);
							
});

Mais je suppose que c'est pas du tout ça !
Faut t'il un parseInt ... je sais pas.

La seconde possibilité avec les "alt" me conviendrais aussi (c'est celle que j'ai compris en premier) ... mais il me faudrait un code plus complet.


Donc merci de m'aider.

Tu n'es pas si loin. Moi je verrais plus ça :

var index = 0 ;
var t = new Array();
t.push('blabla');
t.push('blabla 2');

function afficheText(key, tab) {
   document.getElementById("definitions").innerHTML = tab[ key ] ;
} 

$("#nextButton").click(function(){

   if ( index + 1 < t.length ) { // attention aux bornes du tableau

      index = index + 1;
      afficheText(index, t);

   }
							
});

La version avec l'attribit "alt" est plus complexe. On la verra ensuite.
Modifié par SylvainG (08 Feb 2013 - 17:04)

Merci !
Juste pour bien assimiler le code :
Que veux dire exactement cette partie ci dessous ?
< t.length ) { // attention aux bornes du tableau
(inférieur à la longueur) >> c'est en rapport avec le t.push maximal je suppose ?!

J'aimerai en faire une boucle!
Soit quand on est arrivé à la dernière image et donc définitions, nous puissions retourné à la première image (ça, j'ai déjà ! ) mais donc que la définition puisse suivre et donc retourner à la première définition donc au premier t.push.


Avec la fonction prev, j'ai ça maintenant , et donc il me manque une boucle ou une condition pour dire que quand je suis à t.push('blabla 5'); je veux revenir à t.push('blabla 1'); en allant sur next et inversement si je suis à t.push('blabla 1'); si je fais prev, j'ai pas "undefinied" comme actuellement, mais j'ai t.push('blabla 5');

var index = 0 ;
var t = new Array();
t.push('blabla');
t.push('blabla 2');
t.push('blabla 3');
t.push('blabla 4');
t.push('blabla 5');


function afficheText(key, tab) {
   document.getElementById("definitions").innerHTML = tab[ key ] ;
} 

$("#nextButton").click(function(){

   if ( index + 1 < t.length ) { // attention aux bornes du tableau

      index = index + 1;
      afficheText(index, t);

   }
							
});

$("#prevButton").click(function(){

			   if ( index - 1 < t.length ) { // là j'ai laissé pareil car en mettant l'inverse, ça marchait pas pourtant j'aurais pensé c'était ça.

			      index = index - 1;
			      afficheText(index, t);

			   }
										
			});		

Et je suis preneur pour voire l'autre solution aussi, tant qu'à apprendre ! ^^
Merci encore.
Modifié par kenzo082 (08 Feb 2013 - 18:53)

L'instruction t.push() ajoute un élément au tableau.

var t = new Array();
t.push('blabla');
t.push('blabla 2');

Cela est identique à :

t[ 0 ] = 'blabla'; 
t[ 1 ] = 'blabla 2';

Le seul avantage est que tu n'as pas à te soucier du chiffre à placer entre les crochets.

L'attribut "length" est bien pratique puisque comme son nom l'indique il renseigne de la longueur du tableau. Ici, "t.length" vaut 2. Si tu refais un push(), il vaudrait 3.

Un tableau est une structure de données sectionné en case. A chaque fois que tu appelles la fonction push(), tu crées une nouvelle case. Ces cases sont accessibles au moyen de clé numérique. La première clé vaut 0, la deuxième 1, etc... Ainsi, si tu veux accéder à la cinquième case de ton tableau, tu dois utiliser la clé numérotée 4 (N-1).

Dans l'exemple, il y a 2 cases dans "t". Du coup les clés d'accès au contenu sont 0 et 1 ([0-t.lengh - 1] pour être plus générique). Si tu essayes d'accéder à une donnée de ton tableau par une données inexistantes (par exemple la clé 3) tu auras un joli bug. Voilà pourquoi il faut contrôler les valeurs de la variable "index" qui est la clé dynamique de ton tableau dans cette exercice.

Pour le bouton "next", la condition de la borne est : if ( index + 1 < t.length )
Pour le bouton "previous", on s'arrête à 0 puisqu'on a pas de clé -1 : if ( index - 1 >= 0 )

Tu n'as pas besoin de boucle (for ou while) pour que ton système passe de la dernière case à la première. Il faut juste savoir ou tu en es dans ton tableau.

if ( index + 1 < t.length ) {
   // reprise du code précédent
}
else { // on est à la fin il faut retourner au début
   index = 0;
   afficheText(index, t);
}

Pour la version avec "alt", il faut juste remplir ton tableau "t" avec les valeurs de l'attribut présent sur les images.

var t = new Array();

$('#GalerieWrapper img').each(function(key, elt) {
   
   var alt = $(elt).attr('alt');
   t.push(alt);   

});