-
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.
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 PapastiDimanche 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 Papasti↗ que 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'à ....
Vous devez être membre pour poster un message.