liste de défilement pour galerie photos

24 juillet 2010 à 15:21:05

bonjour cher amis zero,

j'ai réalisé une galerie photos pour mon site qui fonctionne très très bien. En effet au départ je n'avais que peu de photos. Mais le soucis aujourd'hui c'est que losque je rajoute des phtotos celle ci allonge mon bloc galeri dans la longeur car je n'ai pas mis de fonction pour qu'il y ai une "liste défilante" (je ne sais pas si c'est exactement le terme approprié).
pour que vous compreniez mieux je vous ai schématiser ma galerie:

Image utilisateur

Je souhaite donc rajouter un système de déroulement avec des petite flêche de par et d'autre de la liste des miniature comme ceci:

Image utilisateur

Or je ne sais pas du tout comment procéder, c'est pour cela que je viens vers vous. Afin de savoir si quelqu'un peut m'expliquer comment procéder ou m'indiquer un tuto.

Je vous laisse mes code au cas ou:

<!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" >
	<head>
		<title>RAP NG 59 site officiel !</title>
		
		<link rel="stylesheet" media="screen" type="text/css" title="mise en page photos" href="css_photos.css" />
		<script type="text/javascript" src="script.js"></script>
		
	</head>
	
	<body>
	
	<div id="galerie"> 
					<ul class="galerie_design"><p>.<img src="design/corps_photos.png" alt="photos" /></p></ul>
					
					<!--galerie-->
					<div id="ma_galerie">
						<ul id="galerie_mini">         
							<li><a href="images/1.jpg" title="Affiche annonçant la sortie de Disque D'Ordures"><img src="images/minis/photo1.png" alt="Affiche annonçant la sortie de Disque D'Ordures" /></a></li>          
							<li><a href="images/2.jpg" title="Avenue De Gaulle à Grande-Synthe"><img src="images/minis/photo2.png" alt="Avenue De Gaulle à Grande-Synthe" /></a></li>         
							<li><a href="images/3.jpg" title="Blocos des Mers du Nord"><img src="images/minis/photo3.png" alt="Blocos des Mers du Nord" /></a></li>         
							<li><a href="images/4.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 1"><img src="images/minis/photo4.png" alt="Desctruction du Quartier Europe à Grande-Synthe 1" /></a></li>          
							<li><a href="images/5.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 2"><img src="images/minis/photo5.png" alt="Desctruction du Quartier Europe à Grande-Synthe 2" /></a></li>         
							<li><a href="images/6.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 3"><img src="images/minis/photo6.png" alt="Desctruction du Quartier Europe à Grande-Synthe 3" /></a></li>         
							<li><a href="images/7.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 4"><img src="images/minis/photo7.png" alt="Desctruction du Quartier Europe à Grande-Synthe 4" /></a></li>          
							<li><a href="images/8.jpg" title="Digue du Breck"><img src="images/minis/photo8.png" alt="Digue du Breck" /></a></li>         
							<li><a href="images/9.jpg" title="Lieu Musical Expérimentale de Grande-Synthe"><img src="images/minis/photo9.png" alt="Lieu Musical Expérimentale de Grande-Synthe" /></a></li>    
							<li><a href="images/10.jpg" title="Moyen D'Expression"><img src="images/minis/photo10.png" alt="Moyen D'Expression" /></a></li>          
							<li><a href="images/11.jpg" title="Quartier Albeck à Grande-Synthe"><img src="images/minis/photo11.png" alt="Quartier Albeck à Grande-Synthe" /></a></li>         
							<li><a href="images/12.jpg" title="Quartier Europe de Grande-Synthe 1"><img src="images/minis/photo12.png" alt="Quartier Europe de Grande-Synthe 1" /></a></li>    
							<li><a href="images/13.jpg" title="Quartier Europe de Grande-Synthe 2"><img src="images/minis/photo13.png" alt="Quartier Europe de Grande-Synthe 2" /></a></li>         
							<li><a href="images/14.jpg" title="Quartier Europe de Grande-Synthe 3"><img src="images/minis/photo14.png" alt="Quartier Europe de Grande-Synthe 3" /></a></li>    
						</ul>           
						
						<dl id="photo">        
							<dt>Affiche annonçant la sortie de Disque D'Ordures</dt>         
								<dd><img id="big_pict" src="images/1.jpg" alt="Photo 1 en taille normale" /></dd>     
						</dl> 
					</div>	
					<!--fin de galerie-->
					
					</div>
	</body>
</html>

/*galerie*/
div#ma_galerie
{     
width: 700px ;       
border: 1px solid #dcb ;     
padding: 15px ;     
margin: 15px 30px ;     
text-align: center ;     
font: 0.9em Georgia, serif ; 
}  

ul#galerie_mini 
{     
margin: 0 ;     
padding: 0 ;     
list-style-type: none ; 
}  

ul#galerie_mini li 
{     
float: left ; 
}  

ul#galerie_mini li a img 
{     
margin: 2px 1px ;     
border: 1px solid #dcb ; 
}  

dl#photo 
{     
clear: both ;     
margin: 0 auto ; 
}  

dl#photo dt 
{     
font: italic 2.5em/1.5em Georgia, serif ;     
color: #dcb ; 
}  
dl#photo dd 
{    
margin: 0 ; 
}  
dl#photo img 
{     
border: 1px solid #dcb ; 
}         

	/* fin galerie*/

function displayPics() 
{     
var photos = document.getElementById('galerie_mini') ;     
// On récupère l'élément ayant pour id galerie_mini     
var liens = photos.getElementsByTagName('a') ;     
// On récupère dans une variable tous les liens contenu dans galerie_mini     
var big_photo = document.getElementById('big_pict') ;     
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale      
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;     
// Et enfin le titre de la photo de taille normale      
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini     
for (var i = 0 ; i < liens.length ; ++i) {         
// Au clique sur ces liens          
liens[i].onclick = function() {             
big_photo.src = this.href; 
// On change l'attribut src de l'image en le remplaçant par la valeur du lien             
big_photo.alt = this.title; // On change son titre             
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo             
return false; // Et pour finir on inhibe l'action réelle du lien         
};     
} 
} 
window.onload = displayPics; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page

merci d'avance pour l'aide que vous pourrez m'apporter

LCaba

24 juillet 2010 à 15:52:07

Salut,
Tu fait un bloc fenêtre d'une taille fixe, avec un overflow:hidden Un autre bloc à l'intérieur de celui-ci, en position:relative, qui contient toutes les miniatures.
Enfin, tu met une flèche de chaque côté et une fonction associée au clic sur ses flèches, qui modifie la propriété left du bloc, afin qu'il se déplace derrière le bloc fenêtre.

Cabinet vétérinaire à Angers

misscc59760

24 juillet 2010 à 17:58:26

bonjour merci pour ta réponse je ne suis pas experte en javascript non plus doncpour le bloc fenêtre avec overflow je pense avoir saisis donc j'ai procéder ainsi: comme j'avais déjà les blocs fait le bloc fenêtre correspondant si j'ai bien compris au div id="galerie" dans mon html à qui je met donc ce overflow dans le css avec les valeur fixe; et l'autre bloc qui contient toutes les miniatures qui était le ul id="galerie_mini" a qui j'ai mis la position absolue ensuite j'ai insérer les image de chaque coté de ce div de miniatures et le tout doinne cela:

<!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" >
	<head>
		<title>RAP NG 59 site officiel !</title>
		
		<link rel="stylesheet" media="screen" type="text/css" title="mise en page photos" href="css_photos.css" />
		<script type="text/javascript" src="script.js"></script>
		
	</head>
	
	<body>
	
	<div id="galerie"> 
					<ul class="galerie_design"><p>.<img src="design/corps_photos.png" alt="photos" /></p></ul>
					
					<!--galerie-->
					<div id="ma_galerie">
					<img src="images/imarrl.gif" width="22" height="47" alt="" />
						<ul id="galerie_mini">         
							<li><a href="images/1.jpg" title="Affiche annonçant la sortie de Disque D'Ordures"><img src="images/minis/photo1.png" alt="Affiche annonçant la sortie de Disque D'Ordures" /></a></li>          
							<li><a href="images/2.jpg" title="Avenue De Gaulle à Grande-Synthe"><img src="images/minis/photo2.png" alt="Avenue De Gaulle à Grande-Synthe" /></a></li>         
							<li><a href="images/3.jpg" title="Blocos des Mers du Nord"><img src="images/minis/photo3.png" alt="Blocos des Mers du Nord" /></a></li>         
							<li><a href="images/4.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 1"><img src="images/minis/photo4.png" alt="Desctruction du Quartier Europe à Grande-Synthe 1" /></a></li>          
							<li><a href="images/5.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 2"><img src="images/minis/photo5.png" alt="Desctruction du Quartier Europe à Grande-Synthe 2" /></a></li>         
							<li><a href="images/6.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 3"><img src="images/minis/photo6.png" alt="Desctruction du Quartier Europe à Grande-Synthe 3" /></a></li>         
							<li><a href="images/7.jpg" title="Desctruction du Quartier Europe à Grande-Synthe 4"><img src="images/minis/photo7.png" alt="Desctruction du Quartier Europe à Grande-Synthe 4" /></a></li>          
							<li><a href="images/8.jpg" title="Digue du Breck"><img src="images/minis/photo8.png" alt="Digue du Breck" /></a></li>         
							<li><a href="images/9.jpg" title="Lieu Musical Expérimentale de Grande-Synthe"><img src="images/minis/photo9.png" alt="Lieu Musical Expérimentale de Grande-Synthe" /></a></li>    
							<li><a href="images/10.jpg" title="Moyen D'Expression"><img src="images/minis/photo10.png" alt="Moyen D'Expression" /></a></li>          
							<li><a href="images/11.jpg" title="Quartier Albeck à Grande-Synthe"><img src="images/minis/photo11.png" alt="Quartier Albeck à Grande-Synthe" /></a></li>         
							<li><a href="images/12.jpg" title="Quartier Europe de Grande-Synthe 1"><img src="images/minis/photo12.png" alt="Quartier Europe de Grande-Synthe 1" /></a></li>    
							<li><a href="images/13.jpg" title="Quartier Europe de Grande-Synthe 2"><img src="images/minis/photo13.png" alt="Quartier Europe de Grande-Synthe 2" /></a></li>         
							<li><a href="images/14.jpg" title="Quartier Europe de Grande-Synthe 3"><img src="images/minis/photo14.png" alt="Quartier Europe de Grande-Synthe 3" /></a></li>    
						</ul>           
						<img src="images/imarrr.gif" width="22" height="47" alt="" />
						<dl id="photo">        
							<dt>Affiche annonçant la sortie de Disque D'Ordures</dt>         
								<dd><img id="big_pict" src="images/1.jpg" alt="Photo 1 en taille normale" /></dd>     
						</dl> 
					</div>	
					<!--fin de galerie-->
					
					</div>
	</body>
</html>

div#ma_galerie
{     
width: 700px ;       
border: 1px solid #dcb ;     
padding: 15px ;     
margin: 15px 30px ;     
text-align: center ;     
font: 0.9em Georgia, serif ; 
overflow:hidden;
}  

#galerie_mini 
{     
position: relative; 
}

Es-ce correcte?

Par contre pour:

Citation

Enfin, tu met une flèche de chaque côté et une fonction associée au clic sur ses flèches, qui modifie la propriété left du bloc, afin qu'il se déplace derrière le bloc fenêtre.

je ne sais pas du tout comment faire.

Désolé je débute dans le javascript.
merci en tout les cas

davinci

24 juillet 2010 à 18:37:12

Salut,

Pour ce que tu veux obtenir comme résultat, je verrais bien un tel script dans ta page web !

Bonne prog...

French language was not found on this server.

misscc59760

24 juillet 2010 à 18:46:37

merci pour ce lien c'est sympas mais il n'est pas adaptable à mon design il y a déjà un fond à la galerie. :euh:

davinci

24 juillet 2010 à 19:13:37

Ah ben si tu ne sais pas adapter un simple fichier CSS et HTML pour que le script s'insère parfaitement à ta page Web, je ne peux rien faire de plus pour toi, désolé !

Bonne continuation à toi...

French language was not found on this server.

misscc59760

24 juillet 2010 à 20:30:17

Désolé,
bien sure que je sais modifié mais j'avais mal compris les explications du lien avec le premier truc à télécharger (jbgallery-2.0.beta.zip) qui 'est pas utile en fait.

Cela fonctionne bien.

Néanmoins j'aurais quand même souhaitais modifier la galerie que j'avais déjà faite.

misscc59760

25 juillet 2010 à 22:13:40

UP: personne ne peut m'expliquer s'il vous plait?