18068 sujets

Questions générales et questions de débutants

"Galerie photo avec javascript" d'Olivier

Bonjour,

J'ai juste une petite question. Ya t-il un moyen d'intégrer une ligne de code pour pouvoir mettre une légende différente sous chaque photo ?
J'ai bien essayé avec title="" , mais je n'arrive pas à placer ma légende en dessous de la photo. Et l'autre problème qui se pose, c'est de pouvoir intégrer cette légende dans le javascript, car si ma légende n'est pas intégrée, il n'est pas possible d'en faire une différente, car elle ne fait que se répéter, en d'autres termes, elle reste statique.
J'espère avoir été assez clair dans mes propos...
Merci d'avance pour vos réponses.
Bonne journée !
Je sais que mes propos peuvent être confus, je ne fais que bidouiller avec le codage...je n'y connais strictement rien....
Je vais essayer de reformuler ma question. J'aimerai pouvoir écrire un commentaire DIFFERENT sous chaque photo dans le script. Est-ce possible ?
j'ai le même problème... je voudrais par contre mettre une description de plusieurs lignes en dessous de chaque photo... j'ignore comment procéder....
Bonjour à vous deux et bienvenues sur Alsacréations Smiley smile ,

Peut-être ce script ne correspond tout bonnement pas à vos besoins Smiley cligne .
Je l'utilise personnellement dans des projets où il satisfait aux besoins exprimés, dans un contexte connu.

En exprimant plus précisement les besoins de galerie que vous avez il serait plus simple pour les membres du forum de vous orienter soit vers une adaptation de ce script, soit vers une solution différente Smiley smile .
Modifié par Igor (24 Aug 2006 - 21:48)
Pomout a écrit :
J'aimerai pouvoir écrire un commentaire DIFFERENT sous chaque photo dans le script. Est-ce possible ?


Peut être mais j'en sais rien. En fait j'y travaille

Sinon cette affaire d'avoir le texte récupérer dans le title sous l'image est tout simplement un choix de codage html. On peut très bien avoir tout bêtement :

<div>
<p>
<img />
</p>
<p>
Texte commentaire
</p>
</div>

Modifié par clb56 (24 Aug 2006 - 23:10)
Merci pour vos réponses ! Smiley smile
Mais je compte bien garder ce script, très facile d'utilisation. Après réflexion, j'ai simplement transférer la ligne de code qui permet de mettre un titre afin que ce dernier s'affiche non plus au dessus mais en dessous de la photo.
Merci encore en tout cas. Smiley cligne
Modifié par Pomout (26 Aug 2006 - 15:38)
a écrit :
Pour faire court il s'agit par rapport au tuto d'Olivier de
1. Associer à chaque vignette le commentaire placé en dur dans un <p>
2. Récupérer en javascript ce commentaire et en faire le title du lien par


C'est bien ce que j'aimerai...car en déplacant seulement la balise title, je ne peux personnaliser le contenu....
Bref,j'ai un peu regardé le développement de ton script, mais je n'arrive pas à comprendre comment tu t'y es pris... je ne vois pas ce que je devrai modifier dans le fichier js, et ou placer les balises <p></p> ...

Sinon, voila ma page html, j'aimerai pouvoir personnaliser la balise title"" comme je l'ai indiqué ci-dessous...je sais, j'en reviens à ma question du début, mais c'est peut être deja plus compréhensible avec ce quote de ma page >_<

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
        <title>Lê Chau Cuong</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="fr" />
           <meta http-equiv="Content-Script-Type" content="text/javascript" />
           <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="DC.Language" scheme="RFC3066" content="fr" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
	<script type="text/javascript" src="script.js"></script>
<meta name="generator" content="Namo WebEditor v5.0(Trial)">

   </head>
<body>
<div id="page">

	<div id="partie_gauche">
	<img src="images/interface/header.jpg" width="200" height="101" border="0">
	
		
		
		<div id="menu">
				<ul>
				
			<li><a href="about.htm">About</a></li>
			<li><a href="cv.htm">C.V</a></li>
					<li><a href="projets.htm">Projets</a></li>
					<li><a href="commandes.htm">Commandes</a></li>
					
					<li><a href="contact.htm">Contact</a></li>
					<li><a href="liens.htm">Liens</a></li>
				
					
					
				</ul>
		</div>
				
	</div>		
	
	<div id="partie_droite">
		
		<div id="barre_haut">
	
