Script js qui fonctionne sur toutes les occurrences d'une classe
Bonsoir, je vous expose mon problème : J'ai un script js pour ma galerie d'image qui fonctionne parfaitement sur la première occurrence de la galerie, sauf que c'est pas suffisent puisque j'ai plusieurs galeries :/ Voici mon code qui j'ai essayé de modifier pour le faire fonctionner sur toutes les occurrences en vain :? :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
| $(document).ready(function() {
var galeries = document.getElementsByClassName('galerie_mini') ;
for (var g = 0 ; g < galeries.length ; g++)
{
s = new slider("galeries[g]");
}
});
var slider = function(id){
var self = this;
this.div = $(id);
this.slider = this.div.find(".slider");
this.largeurCache = 600;
this.largeur = 0;
this.nbImg = 0;
this.div.find('a').each(function(){
self.largeur += 120;
self.nbImg ++;
});
this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.saut = this.largeurCache/2;
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
this.courant = 0;
this.suiv.click(function(){
if(self.courant <= self.nbEtapes)
{
self.courant++;
self.slider.animate({
left:-self.courant* self.saut
},1000);
}
});
this.prec.click(function(){
if(self.courant>0)
{
self.courant--;
self.slider.animate({
left:-self.courant* self.saut
},1000);
}
});
}
/////////////////////*****************/////////////////
function displayPics()
{
var galeries = document.getElementsByClassName('galerie') ;
var photos = new Array();
var liens = new Array();
var big_photo = new Array();
for (var g = 0 ; g < galeries.length ; g++)
{
photos[g] = galeries[g].getElementsByClassName('galerie_mini')[0] ;
liens[g] = photos[g].getElementsByTagName('a') ;
big_photo[g] = galeries[g].getElementsByClassName('big_pict')[0] ;
for (var i = 0 ; i < liens.length ; i++)
{
liens[g][i].onclick = function()
{
big_photo[g].src = this.href;
big_photo[g].alt = this.title;
return false; // Et pour finir on inhibe l'action réelle du lien
};
};
};
}
//appel à la fonction au chargement de la page
window.onload = displayPics; |
et voici mon code HTML :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/fenetre_modale_membre.css" />
<link rel="stylesheet" href="css/galerie.css" />
</head>
<body>
<?php
include '../Model/connexion.php';
include '../Controller/instance.media.php';
include '../Controller/instance.galerie.php';
$tab = $media->getMedia();
while($data = mysql_fetch_assoc($tab))
{
$tab_medias = $galerie->getGalerie($data['id']);
?>
<div id="<?php echo $data['id'];?>" class="popup_block">
<div class="galerie">
<div class="photo">
<img class="big_pict" src="upload/<?php echo $data['image'];?>" width="600" height="350"/>
</div>
<div class="galerie_mini">
<div class="slider">
<?php
while($line = mysql_fetch_assoc($tab_medias))
{
?>
<a id="img" href="upload/galerie/<?php echo $line['nom'];?>">
<img src="upload/galerie/galerie_mini/<?php echo $line['nom'];?>" width="100" height="100"/>
</a>
<?php
}
?>
<!-- <a href="http://www.youtube.com/embed/YE7VzlLtp-4">
<img src="http://img.youtube.com/vi/YE7VzlLtp-4/2.jpg" alt="Youtube Video"></a>-->
</div>
<div class="suiv"></div>
<div class="prec"></div>
</div>
</div>
</div>
<?php }?>
</body>
</html> |
Je galère depuis un moment alors si quelqu'un pouvait m'aider ce serait super ! Merci