Intégration d'une légende dans un slideshow jquery

Résolu/Fermé
cevek Messages postés 44 Date d'inscription mercredi 9 juillet 2014 Statut Membre Dernière intervention 8 décembre 2018 - 3 sept. 2014 à 21:38
cevek Messages postés 44 Date d'inscription mercredi 9 juillet 2014 Statut Membre Dernière intervention 8 décembre 2018 - 9 sept. 2014 à 19:26
Bonjour,

Je lutte sur un site statique que je réalise avec trois mois de formations... Alors je me permet de faire appel à votre aide :-)

Voici mon site (en pleine construction) http://cevek.fr/
Soyez indulgent c'est mon premier saut sans parachute... :-)

J'aimerais dans Portefolio mettre une légende qui défile en même temps que mes photos... Simple dis comme ça mais vous ne pouvez pas imaginer à quel point je galère...
Est ce que vous auriez une astuce, une idée ?
Voici ci dessous mon code (pour le premier slide par exemple)
J'espère que ça sera assez clair pour vous...

Merci d'avance pour vos retour !!
Bonne soirée ;-)


HTML :

<div id="masque" class="masquons">
<div id="bandeau">
<img src="images/portfolio/1.png" alt="vue1">
<img src="images/portfolio/2.png" alt="vue2">
<img src="images/portfolio/3.png" alt="vue3">
<img src="images/portfolio/4.png" alt="vue4">
<img src="images/portfolio/5.png" alt="vue5">
<img src="images/portfolio/6.png" alt="vue6">
<img src="images/portfolio/7.png" alt="vue7">
<img src="images/portfolio/8.png" alt="vue8">
<img src="images/portfolio/9.png" alt="vue9">
<img src="images/portfolio/10.png" alt="vue10">
<img src="images/portfolio/11.png" alt="vue11">
<img src="images/portfolio/12.png" alt="vue12">
<img src="images/portfolio/13.png" alt="vue13">
</div>

<div class="navigation" id="navigation1">
<a id="precedent" href="#" title="Précédent">
<img src="images/prev.png" alt="Précédent"></a><a id="suivant" href="#" title="Suivant"><img src="images/next (1).png" alt="Suivant">
</a>

</div>
</div>


$(function(){
var vue = 1;

$("#suivant").click(function(){
if(vue < 14){
$("#bandeau").animate({
left:"-=600px"
});
vue++;
}

if(vue==14){
$("#bandeau").animate({
left:"0px"
});
vue =1;
}
});

$("#precedent").click(function(){
if(vue > 1){
$("#bandeau").animate({
left:"+=600px"
});
vue--;
}
});


});


CSS :


#masque {
width:600px;
height:400px;
overflow:hidden;
position:relative;
margin:0 auto;
}

#bandeau {
width:7800px;
height:400px;
position:relative;
}

#bandeau img {
float:left;
}

.navigation {
width:600px;
height:50px;
background:#000;
background:rgba(0,0,0,0.7);
position:absolute;
z-index:1;
bottom:0;
left:0;
}

.navigation a {
display:block;
width:42px;
padding-bottom:5px;
padding-top:12px;
float:left;
}

.navigation p {
color:#f5ece7;
padding-top:10px;
font-family:'Advent Pro', 'sans-serif';
}



2 réponses

Utilisez les balises 'codes' quand vous postez un message. Ce sera beaucoup plus pratique pour ceux qui tenterons d'y répondre.

Si j'ai bien compris ce que vous voulez faire;

Il faut positionner en css une div dessous/sur/ouvousvoulez l'image.

Ensuite lorsque l'on clique sur les flèches le texte doit changer.
donc dans la fonction => $("#suivant").click(function(){ //...
il faut inclure du code qui changera le contenu de la div.
=> $("#legende").text("ma nouvelle légende"); // change le contenu de la div avec l'id "legende".

Je proposerais de stocker toutes les légendes dans un tableau javascript pour faciliter le changement il suffira de créer un tableau qui contient les légendes et d'inclure le code suivant.
=> $("#legende").text(legendes[vue-1]);
avec "légendes" un tableau javascript.
0
cevek Messages postés 44 Date d'inscription mercredi 9 juillet 2014 Statut Membre Dernière intervention 8 décembre 2018
9 sept. 2014 à 19:26
Merci beaucoup !!
Je vais essayer ! :-D
0