Script pour affichage images/photos

jeanluc · 11 nov.

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

Niko · 13 nov.

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 un setTimeout afin de marquer un délai entre chaque transition.

Voici la section du code modifiée, avec un commentaire pour expliquer l'ajout :

function startFade() { // affichage progressif
    let nbrImage = imageNames.length;
    let display = document.getElementById(idDiv);
    let html = '';
    html = '<div>';
    html += '<figure style="margin: 0;left: 0;">';
    for (let i = 0; i < nbrImage; i++) {
        html += '<img class="image" src="' + repPhotos + imageNames[i] + '" width="' + imageW + 'px" style="position: absolute;opacity: 0;float: left;transition: opacity 1000ms ease-in-out;" alt="Image"/>';
    }
    html += '</figure>';
    html += '</div>';
    display.innerHTML = html;
    let images = document.getElementsByClassName('image'); 

    let index = images.length - 1; // index de l'image affichée en dernier 
    images[index].style.opacity = 1;

    function changeImage() {
        images[index].style.zIndex = 1;
        images[index].style.opacity = 0;
        index++;
        if (index == images.length) {
            index = 0;
        }
        images[index].style.zIndex = 2;
        images[index].style.opacity = 1;

        // Ajout d'un délai de 3 secondes entre chaque image
        setTimeout(changeImage, displayTime * 1000); // Temporisation de 3 secondes (modifiable via displayTime)
    }

    setTimeout(changeImage, displayTime * 1000); // Premier appel avec délai initial
}

Explication :

Le setTimeout inséré dans changeImage() assure une pause de displayTime (3 secondes) avant chaque changement d'image.
L'appel initial 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 fonction changeImage() pour temporiser le changement d'image. Voici le code complété avec des commentaires expliquant l'ajout :

function startFade() { // affichage progressif
    let nbrImage = imageNames.length;
    let display = document.getElementById(idDiv);
    let html = '';
    html = '<div>';
    html += '<figure style="margin: 0;left: 0;">';
    for (let i = 0; i < nbrImage; i++) {
        html += '<img class="image" src="' + repPhotos + imageNames[i] + '" width="' + imageW + 'px" style="position: absolute;opacity: 0;float: left;transition: opacity 1000ms ease-in-out;" alt="Image"/>';
    }
    html += '</figure>';
    html += '</div>';
    display.innerHTML = html;
    let images = document.getElementsByClassName('image'); 

    let index = images.length - 1; // index de l'image affichée en dernier 
    images[index].style.opacity = 1;

    function changeImage() {
        // Faire disparaître l'image actuelle
        images[index].style.zIndex = 1;
        images[index].style.opacity = 0;
        index++;
        if (index == images.length) {
            index = 0;
        }
        // Afficher la nouvelle image après un délai de 3 secondes
        setTimeout(() => {
            images[index].style.zIndex = 2;
            images[index].style.opacity = 1;
            // Répéter le changement d'image après le temps défini
            setTimeout(changeImage, displayTime * 1000); // Relance le changement après 3 secondes
        }, displayTime * 1000); // Temps de pause de 3 secondes entre les images
    }

    // Premier appel à la fonction pour démarrer le cycle
    setTimeout(changeImage, displayTime * 1000);
}

Explication des ajouts :

Utilisation de setTimeout à l'intérieur de changeImage() pour créer un délai de 3 secondes entre l'affichage de deux images.
Une temporisation initiale setTimeout(changeImage, displayTime * 1000) pour le premier déclenchement de la fonction après un délai de 3 secondes.
Cela garantit que chaque image reste affichée pendant le temps spécifié avant que la suivante ne soit affichée.

## listePhotos.php

On peut Améliorer Simplement ce Script

