• Résolu Fenêtre DIAPORAMA dans header


    Samedi 22 Juin 2019 à 07:31
    JeffB

    Bonjour à tous

    le sujet me semble avoir été traité, mais je n'ai rien trouvé qui puisse correspondre exactement à mes attentes.

    voilà donc:

    Dans le header, je voudrais mettre une fenêtre (200 x 200 px par exemple) et pouvoir y insérer un diaporama photo (voire une vidéo) afin de rendre plus vivante la page d'accueil .

    qui peut m' aider

    merci

     

    Samedi 22 Juin 2019 à 14:56
    stormalo

    Bonjour,

    Le code de ce diaporama, il existe ?

    Si la réponse est oui, et qu'il il est possible de le mettre dans un module simple il suffira par css de le positionner sur le header

    Si la réponse est non, on peut arriver à un résultat satisfaisant en modifiant un tuto de Papasti (Le blog facile) pour créer le diaporama. Il restera par ajout de html+css à  le positionner sur le header.

    sarcastic Je viens de tester cette dernière hypothèse, et, surprise, ça a fonctionné du premier coup, sans rien "planter". L'inconvénient c'est qu'il faut mettre la main dans le "cambouis" d'un code javascript

    Le code css pour placer un élément dans le header peut être par exemple:
    #id_élément  {
    position: absolute;
    top: 10px;
    left: 60px;
    }

    Samedi 22 Juin 2019 à 17:35
    JeffB

    merci de la réponse mais je n'ai pas de code 

    Samedi 22 Juin 2019 à 21:34
    stormalo

    @JeffB 

    Alors voici une façon de faire, sans diaporama existant.

    Préalable:
    s'assurer que l'autorisation d’insérer du code javascript est active et récupérer le code de Papasti à cette adresse:
    http://le-blog-facile.ek.la/image-de-fond-en-diaporama-p750568

    Principe :
    Le code de Papasti est prévu pour placer le diaporama en image de fond du blog, c'est à dire dans l'élément identifié id="background". je propose de le mettre dans un nouvel élément que l'on va identifier id="minidiapo" lequel sera à positionné dans le header (par css)

    Pas à pas :
    1) Créer le nouvel élément dans un module simple. Écrire dans le code source:
    <div id="minidiapo" style=" width: 200px; height: 200px; "> </div>

    2) Ensuite placer par copier /coller le code de Papasti dans le code source < > d'un module simple.

    3) Ajouter entre les balises <style> et </style> le bloc de code css:
    #minidiapo  {
    position: absolute;
    top: 10px;
    left: 60px;
    }

    4) entre les balises <script> et </script> , remplacer 'background' par 'minidiapo'
    c'est à faire aux lignes 35    37    53     77 (2fois)     soit 5 fois

    5) Pour finir : affiner les réglages selon indications de Papasti en bas de sa page et ceux de l'élément id="minidiapo" et du sélecteur css  #minidiapo

    J'ai testé avec les images du tuto de Papasti

    Dimanche 23 Juin 2019 à 07:28
    JeffB

    Merci:

    Je teste dans un blog d'essai

    une question:

    s'agit il de 2 modules simples ou d'un seul module simple ( code papasti et nouvel élément minidiapo)

    merci

    Dimanche 23 Juin 2019 à 09:23
    stormalo

    Bonjour,

    J'ai indiqué uniquement ce que j'avais fait pour tester. En fait on peut décliner ça de diverses façons:

    - tout dans un seul module  et ça fonctionnera quel que soit le contenu affiché. Ce peut être un nouveau module ou un module existant.

    - tout dans  une page simple (ce que j'ai fait) ou dans  un article.
    Ça ne fonctionnera que quand ce contenu sera affiché.

    - mais aussi en séparant css et javascript : le css entre <style> et </style>, dans le thème (ajouter du css) et le javascript de  la ligne <script> et à la ligne </script> incluses, dans la zone de script.
    Sans oublier le html dans le code source de ton choix (de préférence un module de menu car l'identifiant minidiapo ne doit exister qu'une fois par ce qui est à l'écran)

    - tout dans la zone de script, sauf la partie hrml ....

    Le choix d'un module de menu me semble le plus fiable car sans effet sur un affichage en version mobile.

    Ps: Papasti propose aussi un code similaire, mais avec les images qui défilent horizontalement lors du remplacement

    EDIT: 03 / 08 / 2019

    Une nouvelle idée a germée. Toujours à partir du code de Papastique j'ai indiqué dans ma première réponse, il suffit  de remplacer  background  par   header
    (à faire 4 fois).

    La div id="header" existant déjà, il n'est pas besoin de faire une création htm+ css

    Le diaporama se déroulera sous le titre du blog. C'est plus adapté à ton souhait exprimé par ailleurs

    Il n'y a plus qu'à ....  smile




    Vous devez être membre pour poster un message.