<ul id="galerie_mini">
		<li> <a href="images/reportage/refugee/G001.jpg" title="J'AIMERAI POUVOIR PERSONNALISER CETTE PARTIE"><img src="images/reportage/refugee/minis/M001.jpg" alt="Burman refugee camp" /></a></li>
		<li><a href="images/reportage/refugee/G003.jpg"><img src="images/reportage/refugee/minis/M003.jpg" alt="Burman refugee camp" /></a></li>
		<li><a href="images/reportage/refugee/G004.jpg"><img src="images/reportage/refugee/minis/M004.jpg" alt="Burman refugee camp" /></a></li>

		<li><a href="images/reportage/refugee/G005.jpg"><img src="images/reportage/refugee/minis/M005.jpg" alt="Burman refugee camp" /></a></li>
		<li><a href="images/reportage/refugee/G006.jpg"><img src="images/reportage/refugee/minis/M006.jpg" alt="Burman refugee camp" /></a></li>
		<li><a href="images/reportage/refugee/G007.jpg"><img src="images/reportage/refugee/minis/M007.jpg" alt="Burman refugee camp" /></a></li>

		<li><a href="images/reportage/refugee/G008.jpg"><img src="images/reportage/refugee/minis/M008.jpg" alt="Burman refugee camp" /></a></li>
		<li><a href="images/reportage/refugee/G009.jpg"><img src="images/reportage/refugee/minis/M009.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G010.jpg"><img src="images/reportage/refugee/minis/M010.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G011.jpg"><img src="images/reportage/refugee/minis/M011.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G012.jpg"><img src="images/reportage/refugee/minis/M012.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G013.jpg"><img src="images/reportage/refugee/minis/M013.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G014.jpg"><img src="images/reportage/refugee/minis/M014.jpg" alt="Burman refugee camp" /></a></li>
		        <li><a href="images/reportage/refugee/G015.jpg"><img src="images/reportage/refugee/minis/M015.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G016.jpg"><img src="images/reportage/refugee/minis/M016.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G017.jpg"><img src="images/reportage/refugee/minis/M017.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G018.jpg"><img src="images/reportage/refugee/minis/M018.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G019.jpg"><img src="images/reportage/refugee/minis/M019.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G020.jpg"><img src="images/reportage/refugee/minis/M020.jpg" alt="Burman refugee camp" /></a></li>
			<li><a href="images/reportage/refugee/G021.jpg"><img src="images/reportage/refugee/minis/M021.jpg" alt="Burman refugee camp" /></a></li>
			
	</ul>

	<dl id="photo">
	
				<dd><img id="big_pict" src="images/reportage/refugee/G000.jpg" alt="Photo 1 en taille normale" /></dd>
		<dt>Titre de la photo</dt>
	</dl>
		<div id="bloc2">
		<p><font color="#5E5F25">© Lê Chau Cuong / BaSoH</font></p>
		<p><b><font color="#D8E404"><a href="procession1.htm">« RETOUR au synopsis</a></font></b></p>	
		</div>
            <dl>
<dd>	
            </dl>
		</div>
		
	
	</div>

	<hr style="visibility:hidden;clear:both;" />
</body>
</html>

Modifié par Pomout (26 Aug 2006 - 19:29)
J'ai réussi à mettre le commentaire sous la photo grace à la balise <label> solution utilisée dans un des posts du forum que j'ai égaré. Seulement je voudrais plusieurs lignes (non pas une ligne de texte qui se wrap par défaut mais bien plusieurs lignes différentes une en dessous de l'autre)
Voici ce que j'ai dans le code html

<body>
		<p><div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/0001.png" title="Montre Fushia"><span class=invisible><img src="images/mini/m_0001.png" alt="Montre fushia" /></a><p>N°E651651<br>Matériau:plastique<br>Prix:300$</p>
					</li>

		<li><a href="images/0002.png" title="Fleur bleue"><span class=invisible><img src="images/mini/m_0002.png" alt="Fleur bleue" /></a><p>N°E651651<br>Matériau:résine de polyesther<br>Prix:150$</p>
					</li>
		<li><a href="images/0003.png" title="Boucles d'oreilles Fushia"><span class=invisible><img src="images/mini/m_0003.png" alt="Boucles d'oreilles Fushia" /></a><p>N°E651651<br />
						Matériau:Or et pierre<br />
						Prix:45$</p>
					</li>
		<li><a href="images/0004.png" title="Bracelet tricolore"><span class=invisible><img src="images/mini/m_0004.png" alt="Bracelet tricolore" /></a><p>N°E651651<br />
						Matériau:or cuivre argent<br />
						Prix:300$
					</p></li>
	</ul>

	
	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
		
	</dl>
<dl id="description"><p>Description</p></dl>
</div>

</p>
	</body>



puis en script java:

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
        var comment = photos.getElementsByTagName('p') ;
        var liens = photos.getElementsByTagName('a') ;
	var big_photo = document.getElementById('big_pict');
        var label_photo = document.getElementById('description').getElementsByTagName('p')[0] ;
        var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	
	for (var i = 0 ; i < liens.length ; ++i) {
		
		liens[/ i].onclick = function() {
			big_photo.src = this.href; 
			big_photo.alt = this.title; 
			titre_photo.firstChild.nodeValue = this.title;
                        label_photo.firstChild.nodeValue = this.nextSibling.firstChild.nodeValue;  
			return false; 
		};
	}
}
window.onload = displayPics;


Je comprends rien au javascript... la seule chose qui s'affiche lors du clic sur la miniature est le titre, la photo grand format et la premiere ligne c'est à dire le N°... mais il manque les deux autres...

Merci de votre temps

PS non le [/ i n'est pas une erreur de ma part...
Sujet clos
Aller à