Intégration d'une légende dans un slideshow jquery [Résolu/Fermé]

Signaler
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018
-
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018
-
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.
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018

Merci beaucoup !!
Je vais essayer ! :-D