galerie photo javascript

Question

Bonjour, J'ai réaliser une galerie photo en javascript à l'aide du tutoriel sur alsacréation. J'aimerais rajouter des flêches à gauche et à droite pour que les photos miniatures défilent et non qu'elles se mettent en dessous lorsqu'il n'y a plus de place sur la ligne. J'ai beau chercher sur différents forum mais je n'y arrive pas! Pouvez-vous m'aider? Voici mon code: Code HTML : :

[images/photo1.png ]

[images/photo2.png ]

[images/photo3.png ]

[images/photo4.png ]

[images/photo5.png ]

[images/photo6.png ]

* Titre de la photo 1 : Code javascript : function displayPics() { var photos = document.getElementById('galerie_mini') ; var liens = photos.getElementsByTagName('a') ; var big_photo = document.getElementById('big_pict') ; 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; return false; }; } } window.onload = displayPics; MERCI!

seblechinois · Answer

Bonjour,

Dans le CSS au niveau de la div galerie, essayez avec :
   overflow: auto;

titeyes · Answer

Avec overflow: auto; ça me le met mais juste pour la dernière image miniature, ça ne prend pas les autres!

Voici mon code CSS:

div#galerie 
{     
width: 500px ;     
background: #d4d2d2 ;     
border: 7px solid #ffffff ;     
padding: 15px ;     
margin: 10px 140px ;     
text-align: center ;     
font: 0.4em Century gothic, arial ; 
}  

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 4px ;     
border: 3px solid #000000 ; 
}  

dl#photo 
{     
clear: both ;     
margin: 0 auto ; 
}  

dl#photo dt 
{     
font: 2.5em/1.5em century gothic, arial ;     
color: #000000 ;
}  

dl#photo dd 
{     
margin: 0 ;
}  

dl#photo img 
{     
border: 1px solid #000000 ;
}

seblechinois · Answer

Re,

essayez en bloquant la hauteur de la div galerie :
height:285px;
   	overflow: auto;

Sinon au lieu de <li>, on peut mettre dans un tableau?

titeyes · Answer

Super !!!!

Ca fonctionne! 
En mettant dans le css ul#galerie_mini:
height:60px; 
overflow: auto;

Merci Beaucoup! :)

Galerie photo javascript

4 réponses

Votre réponse

Discussions similaires