vue Ajout d'une description a une image defilante manuellement
Kommunauty
Connexion
Inscription

Forum Programmation Ajout d'une description a une image defilante manuellement

Ajout d'une description a une image defilante manuellement


blue24 Messages : 13

Bonjour a toutes et a tous,

Bon tout est dans la question, je cherche a ajouter une description a une image qui defile a l'aide de fleches. Le code provient d'un tuto video que j'ai adapte a mon besoin seulement ce tuto ne presentait pas de description et la je bloque etant debutant de chez debutant, comme vous pouvez l'imaginer du fait que j'ai eu recours a des tutos. J'ai beau eu chercher pendant une semaine (oui !!!) je n'ai rien trouve. J'espere avoir ete le plus clair possible dans l'explication de mon probleme. Voici les extraits de codes :

/* le fichier js */


$(document).ready(function(){
	slider.init();
});

	slider = {
		init: function(){
			slider.elem  = $("#contenu_photo");
			slider.nbSlide = slider.elem.find("img").length;
			slider.current = 0;
			
			$("#fleche_droite").click(function(){
				slider.next();							   
			});
			
			$("#fleche_gauche").click(function(){
				slider.prev();							   
			});
		},
		next: function(){
			slider.current++;
			if(slider.current > slider.nbSlide-1)
			{
				slider.current = 0;
				slider.elem.stop().animate({marginLeft:"0px"});
			}
			else
			{
				slider.elem.stop().animate({marginLeft: -slider.current*800+"px"});
			}
		},
		prev: function(){
			slider.current--;
			if(slider.current < 0)
			{
				slider.current = slider.nbSlide-1;
			}
			slider.elem.stop().animate({marginLeft: -slider.current*800+"px"});
		}
	};

/* extrait de la page php contenant les photos */ 


<div id="fleche_gauche"></div>
<div id="fleche_droite"></div>
               <div id="zone_photo">
                   		<div id="contenu_photo" >                       	
                                   <img src="img/galerie/img1.jpg" title="blabla" alt="blabla"/>
                                /* quand je met la balise <p> ici le contenu se colle a droite de la photo et non en dessous etant en float left */
                                   <img src="img/galerie/img2.jpg" title="blabla "alt"blabla"/>
                   		   <img src="img/galerie/img3.jpg" title="blabla "alt"blabla"/>
		</div> 
                        
</div>

/*le css*/


#fleche_droite 
{
	background: url("img/fleches.png") no-repeat right;
	float: right;
	height: 60px;
	width: 60px;
	margin-top: 220px;
}

#fleche_gauche 
{
	background: url("img/fleches.png") no-repeat left;
	float: left;
	height: 60px;
	width: 60px;
	margin-top: 220px;
}

#zone_photo
{
	height: 500px;
	margin: auto;
	width: 800px;
	overflow: hidden;
	padding-bottom: 45px;
	background-color: #CC99FF;
}

#contenu_photo
{
	float: left;
	height: 500px;
	width: 1000000px;
	margin: auto;	
}

#contenu_photo>* 
{
	float: left;
}

Merci d'avance pour votre aide ou pour toutes suggestions ou conseils.
mercredi 17 juillet 2013

Ryu Messages : 1973

En gros tu aimerais mettre une description qui se placerait en-dessous de chaque image ? Contenue dans une balise

 ?

Je suis en train de tester ton code et il ne fonctionne pas, y'aurait une librairie JS en plus que tu utilises ? Si oui, dis-moi laquelle.

Sinon tu peux déjà régler quelques fautes comme:


<img src="img/galerie/img2.jpg" title="blabla "alt"blabla"/>
                              <img src="img/galerie/img3.jpg" title="blabla "alt="blabla"/>

Et non

<img src="img/galerie/img2.jpg" title="blabla "alt"blabla"/>
                              <img src="img/galerie/img3.jpg" title="blabla "alt"blabla"/>

Si t'as une archive à me passer avec tout le shmilblik, c'est pas de refus, j'y verrai bien plus clair.

jeudi 18 juillet 2013

blue24 Messages : 13

Ah oui j'ai oublie de dire que j'utilise le jquery. Pour les fautes, effectivement c'est un oubli de ma part.

Qu'entends-tu par une archive ? le dossier ?
jeudi 18 juillet 2013

Ryu Messages : 1973

Oui, ton truc au complet, une archive = 1 .zip, que tu upload quelque part pour que j'puisse le récupérer et tester moi-même.
jeudi 18 juillet 2013 (Dernière édition jeudi 18 juillet 2013)

blue24 Messages : 13

question bete : comment joindre un fichier ici ?
jeudi 18 juillet 2013

Ryu Messages : 1973

Tu ne peux pas.

une archive = 1 .zip, que tu upload quelque part pour que j'puisse le récupérer et tester moi-même.
jeudi 18 juillet 2013 (Dernière édition jeudi 18 juillet 2013)

blue24 Messages : 13

Tu vas me prendre pour une tache !!! J'ai zippe mon dossier mais je ne comprend ce que tu veux dire par "upload quelque part". Comme je te disai je debute...et ca se voit.
jeudi 18 juillet 2013

Ryu Messages : 1973

Ben, heu, rien à voir avec la programmation... Tu connais Mega ? Uploaded.to ? easy-uplaod ? Bref, un hébergeur de fichier quoi.

jeudi 18 juillet 2013

blue24 Messages : 13

Ah ok ! j'avais jamais utilise c'est pour ca. Je viens d'apprendre un truc en meme temps

voici le lien :

http://easy-upload.info/do.php?id=1410

J'espere que c'est ca.

Merci Ryu pout ton aide
jeudi 18 juillet 2013

Lucas Messages : 830

Salut ! Bon, pour l'instant toutes les images sont regroupées dans une grande div, alignées côte à côte. Bon bon, de mon portable je peux pas mater ton code css et les images, mais je suppose que elles font toutes la même largeur, bon, au pire c'est pas très important.

Mais en gros, dans ton html, tu englobes chaque image par une div, qui contiendra aussi la description

<div class="slide">
  <img src="blabla.jpg"/>
  <p>la description qui pête<p>
</div>

Et là baboum, la magie opère, le float:left on le met sur la div, et l'image et la description sont tranquilles, normalement ça marche, bon. Mais c'est pas sûr…
jeudi 18 juillet 2013

Page suivante »
Pages : 01

Forum Programmation Ajout d'une description a une image defilante manuellement

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS