Script pour affichage images/photos
Bonjour
Cette discussion fait suite à celle initialisée par Niko (changer bannières). Elle propose donc un script qui permet d'afficher des images/photos soit en mode défilement, soit en mode fondu.
Avant tout à voir ici : maquette. Le script est utilisé dans la bannière en mode défilement et dans la page en mode fondu.
installation/utilisation
Ci joint une archive scriptPourZwiiCMS.zip qui contient trois fichiers :
1) displayIMG.html : le script avec les balises script. Il y a 6 paramètres à ajuster, à savoir : repPhotos, scriptPHP, imageW, idDiv, displayTime et displayType. Ils sont documentés en début du script via les commentaires.
2) listePhotos.php : le fichier PHP qui permet de lister les images/photos du répertoire concerné. il faut l'installer sous le répertoire ( à créer) script du répertoire site.
3) banniereDisplayIMG.html : le code HTML de la bannière de ma maquette, à titre d'exemple d'implémentation.
utilisation dans une bannière
1) via l'administration site modifier la bannière,
2) choisir Contenu = Contenu HTML,
3) sous l'éditeur sélectionner Voir->Code source,
4) créer à l'endroit souhaité l'élément html (div ou p ou* ...) avec *id qui accueillera l'affichage,
5) à la fin de la page copier le script (displayIMG.html) avec les balises script,
6) ajuster les paramètres,
7) faire Ok puis Enregistrer.
Aidez-vous avec le fichier banniereDisplayIMG.html.
utilisation dans une page
En 2 phases :
première phase :
1) éditer la page ou vous souhaitez installer le script,
2) sous l'éditeur de contenu sélectionner Voir->Code source,
3) créer à l'endroit souhaité l'élément html (div ou p ou* ...) avec *id qui accueillera l'affichage,
5) faire Ok puis Enregistrer.deuxième phase :
1) toujours en mode édition de la même page,
2) sélectionner Extension puis Editeur JS,
3) copier le script (displayIMG.html) SANS les balises script,
4) ajuster les paramètres,
5) puis Enregistrer.
Terminé
Avertissement
Sur ma maquette le script est utilisé 2 fois sur la page d'accueil , sur la page elle-même et dans la bannière. C'est ce qu'on appelle une cohabitation. Pour que celle-ci se passe bien sans que le script se mêle les pieds dans les variables, il faut dans la deuxième installation ( la page dans mon cas) renommer la fonction principale du script. Elle s'appelle scriptIMG(), la renommer, par exemple scriptIMG2(), par 2 fois : à l'appel et à la déclaration, c'est décrit dans le script.
Voilà tout ce que je voulais dire pour ce script. Un peu long peut-être, mais j'espère que ce n'est pas trop rebarbatif à lire.
Maintenant, si vous le souhaitez, c'est à vous de jouer.
Cordialement,
Jean-Luc
Commentaires
Bonsoir @jeanluc,
Une connaissance m'a suggéré ceci pour implémenter ton code
## displayIMG.html
Pour ajouter une pause de 3 secondes entre chaque image affichée dans le script existant, il suffit de modifier l'appel de la fonction
changeImage()
en y ajoutant unsetTimeout
afin de marquer un délai entre chaque transition.Voici la section du code modifiée, avec un commentaire pour expliquer l'ajout :
Explication :
setTimeout
inséré danschangeImage()
assure une pause dedisplayTime
(3 secondes) avant chaque changement d'image.setTimeout(changeImage, displayTime * 1000)
démarre la première exécution avec le même délai.Avec cette modification, chaque image reste affichée pendant 3 secondes avant de passer à la suivante, respectant le temps d'affichage souhaité.
## banniereDisplayIMG.html
Ajouter un arrêt de 3 secondes pour chaque image affichée, utiliser
setTimeout
dans la fonctionchangeImage()
pour temporiser le changement d'image. Voici le code complété avec des commentaires expliquant l'ajout :Explication des ajouts :
setTimeout
à l'intérieur dechangeImage()
pour créer un délai de 3 secondes entre l'affichage de deux images.setTimeout(changeImage, displayTime * 1000)
pour le premier déclenchement de la fonction après un délai de 3 secondes.## listePhotos.php
On peut Améliorer Simplement ce Script
Sécurisation du Chemin :
../
, par exemple). Cela pourrait prévenir des failles de sécurité comme la traversée de répertoire.Gestion des Erreurs :
Filtrer les Types de Fichiers :
Protection contre les Requêtes Malveillantes :
htmlspecialchars()
ou d'autres méthodes pour échapper les noms de fichiers avant de les afficher, en cas d'inclusion de caractères spéciaux.Tri des Fichiers :
Ces améliorations renforcent la sécurité et la fonctionnalité du script tout en le rendant plus flexible et robuste.
Je ne suis pas programmeur et je ne connais pas très bien la personne et sa compétence. Je pense que l'arret sur image peut être intéressant dans le défilement.Quant au fichier php....
A voir si ses remarques sont pertnantes pour implémenter
https://artweave.fr.fo
Cool du dev sur le forum ❤️
Bonjour,
@Niko
Merci pour tes remarques. Pour la fonction function startFade() tu donnes 2 solutions différentes dans tes paragraphes displayIMG.html et banniereDisplayIMG.html, pourquoi ?
As-tu testé les modifications que tu proposes ?
Je reviens vers toi dans un prochain message pour plus de commentaires.
Je me suis rendu compte que mon paragraphe Avertissement était à coté de la plaque en proposant de renommant la fonction. J'avais oublié qu'une fonction peut avoir des paramètres.
Par ailleurs je vais revoir l'implémentation de mon script.
@fred
Je vais essayer d'être à la hauteur. Dur challenge ...
Jean-Luc
ATTENTION : Je n'y connais que dalle en programmation donc ce que je propose ne vient pas de moi
A ma grande honte, je n'ai pas testé. J'essayerais quand même de l'installer sur le serveur local sur mon pc...
Les modifications ne sont pas de moi et j'utilise campus pour mon site.
Toujours dans le module "petites annonces" un module php fonctionnel à rectifier améliorer
https://artweave.fr.fo
Bonsoir à tous,
Je vous laisse travailler sur ce script, d'ici à quelques jours, je vous enverrai un squelette de module pour comprendre comment cela fonctionne.
Bon courage
Bonsoir @ Fred
L'apport d'un expert pour automatiser et concevoir des modules est pour ma part le bienvenu vu l'absence de compétence pour ma part
https://artweave.fr.fo
Bonjour,
@Niko
Ce n'est pas bien. Mais je ne t'en veux pas !
J'ai testé ce que tu proposes pour la fonction startFade(), les deux solutions fonctionnent mais ne modifie pas ce qu'on voit à l'écran.
Comment fonctionne startFade() ? Très simple en réalité, mais je n'ai rien inventé.
L'affichage progressif (mode fondu) se fait grace au style de chaque image, via la propriété transition: opacity 1000ms ease-in-out. Explication :
La fonction changeImage() permet de réaliser le changement d'opacité, je joue aussi avec l'index mais je pense que ce n'est pas utile. Cette fonction est lancée, via un setInterval tous les displayTime. Avec : displayTime = temps d'affichage + temps de la transition.
J'ai mis une valeur fixe pour le temps de la transition, elle pourrait être paramétrable. En augmentant le displayTime on augmente le temps d'affichage.
Donc je ne vois pas l'intérêt d'ajouter un setTimeout. Par contre d'autres méthodes sont possibles pour faire un affichage progressif.
Quelques liens qui expliquent la propriété transition :
Le script PHP
Ma réponse ci-dessous est sans doute fortement subjective, j'espère que tu ne m'en voudras pas.
Mon script n'a pas une vocation universel, il est utilisé dans un cadre bien précis. Les scripts que l'on trouve sur internet n'ont pas une destination particulière, ils doivent être écrits en prenant toutes les précautions, à l'utilisateur de l'adapter à son cas. Il faut replacer les choses dans leur contexte. Ainsi, pour moi, le répertoire doit exister et ne contenir que des fichiers images correctement nommés.
Une réponse sur un point précis, le tri : il est fait dans la fonction listeIMG() :
imageNames = result.split(';').sort();
Voilà tout ce que je voulais dire @Niko, si tu as des questions n'hésite pas, j'essaierais d'y répondre.
Je vais maintenant m'atteler à ce que j'ai dit dans mon message précédent :
A bientôt,
Jean-Luc
Bonjour vous tous,
@fred a écrit :
Suis aussi intéressé par cela.
En attendant voici comment je contourne l'iframe : https://www.lemimi.fr/fr/test-prochaine-rando
Cela me paraît mieux que : https://www.test.lemimi.fr/test/pa26731e3389c5b1
Et aussi, comment ce fait-il que j'ai une suite de chiffres après pa2 dans l'url ci-dessus ?
Bonne journée... Michel
Bonjour @ Lemimi
Voici un script qui pourrait intéresser les randonneurs et ceux qui utilisent le module geolocalisation
https://artweave.fr.fo
Bonjour
Comme promis dans un précédent message j'ai revu l'implémentation de mon script d'affichage d'images/photos. J'ai scindé en 2 le script html-javascript :
1. function_displayIMG.html : partie qui contient la fonction qui réalise l'affichage soit en mode défilement, soit en mode fondu,
2. param_displayIMG.html : partie qui contient les paramètres et le lancement de la fonction affichage.
Ces 2 fichiers sont inclus dans l'archive scriptIMG_V2-0.zip (ci-jointe), qui contient également le script PHP listePhotos.php qui permet de lister les images/photos du répertoire concerné, et le fichier banniereDisplayIMG_V2-0.html qui contient le code HTML de la bannière de ma maquette, à titre d'exemple d'utilisation.
Les paramètres sont au nombre de 6. Ils sont documentés en début de param_displayIMG.html via les commentaires.
installation/utilisation
Le fichier PHP doit être installé sous le répertoire ( à créer) script du répertoire site.
function_displayIMG.html : via l'administration site, faire Configuration-Scripts externes-Script dans head, coller le contenu du fichier (avec les balises script). Valider.
utilisation dans une bannière
Installation de param_displayIMG.html avec les balises script. Procédure identique au même paragraphe de mon premier message.
utilisation dans une page
Installation de param_displayIMG.html sans les balises script. Procédure identique au même paragraphe de mon premier message.
Il est possible de lancer le script à la fois sur une page et sa bannière.
Jean-Luc
Très intéressant : merci.
Bonjour tout le monde,
Comme promis, voici un skeleton de module. Titre étrange soigneusement choisi pour repérer les occurrences dans les fichiers. Ce module ne fait rien que d'afficher un hello world personnalisé lorsque l'utilisateur est connecté.
Il n'y a que deux views (vue), une affichée dans la page et une pour la configuration.
Désolé de ne pas passer du temps sur le travail de @jeanluc, c'est plutôt compliqué en ce moment, beaucoup de taf et transport, peu de loisir.
De temps à autre, je travaille sur la double authentification qui permettra de sécuriser la connexion à Zwii.
Bonjour,
merci @jeanluc, c'est très intéressant. Je testerai dès que je peux.
@fred
?
on comprend tout à fait, c'est déjà un travail considérable ce que tu nous offres.
Bonjour,
@fred,
Où se trouve ce skeleton ?
Merci d'avance pour ta réponse.
Jean-Luc
Bonjour,
@jeanluc, je vois que le module n'a pas été déposé, ce n'était pas une bonne idée de faire l'envoi depuis un TGV.
Malheureusement, je vais devoir le refaire
A bientôt
Bonjour,
@fred
Ce n'est pas une bonne pub pour les TGV.
Jean-Luc
L'instabilité du réseau cellulaire n'est pas terrible, je m'y remets ce samedi.
Bonne soirée,
Fred
Bonjour
Voilà, c'est fait @jeanluc
Bon week-end
re,
Je viens de jeter un œil plus attentif sur ton script, un module permettrait d'héberger la partie script php et de sélectionner les photos plus facilement. La partie inclusion (qui correspond au code source) pourrait être simplement l'insertion du script au sein de la page avec le mot clé [MODULE]
Après s on veut plusieurs sliders dans la même page, cela se complique.
Bonjour,
Merci @fred pour tes suggestions.
En fait mon but n'était pas d'écrire un module slider puisqu'il en existe déjà un (qui ne semble pas inclure le défilement d'images), mais de proposer un script pour afficher des images changeantes dans la bannière. Je me suis pris au jeu du codage.
Malgré cela je vais mettre en oeuvre ton squelette, ce sera une formation pour moi, car j'ai un visualisateur GPX à proposer.
Jean-Luc
Il existe un module qui exploite des données GPS, tu pourras y trouver peut-être quelques fonctions utiles.
N'hésite pas à ouvrir un sujet si tu as des questions sur le fonctionnement des modules.
Bonne journée,
Fred