Sécurisation du Chemin :
- Ajouter des vérifications pour éviter que des chemins relatifs ou des caractères dangereux soient utilisés (../, par exemple). Cela pourrait prévenir des failles de sécurité comme la traversée de répertoire.
```
$dir = realpath($_REQUEST['Rep']);
if ($dir && strpos($dir, '/path/to/allowed/root') === 0) {
    // Le chemin est sécurisé et dans le répertoire autorisé
}
```
Gestion des Erreurs :
- Ajouter une gestion des erreurs pour informer l'utilisateur si le répertoire n'existe pas ou s'il y a un problème lors de l'accès.
```
if (!file_exists($dir)) {
    echo "Erreur : le répertoire n'existe pas.";
    exit;
}
```
Filtrer les Types de Fichiers :
- Ajouter un filtre pour ne retourner que certains types de fichiers (par exemple, uniquement les images).
```
$ListFiles = array_filter($ListFiles, function($file) use ($dir) {
    return preg_match('/\.(jpg|jpeg|png|gif)$/i', $file);
});
```
Protection contre les Requêtes Malveillantes :
- Utiliser 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 :
- Ajouter une option pour trier les fichiers par ordre alphabétique ou par date de modification si nécessaire.
```
usort($ListFiles, function($a, $b) use ($dir) {
    return filemtime($dir . '/' . $a) - filemtime($dir . '/' . $b);
});
```

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

fred · 14 nov.

Cool du dev sur le forum ❤️

jeanluc · 14 nov.

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

Niko · 14 nov.

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

fred · 14 nov.

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

Niko · 14 nov.

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

jeanluc · 14 nov.

Bonjour,

@Niko

A ma grande honte, je n'ai pas testé.

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 transition est déclenchée par la modification de la propriété opacity (1er paramètre), de 0 à 1;
la transition se fait progressivement pendant 1000ms (2ième paramètre);
selon une fonction ease-in-out (3ième paramètre) : "la transition commence lentement, accèlère puis ralentit à nouveau avant la fin".

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 :

Par ailleurs je vais revoir l'implémentation de mon script.

A bientôt,

Jean-Luc

lemimi · 15 nov.

Bonjour vous tous,
@fred a écrit :

Je vous laisse travailler sur ce script, d'ici à quelques jours, je vous enverrai un squelette de module pour comprendre comment cela fonctionne.

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

Niko · 16 nov.

Bonjour @ Lemimi
Voici un script qui pourrait intéresser les randonneurs et ceux qui utilisent le module geolocalisation

jeanluc · 16 nov.

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

augras · 17 nov.

Très intéressant : merci.

fred · 19 nov.

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.

TipO · 19 nov.

Bonjour,
merci @jeanluc, c'est très intéressant. Je testerai dès que je peux.

@fred

voici un skeleton de module

?

c'est plutôt compliqué en ce moment, beaucoup de taf et transport, peu de loisir.

on comprend tout à fait, c'est déjà un travail considérable ce que tu nous offres.

jeanluc · 25 nov.

Bonjour,

@fred,

Comme promis, voici un skeleton de module

Où se trouve ce skeleton ?

Merci d'avance pour ta réponse.

Jean-Luc

fred · 27 nov.

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

jeanluc · 27 nov.

Bonjour,

@fred

... ce n'était pas une bonne idée de faire l'envoi depuis un TGV

Ce n'est pas une bonne pub pour les TGV.

Jean-Luc

fred · 27 nov.

L'instabilité du réseau cellulaire n'est pas terrible, je m'y remets ce samedi.

Bonne soirée,

Fred

fred · 30 nov.

Bonjour
Voilà, c'est fait @jeanluc
Bon week-end

fred · 30 nov.

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.

jeanluc · 30 nov.

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

fred · 4 déc.

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

Script pour affichage images/photos

installation/utilisation

utilisation dans une bannière

utilisation dans une page

Avertissement

Commentaires

Explication :

Explication des ajouts :

On peut Améliorer Simplement ce Script

Le script PHP

installation/utilisation

utilisation dans une bannière

utilisation dans une page