jquery dynamique

Eléphant du PHP | 186 Messages

31 août 2011, 10:17

Bonjour à tous !

Je ne suis pas un spécialiste en jquery et javascript mais je voudrais savoir s'il est possible de faire la chose suivante :

J'utilise yoxview pour mes galeries photos avec le code suivant :

Code : Tout sélectionner

$(document).ready(function(){ $(".yoxview").yoxview({ lang: "fr", autoPlay: true, autoHideMenu: false }); });
Sur une page devant afficher plusieurs galeries en même temps, si je souhaite utiliser le module jquery yoxview, je dois écrire, vraisemblablement plusieurs fois le code ci dessus.

Exemple : J'ai 2 galeries photos sur ma page, j'écris alors :

Code : Tout sélectionner

$(document).ready(function(){ $(".yoxview_1").yoxview({ lang: "fr", autoPlay: true, autoHideMenu: false }); }); $(document).ready(function(){ $(".yoxview_2").yoxview({ lang: "fr", autoPlay: true, autoHideMenu: false }); });

Je voudrais savoir, comme je ne connais pas le nombre exact de galerie pouvant être affichées sur ma page s'il existait une méthode pour ne pas avoir à écrire autant de fois le code d'appel à yoxview qu'il y aura de galerie ?

Une sorte d'incrémentation dynamique qui s'appliquerait quelque soit le nombre de galerie.

Merci par avance pour toute aide apportée.

Eléphant du PHP | 127 Messages

31 août 2011, 11:17

Salut, tu peux essayer le code suivant (non testé) :
$(document).ready(function(){

      $(".yoxview").each(function (index, gallery) {
          $(this).yoxview({
             lang: "fr",
             autoPlay: true,
             autoHideMenu: false
          });
      });
});
ou
$(document).ready(function(){

      $(".yoxview").each(function (index, gallery) {
          gallery.yoxview({
             lang: "fr",
             autoPlay: true,
             autoHideMenu: false
          });
      });
});

ViPHP
ViPHP | 3607 Messages

31 août 2011, 11:23

Bonjour,

à quoi ressemble ta structure html dans le cas de plusieurs galleries ?

Eléphant du PHP | 186 Messages

31 août 2011, 12:31

Salut !

En fait je me suis trompé de module jquery. Yoxview n'a pas besoin de lui préciser plusieurs noms.

Néanmoins, la solution m'intéresse toujours puisque le soucis se pose pour un autre module bx_slider où j'ai besoin de spécifier un nom différent pour chaque appel de script .

Ci-après la structure html include dans la boucle
<ul id="slider'.$k.'">';											 
for($m=0;$m<count($a_afficher['marque'][$i]);$m++){  									
echo '<li class="carousel-li">';
<img class="img img-logo" src="'.$row_magasin_marque['logo_marque_petite'].'" alt="'.$row_magasin_marque['nom_marque'].'"/>
</li>';
}
echo '
</ul>';
où $k représente une incrémentation de 1 à n, n étant le nombre maximum d'affichage sur la page.

Pour le moment, je me fais un compte du nombre d'affichage et je fais une boucle de l'appel au script :
<script type="text/javascript" src="modules/bxSlider/jquery.bxSlider.min.js"></script>
<script type="text/javascript">
    <?php for($i=0;$i<12;$i++){ 
		$j=$i+1;
	echo "
	$(document).ready(function(){
        $('#slider".$j."').bxSlider({
            infiniteLoop: false,
            hideControlOnEnd: true,
			displaySlideQty: 4,
            moveSlideQty: 4          
        });
    });";
	}?>
</script>
Y aurait-il donc une methode pour éviter cette boucle de script ?

Mammouth du PHP | 568 Messages

31 août 2011, 13:55

C'est déjà dynamique ton code puisque tu utilise le selecteur "class"

Pour rappel

Code : Tout sélectionner

$("#ID") -> équivalent de getElementById $(".CLASS") -> renvoie n élément(s) de utilisant la class css CLASS

ViPHP
ViPHP | 3607 Messages

31 août 2011, 14:55

Alors il te suffit de changer tes ul comme ceci :
<ul class="slider" id="sliderX">
et ensuite dans ton javascript:
$(document).ready(function(){
    $('.slider').each(function(){
        
       $(this).bxSlider({
            infiniteLoop: false,
            hideControlOnEnd: true,
            displaySlideQty: 4,
            moveSlideQty: 4          
        });
    });
});