Menu

Appeler une routine JS avec d'autres paramètres [Résolu]

Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 8 sept. 2018 à 16:03 - Dernière réponse : Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention
- 19 sept. 2018 à 09:13
Bonjour,
Je suis loin d'être spécialiste en JS, mes excuses si la question vous semble naïve.
Dans un document php j'ai un Javascript qui fait défiler les images, il fonctionne très bien.
var timeDelay = 3;
var Pix = new Array
("Connexion1.jpg"
...
,"Connexion6.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix(){
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
} 

</head>
<body OnLoad="startPix()" background="../water.jpg">
...
<img name="ChangingPix" src="Connexion1.jpg">


Ceci fait défiler les images Connexion1 à 6.

EDIT : Correction des balises de code

Ma question : je voudrais mettre 2 autres slideshow dans le même document : comment faire ?
Afficher la suite 

Votre réponse

16 réponses

jordane45 22518 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 septembre 2018 Dernière intervention - 8 sept. 2018 à 16:55
0
Merci
Bonjour,
A part dupliquer ce code 3 fois... je ne vois pas (il n'est pas fait pour avoir plusieurs instances dans la même page).
Il faudrait le recoder différement....

Mais bon.. des plugins de slideshow.. il y en a des tonnes sur le net....
Autant te servir directement de ceux la
Par exemple :http://responsiveslides.com/
jordane45 22518 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 septembre 2018 Dernière intervention - 8 sept. 2018 à 20:25
Tu n'as pas du bien lire la doc ....
si tu regardes bien les options
$(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});

auto: true ... ça correspond à ce que tu veux non ??!
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 9 sept. 2018 à 09:49
Je ne suis pas spécialiste .js : j'avais juste essayé la démo.
Par contre il faut définir les images
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
Ma question : je voudrais mettre 2 autres slideshow dans le même document : comment faire ?
jordane45 22518 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 septembre 2018 Dernière intervention - 9 sept. 2018 à 18:13
Il faut que tu mettes autant de UL que tu veux de slider...
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
<ul class="rslides">
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>



Si tu veux gérer les options différemment pour chaque slider, tu peux mettre un ID à tes UL et lorsque tu initialiseras le script tu pourras en générer en te basant sur ces id
<ul class="rslides" id="slider1">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>

<ul class="rslides" id="slider2"><li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>

et côté JS
$("#slider1").responsiveSlides({
  auto: true,       
  speed: 500,    
  timeout: 1000
});
$("#slider2").responsiveSlides({
  auto: true,       
  speed: 300,    
  timeout: 4000
});


NB: Pense bien, que pour ce script fonctionne, que tu dois charger jquery dans ta page (avant le script de slider).
Tu peux le télécharger ici
https://code.jquery.com/jquery-3.3.1.min.js ( à enregistrer sous : jquery.js et à inclure dans ta page )
 <script src="chemin/vers/fichier/jquery.js"></script> 
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 10 sept. 2018 à 11:54
Tout ceci me semble bien compliqué.
N'est-il pas plus simple de faire en sorte que le code que j'utilise puisse gérer plusieurs sets d'images ?
<head>
<script language="JavaScript">
var timeDelay = 3;
var Pix = new Array
("Connexion1.jpg"
...
,"Connexion6.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix(){
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
</script>
</head>
<body OnLoad="startPix()" background="../water.jpg">
...
<img name="ChangingPix" src="Connexion1.jpg">
jordane45 22518 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 septembre 2018 Dernière intervention - 10 sept. 2018 à 12:02
Si tu insistes

var timeDelay = 3000;
var Pix = new Array
("Connexion1.jpg"
...
,"Connexion6.jpg"
);
var Pix2 = new Array
("Connexion1.jpg"
...
,"Connexion6.jpg"
);

var PicCurrentNum = 0;
var PicCurrentNum2 = 0;

function startPix(){
  setInterval("slideshows()", timeDelay);
}

function slideshows(){
  slideshow1();
  slideshow2();
}

function slideshow1() {
  var howMany = Pix.length;
  PicCurrentNum++;
  if (PicCurrentNum == howMany) {
    PicCurrentNum = 0;
  }
  document["ChangingPix"].src = Pix1[PicCurrentNum];
} 
function slideshow2() {
  var howMany = Pix2.length;
  PicCurrentNum2++;
  if (PicCurrentNum2 == howMany) {
    PicCurrentNum2 = 0;
  }
  document["ChangingPix2"].src = Pix2[PicCurrentNum2];
} 
Commenter la réponse de jordane45
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 10 sept. 2018 à 14:16
0
Merci
Merci mais j'ai adapté en changeant le nom des images mais il reste bloqué sur la première.
Pourrais-tu voir où est l'erreur ?

<head>
<script language="JavaScript">
var timeDelay = 3000;
var Pix1 = new Array
("Connexion1.jpg"
,"Connexion2.jpg"
,"Connexion3.jpg"
,"Connexion4.jpg"
,"Connexion5.jpg"
,"Connexion6.jpg"
);
var Pix2 = new Array
("Photom1.jpg"
,"Photom2.jpg"
,"Photom3.jpg"
,"Photom4.jpg"
,"Photom5.jpg"
,"Photom6.jpg"
,"Photom7.jpg"
,"Photom8.jpg"
);

var PicCurrentNum1 = 0;
var PicCurrentNum2 = 0;

function startPix(){
setInterval("slideshows()", timeDelay);
}

function slideshow(){
slideshow1();
slideshow2();
}

function slideshow1() {
var howMany = Pix1.length;
PicCurrentNum1++;
if (PicCurrentNum1 == howMany) {
PicCurrentNum1 = 0;
}
document["ChangingPix1"].src = Pix[PicCurrentNum1];
}
function slideshow2() {
var howMany = Pix2.length;
PicCurrentNum2++;
if (PicCurrentNum2 == howMany) {
PicCurrentNum2 = 0;
}
document["ChangingPix2"].src = Pix[PicCurrentNum2];
}
</script>
</head>
<body OnLoad="startPix()" background="../water.jpg">
...
<img name="ChangingPix1" src="Connexion1.jpg">
...
<img name="ChangingPix2" src="Photom1.jpg">
overcool 9 Messages postés mardi 11 septembre 2018Date d'inscription 12 septembre 2018 Dernière intervention - 11 sept. 2018 à 01:17
Salut Hervé ! Je tombe par hasard sur toi :) Comment tu vas ?

