Appeler une routine JS avec d'autres paramètres
Résolu
Herve_be
Messages postés
1182
Date d'inscription
Statut
Membre
Dernière intervention
-
Herve_be Messages postés 1182 Date d'inscription Statut Membre Dernière intervention -
Herve_be Messages postés 1182 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.
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 ?
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 ?
4 réponses
-
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/
-
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 ? -
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 ??! -
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">
Ma question : je voudrais mettre 2 autres slideshow dans le même document : comment faire ?
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul> -
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>
-
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">
-
-
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">-
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]
-
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. -
-
-
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 ? -
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-
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). -
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.
-
