bonjour,
voilà je désirais faire une galerie d'image et pour cela j'ai donc suivis le tuto proposer ici:
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
le résultat est super tout fonctione par contre je souhaiterais faire une liste de défilement pour les miniature avec une flêche gauche et une droite. J'ai donc procéder ainsi:
HTML:
J'ai donc rajouter les flêche dans des spans et voici le JS:
résultat les flêche ne fonctionne pas et les miniature ne sont pas dans une liste défilente horizontale.
J eprécise que je ne suis que débutante en javascript donc je suis désolé si mon erreur est énormissime.
Merci par avance pour votre aide.[/i]
Modifié par misscc59760 (26 Jul 2010 - 22:36)
voilà je désirais faire une galerie d'image et pour cela j'ai donc suivis le tuto proposer ici:
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
le résultat est super tout fonctione par contre je souhaiterais faire une liste de défilement pour les miniature avec une flêche gauche et une droite. J'ai donc procéder ainsi:
HTML:
<!--galerie-->
<div id="ma_galerie">
<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>
<span id="gauche" class="fleche"><img src="images/imarrl.gif" width="22" height="47" alt="" /></span>
<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>
<span id="droite" class="fleche"><img src="images/imarrr.gif" width="22" height="47" alt="" /></span>
</div>
<!--fin de galerie-->J'ai donc rajouter les flêche dans des spans et voici le JS:
function displayPics()
{
var ma_galerie = document.getElementById('ma_galerie'),
// On récupère l'élément ayant pour id ma_galerie
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var flecheGauche = document.getElementById('gauche'),
// On récupère la flèche de direction gauche
var flecheDroite = document.getElementById('droite'),
//On récupère la flèche de direction droite
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
};
}
flecheDroite.onmousedown = function(){
left-= 200;
conteneur.style.left = String(left)+ 'px';
}
flecheGauche.onmousedown = function(){
left+= 200;
conteneur.style.left = String(left)+ 'px';
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page résultat les flêche ne fonctionne pas et les miniature ne sont pas dans une liste défilente horizontale.
J eprécise que je ne suis que débutante en javascript donc je suis désolé si mon erreur est énormissime.
Merci par avance pour votre aide.[/i]
Modifié par misscc59760 (26 Jul 2010 - 22:36)