Ton erreur se situe dans le setInterval, tu as mi un S en trop, tu appel la function "slideshows()" au lieu de "slideshow()"

Une fois corrigé tu auras deux autres erreurs puisque "Pix" n"est pas défini

Tu dois donc utilisé Pix1[PicCurrentNum1] et Pix2[PicCurrentNum2]
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 11 sept. 2018 à 10:14
Bonjour et merci beaucoup, ça fonctionne.
Tu peux voir les 3 images qui bougent ici http://www.rudyv.be/Aquarium/RVRT/RVRTtest.php
http://www.rudyv.be/Aquarium/RVRT/RVRTtest.php#7
et là http://www.rudyv.be/Aquarium/RVRT/RVRTtest.php#18
Problème résolu.
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention > mzilysufiane - 11 sept. 2018 à 12:31
.
Commenter la réponse de Herve_be
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 12 sept. 2018 à 12:37
0
Merci
Bonjour,
Je me demande s'il n'y a pas beaucoup plus simple qu'un script JS pour faire défiler les images :
utiliser un .gif animé comprenant les différentes images.
Quelle serait selon vous la solution la plus efficace ?
Commenter la réponse de Herve_be
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 12 sept. 2018 à 16:14
0
Merci
Exemple d'un gif animé
http://www.rudyv.be/Aquarium/RVRT/Pompes.gif
qui fait la même chose que le JS
http://www.rudyv.be/Aquarium/RVRT/RVRT.php#7
Salut ça dépends de ce que vous appelez simple.
Un GIF animé est une image. Il faudra la changer à chaque fois(en plus GIF c'est pourri comme qualité, mieux vaut utiliser PNG animé pour avoir une qualité moins naze) et ça oblige à tout charger pour ne montrer qu'une seule image à la fois, donc c'est du temps de chargement avant affichage en plus.
Cela revient aussi à devoir faire un gros boulot avec un éditeur graphique pour avoir les images qui défilent.
Quand il faudra changer une seule des images qui défile il faut simplement tout refaire.
Avec un slideshow il y a que les images à mettre et l'animation est géré par le programme donc un grand avantage puisqu'il n'y aura pas besoin d'avoir des images intermédiaires comme pour une seule image animé(en poids de chargement entre autre).
Et si on veut changer quelque chose il suffit de changer le nom du fichier dans le script et que celui ci soit sur le serveur. Donc non ce n'est pas du tout simple cela paraît seulement plus simple mais c'est beaucoup plus lourd, complexe et difficile (voire impossible) à maintenir sur la durée tout en étant un résultat de beaucoup moindre qualité.(sans compter qu'avec un défilement géré par le programme on peut faire autant d'effet visuel que l'on veux par le code et les varier à l'infini).
Herve_be 334 Messages postés mercredi 4 août 2010Date d'inscription 20 septembre 2018 Dernière intervention - 19 sept. 2018 à 09:13
Pour générer mon gif animé,
- j'utilise les mêmes images jpg que celles que j'utilise avec js : le travail est donc le même;
- ensuite JASC Animation Shop rassemble ces images et produit le gif, c'est très simple.
Chacune des 6 images constituant l'animation pèse 130k, le gif 139k.
Je constate que la qualité est la même comme tu peux le voir en essayant les 2 liens que j'ai donnés ci-dessus.
Commenter la réponse de Herve_be