Appeler une routine JS avec d'autres paramètres

Résolu
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   -  
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   -
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 ?
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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/
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
Merci mais l'exemple que tu donnes nécessite de cliquer sur un bouton ou sur l'image pour passer à la suivante, le mien défile tout seul.
Dupliquer une partie du script ne me dérange pas, par exemple pour définir un nouvel array pour chaque série d'images : que dupliquer exactement en changeant quoi ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 ??!
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
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 ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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>
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
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">
0
Réponse 2 / 4
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
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">
0
overcool Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   1
 
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]
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour et merci beaucoup, ça fonctionne.
Tu peux voir les 3 images qui bougent ici https://www.rudyv.be/Aquarium/RVRT/RVRTtest.php
là https://www.rudyv.be/Aquarium/RVRT/RVRTtest.php#7
et là https://www.rudyv.be/Aquarium/RVRT/RVRTtest.php#18
Problème résolu.
0
mzilysufiane
 
maouedn hauedn
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9 > mzilysufiane
 
.
0
Réponse 3 / 4
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
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 ?
0
Réponse 4 / 4
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
Exemple d'un gif animé
https://www.rudyv.be/Aquarium/RVRT/Pompes.gif
qui fait la même chose que le JS
https://www.rudyv.be/Aquarium/RVRT/RVRT.php#7
0
backnight
 
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).
0
Herve_be Messages postés 1121 Date d'inscription   Statut Membre Dernière intervention   9
 
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.
0

Discussions similaires

Je peux appeler mais ne peux pas recevoir d'appel
Tom -
bazfile -

4 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Faire un appel simuler sur samsung
Cla. -
nemrod18 -

6 réponses
Problème digital wellbeing android
Appasamy -
ME -

15 réponses