1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Galerie photo javascript

titeyes Messages postés 3 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 22 février 2010 - 21 févr. 2010 à 22:02
titeyes Messages postés 3 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 22 février 2010 - 22 févr. 2010 à 18:23
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 :

<head> : <script type= "text/javascript" src="script.js"></script>




<li>[images/photo1.png ]</li>
<li>[images/photo2.png ]</li>
<li>[images/photo3.png ]</li>
<li>[images/photo4.png ]</li>
<li>[images/photo5.png ]</li>
<li>[images/photo6.png ]</li>



* 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!

4 réponses

Réponse 1 / 4
seblechinois Messages postés 72 Date d'inscription mercredi 27 décembre 2000 Statut Membre Dernière intervention 16 mai 2016 1
22 févr. 2010 à 16:50
Bonjour,

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

0
Réponse 2 / 4
titeyes Messages postés 3 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 22 février 2010
22 févr. 2010 à 17:13
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 ;
}
0
Réponse 3 / 4
seblechinois Messages postés 72 Date d'inscription mercredi 27 décembre 2000 Statut Membre Dernière intervention 16 mai 2016 1
22 févr. 2010 à 18:04
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?
0
Réponse 4 / 4
titeyes Messages postés 3 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 22 février 2010
22 févr. 2010 à 18:23
Super !!!!

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

Merci Beaucoup! :)
0
Rejoignez-nous