Insertion d’un caroussel d’images comme fond de page
Ci-dessous le code html à écrire en début d’article :
<div style="z-index:-20;position:fixed;top:0px;left:0px;width:100%;height:99vh;">
<sjcycle15|width=100%|random=true|bulle=off>
</div>
<div style="z-index:-10;position:fixed;top:0px;left:0px;width:100%;height:99vh;background-color:rgba(0, 0, 255, 0.01);">
</div>Le "div" en dessous ("z=-20") contient l’affichage du caroussel "sjcycle" avec les paramètres "width=100%", "random=true" et "bulle=off" afin que les images apparaissent en pleine page et de façon aléatoire. Attention ... 100% affiche chaque image jusqu’à 100% de sa taille en pixels : pensez à utiliser des images d’au moins 1600px de largeur pour remplir la majorité des écrans des utilisateurs.
Tous les paramètre du modèle "sjcycle" sont utilisables, en particulier le choix des images par "|docs=n1,n2,n3" au lieu de la totalité des images de l’article NN défini dans l’appel du caroussel "sjcycleNN"
Bien évidemment, avec ce même procédé on peut mettre une image fixe en fond de page, en remplaçant <sjcycle15|width=100%|random=true|bulle=off> par <vueID|width=100%> où ID est l’identifiant spip de l’image à utiliser.
Au-dessus ("z=-10") une "div" avec fond transparent recouvre la vidéo et la isole des clicks de souris.
Ces deux "div" étant en "position:fixed" elles restent ancrées à la fenetre du navigateur.
Le contenu de l’article n’est pas modifié : textes, images et médias sont affichés normalement au dessus du fond.
RSS 2.0