Script js qui fonctionne sur toutes les occurrences d'une classe

**ChiiChii** · 20/03/2014, 23h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 21/03/2014, 08h32

heu déja là tu passes un string ?? et pas l'objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

s = new slider("galeries[g]");

ensuite pour bien séparer tes instances, essaye de rattache le slider à l'element

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

galeries[g].s = new slider(galeries[g]);

Script js qui fonctionne sur toutes les occurrences d'une classe

jQuery

Vue hybride

Discussions similaires

Partager

Partager