IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Conception Web Discussion :

Diaporama d'images sans modification du code


Sujet :

Conception Web

  1. #1
    Membre régulier
    Homme Profil pro
    Touche à tout
    Inscrit en
    Mars 2009
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Touche à tout

    Informations forums :
    Inscription : Mars 2009
    Messages : 120
    Points : 90
    Points
    90
    Par défaut Diaporama d'images sans modification du code
    Bonjour,

    Je suis en train de me renseigner sur la possibilité de faire un diaporama d'images (photos) placées dans un dossier spécifique sans avoir à reprogrammer le code.

    Jusqu'à présent, je trouve de belles choses mais chaque image nécessite d'aller dans le code et c'est quand même un peu lourd.

    J'estime que l'idéal est d'avoir une simple déclaration de l'image dans un fichier (de type à inclure), avec son nom et des caractéristiques comme une description, la position dans le diaporama et éventuellement le temps d'affichage si on passe en mode automatique.

    De plus, il faut aussi autoriser des tailles/proportions différentes. Avez-vous un piste pour moi ?

    Merci !

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 213
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 213
    Points : 15 499
    Points
    15 499
    Par défaut
    avec un site basé sur wordpress, il existe plusieurs extensions permettant de gérer vos images.
    par exemple sur la page suivante, vous avez une vidéo qui présente le fonctionnement d'une extension :
    https://wordpress.org/plugins/ml-slider/

  3. #3
    Membre régulier
    Homme Profil pro
    Touche à tout
    Inscrit en
    Mars 2009
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Touche à tout

    Informations forums :
    Inscription : Mars 2009
    Messages : 120
    Points : 90
    Points
    90
    Par défaut
    Merci pour la réponse,

    Je n'ai pas envie d'installer un gros truc rien que pour une page. Je réfléchis à une solution PHP et JS. Je regarde les différents codes disponibles et j'essayerai d'adapter.

    • PHP : lecture d'un fichier (.csv ?) avec les noms des images et autres infos pour la construction de la page
    • JS : pour l'animation ; mais je ne connais pas bien ce langage


    Merci encore

  4. #4
    Membre régulier
    Homme Profil pro
    Touche à tout
    Inscrit en
    Mars 2009
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Touche à tout

    Informations forums :
    Inscription : Mars 2009
    Messages : 120
    Points : 90
    Points
    90
    Par défaut diaporama, problème (CSS ?)
    Bonjour,

    Je continue sur ce sujet car je ne suis pas loin d'une solution, mais il reste un problème, fort probablement dans le CSS. (Si nécessaire je laisse un admin juger s'il faut déplacer la discussion ou pas)

    Je l'ai adapté en PHP qui n'a qu'à lire un fichier .csv contenant les infos des photos. Je n'ai que cela à modifier pour ajouter, retirer, agencer ...
    La page est construite en une structure (quasi) identique à l'originale.
    Je n'ai pas touché au code JS, mais j'ai bien modifié le CSS pour accepter des tailles de photos quelconques, la position des "dot" de navigation au dessus des photos et le texte descriptif dans le haut de la photo.
    Cependant, quand j'essaie cela chez moi avec WampServer (php 7.4.26) La première image n'est pas affichée (mais on voit le cadre qu'elle devrait occuper).
    Et quand je l'essaie chez OVH (PHP 7.4 stable 64) ce sont la première et dernière image qui ne sont pas visibles. https://cambier.eu/photo/test/
    Où ai-je fait l'erreur ?

    Merci d'avance de m'aiguiller.

    PS : j'ai bien entendu vérifié les images en changeant la position des lignes dans le .csv, se sont toujours les 1ère et dernière.

    Édit , en regardant et comparant le code html de l'exemple et celui que créait mon PHP, j'ai remarqué que dans l'original, la <div class="slide-dot"> était en dehors de la <div class="slide-container"> J'ai corrigé cela, mais, comme je m'en doutais, cela ne change rien.


    Code csv : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    ./photos/;portrait.jpg;Votre serviteur (en 2020)
    ./photos/;Dsc00773.jpg;Lorem ipsum dolor sit amet, consectetur adipiscing elit
    ./photos/;DSC00103.jpg;Nullam luctus aliquam ornare
    ./photos/;Elise.JPG;Jeune fille au chapeau de paille, sous le soleil au zénith

    Il inclut le JS que j'isole en dessous (plus lisible)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pascal Cambier, photographe amateur</title>
    <link href="photo.css" rel="stylesheet" type="text/css">
    </head>
     
    <body bgcolor="#000">
     
      <?php
      /* d'après https://www.codeur.com/tuto/css/creer-diaporama-image-html-css#creer_un_diaporama_dimages_en_css_et_js */
      $fichier = file( "photos.csv" ); // coordonnées et descriptif photos
      $fichier = array_map( 'trim', $fichier );
      $datas = array();
      foreach ( $fichier as $ele ) {
        $datas[] = explode( ';', $ele ); // ta      bleau à deux dimensions
      }
      $row = count( $datas );
     
      echo '<div class="slide-dot">';
     
      for ( $l = 1; $l <= $row; $l++ ) { // construction des "dot", les points permettant de choisir une image
        echo '<span class="dot" onclick="currentSlide(' . $l . ')"></span>';
      }
     
      echo '</div>';
      echo '<div class="slide-container">';
      for ( $l = 0; $l < $row; $l++ ) { // lecture de la 1ère dimension (ligne)
        $ligne = $datas[ $l ]; // la 2ème dimension
              /* 
              0 = dossier
              1 = nom du fichier
              2 = description (peut contenir des <br>)        
              */
        echo '<div class="custom-slider fade">';
        echo '<img class="slide-img" src="' . $ligne[ 0 ] . $ligne[ 1 ] . '">';
        echo '<div class="slide-index">' . ($l + 1) . ' / ' . $row . '</div> ';
        echo '<div class="slide-text">' . $ligne[ 2 ] . '</div> ';
        echo '</div>';
     
      }
      ?>
      <a class="prev" onclick="plusSlides(-1)"></a> <a class="next" onclick="plusSlides(1)"></a> </div>
    <br>
    </div>
    <script type= "text/javascript">
     
        // détaillé en dessous
     
    </script>
    </body>
    </html>
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <script type= "text/javascript">
    	var slideIndex = 1;
    showSlides(slideIndex);
     
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }
     
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }
     
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("custom-slider");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
    }
    	</script>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    @charset "utf-8";
    /* CSS Document */
     
    .custom-slider { 
    	/*display: none; */
    	}
    .slide-container {
        max-width: 800px;
        position: relative;
        margin: auto;
    }
    .prev, .next {
        cursor: pointer;
        /*position: absolute;
        top: 50%;*/
    	position: absolute;
        top: 100px;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        /*color: white;*/
    	color: #ABDB15;
        font-size: 30px;
        background-color: rgba(0,0,0,0);
        transition: background-color 0.6s ease;
    }
    .prev{ left: 15px; }
    .next { right: 15px; }
    .prev:hover, .next:hover, .slide-text:hover {
        background-color: rgba(0,0,0,0.5);
    }
    .slide-text {
        position: absolute;
    	top: 150px;
        color:#ABDB15 ;
        font-size: 15px;
        padding: 15px;
        /*bottom: 15px;*/
        width: 100%;
        text-align: center;
    }
    .slide-index {
        color: #ABDB15;
        font-size: 13px;
        padding: 15px;
        position: absolute;
        top: 10px;
    }
    .slide-img{
        width: 100%;
        /*height: 300px;*/
        object-fit: cover;
        object-position: center;
    }
    .slide-dot{ text-align: center; }
    .dot {
        cursor: pointer;
        height: 10px;
        width: 10px;
        margin: 0 2px;
        background-color: #999999;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .active, .dot:hover { background-color: #111111; }
    .fade {
        animation-name: fade;
        animation-duration: 1s;
    }
    @keyframes fade {
        from {opacity: 0}
        to {opacity: 1}
    }

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    il y a deux choses à prendre en compte :
    • La présence d'un caratère BOM, %EF%BB%BF, dans ton fichier csv s'ajoute en début de ta première ligne et qui est pris en compte dans la référence pour le nom du fichier ;
    • l'extension JPG est différente de jpg, attention à la casse.


    Concernant le BOM : enregistré en UTF-8 sans BOM

  6. #6
    Membre régulier
    Homme Profil pro
    Touche à tout
    Inscrit en
    Mars 2009
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Touche à tout

    Informations forums :
    Inscription : Mars 2009
    Messages : 120
    Points : 90
    Points
    90
    Par défaut
    Hé bien, le mot de Cambronne, j'aurais juré un problème de CSS !

    Je n'avais vu ce caractère « BOM »

    Je connaissais le problème de la casse et je n'avais pas vu ce "JPG" en haut de casse.

    Dorénavant, quand je ferais mes tests en local, ce sera sur un petit serveur PI en Linux.

    Merci NoSmoking !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Erreur de compilation sans modification du code
    Par Fusch dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 06/06/2020, 20h59
  2. Réponses: 2
    Dernier message: 15/12/2017, 14h53
  3. Diaporama d'images automatique d'un répertoire entier (sans PHP)
    Par SaWEr93 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 09/02/2013, 14h29
  4. [eZ Publish] Diaporama Image sans chargement de page
    Par abadou dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 3
    Dernier message: 19/01/2010, 10h24
  5. Réponses: 4
    Dernier message: 24/10/2006, 03h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo