Ajouter feuille de style et script
Carousels - Slideshow de textes (quote slideshow)
→ Un Slideshow de textes... (quote slideshow)
C'est le type de fonctionnement ci-dessous, totalement responsive si son contenu l'est... bien sûr. On peut y placer du texte, pour un édito, mais aussi des images... sa hauteur s'adapte à son contenu. La durée d'affichage des "slides" est paramétrable.
Un exemple fonctionne dans la partie démo de ce site.
Il est issu de ce tutoriel : https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp . J'ai pu ajouter une barre de progression et un défilement automatique. J'aurais souhaité pouvoir ajouter un système de Pause au survol... ou de bouton Play-Pause... Hélas... Avis, donc, aux adeptes de la programmation .js ! Je suis preneur de toute solution...
Pour mettre en place ce procédé, dans une page ou une boîte, il faudra déclarer le style au début du code source encadré des balises [style type="text/css"]...[/style] ou bien appelé, comme c'est le cas sur ce site dans un fichier spécifique nommé ici quoteslide.css (décrit plus bas) et placé dans le dossier skin d'adHoc ainsi :
<link charset="utf-8" href="skin/css/quoteslide.css" rel="stylesheet" />
Et un script .js à la fin du code source (inhabituel mais indispensable...) encadré des balises [script]...[/script] ou bien appelé, comme c'est le cas sur ce site dans un fichier spécifique nommé ici quoteslide.js (décrit plus bas) et placé dans le dossier skin d'adHoc ainsi :
<script charset="utf-8" type="text/javascript" src="skin/js/quoteslide.js"></script>
Vous pouvez télécharger ces deux fichiers ici : quoteslide.zip.
Ci-dessous, le contenu du fichier quoteslide.css commenté le plus possible. Vous pouvez vous en inspirer. Veuillez laisser cependant les références à ses origines et à mon site SVP.
/* D'après le tutoriel trouvé ici : */
/* https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp */
/* Adaptations, ajout de la barre de progression Jean-Denis https://adhoc.71site.fr avril 2021 */
/* Quoteslideshow "container" */
.quoteslideshow-container {
position: relative;
background: rgba(0,0,0,.6); /*couleur fond*/
border-radius: 10px 10px 0 0; /*arrondis haut*/
}
/* Citations */
.mesCitations {
display: none;
padding: 30px 80px; /*marges intérieures*/
text-align: center; /*alignement*/
}
/* Boutons de navigation */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%; /*position*/
width: auto;
margin-top: -30px; /*marge extérieure haute*/
padding: 16px; /*marges intérieures*/
color: #111; /*couleur*/
font-weight: bold; /*gras police*/
font-size: 20px; /*taille police*/
border-radius: 3px; /*arrondis*/
user-select: none;
background: rgba(255,255,255,.6); /*couleur fond*/
}
.prev {left:0; margin-left:1%;} /*position et marge à gauche*/
.next {right:0; margin-right:1%;} /*position et marge à droite*/
/* Boutons de navigation au survol */
.prev:hover, .next:hover {
background-color: rgba(120,120,120,0.8); /*couleur fond*/
color: #fff; /*couleur*/
}
/* Barre de progression */
.barre-progression {
width: 0; /* !!! IMPORTANT : Laisser à 0 !!! */
height: 1px; /*hauteur*/
background-color: rgba(102, 158, 185, .5) /*couleur : #669EB9*/;
}
/* Bulles de pagination "container" */
.dot-container {
text-align: center; /*alignement*/
padding: 10px; /*marges intérieures*/
background: rgba(0,0,0,0.8); /*couleur fond*/
border-radius: 0 0 10px 10px; /*arrondis bas*/
border-bottom: 2px solid #669EB9; /*bordure : épaisseur nature couleur*/
}
/* Bulles de pagination */
.dot {
cursor: pointer;
height: 15px; /*hauteur*/
width: 15px; /*largeur*/
margin: 0 2px; /*marges extérieures*/
background-color: #d6af84; /*couleur*/
border-radius: 50%; /*arrondis*/
display: inline-block;
transition: background-color 0.2s ease; /*transition : fond temps type*/
}
/* Bulles de pagination active */
.dot.active {background-color: #669EB9;} /*couleur*/
/* Bulles de pagination au survol */
.dot:hover {background-color: #00FFFF;} /*couleur*/
/* Éléments de la citation */
.titre {
font-weight: bold; /*gras police*/
font-size: 24px; /*taille police*/
color:#669EB9; /*couleur*/
text-align:left; /*alignement*/
padding-left:20px; /*marge intérieure gauche*/
}
.citation {
font-style: italic;
text-align:justify; /*alignement*/
text-justify: auto;
color:inherit; /*couleur*/
}
.signature {
color: #d6af84; /*couleur*/
}
Ci-dessous, le contenu du fichier quoteslide.js commenté le plus possible. Vous pouvez vous en inspirer. Veuillez laisser cependant les références à ses origines et à mon site SVP.
/* D'après le tutoriel trouvé ici : */
/* https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp */
/* Adaptations, ajout de la barre de progression Jean-Denis https://adhoc.71site.fr avril 2021 */
var progressionWidth = 0; // mise à zéro progression
var slideIndex = 1;
showSlides(slideIndex); // slideIndex début
function plusSlides(n) {
progressionWidth = 0; // remise à zéro progression
showSlides(slideIndex += n); // slideIndex prev ou next
}
function currentSlide(n) {
progressionWidth = 0; // remise à zéro progression
showSlides(slideIndex = n); // slideIndex clic sur "dot"
}
function Progression() {
$(".barre-progression").width(progressionWidth + "%");
if(progressionWidth < 100) { // tant que %<100 augmentation d'1/100
progressionWidth += 1;
} else { // sinon slideIndex suivant et remise à zéro progression
showSlides(slideIndex += 1);
progressionWidth = 0;
}
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mesCitations");
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";
}
window.onload = function () { setInterval(Progression, 70);} // régler durée affichage en équivalent 1/10ème de seconde (ex: 50 = 5 secondes)
A priori, la seule modification à faire sur ce fichier (sauf si vous me proposez une solution Play-Pause... ) est de paramétrer la durée d'affichage des "slides" texte dans la dernière ligne :
setInterval(Progression, 70)
Vous entrez la valeur souhaitée en dixièmes de seconde (par exemple 50 = 5 secondes).
Enfin, ci-dessous, le code html à placer où vous souhaitez que le slider s'affiche. C'est un code simplifié.... juste pour en montrer la structure.
<div class="quoteslideshow-container">
<div class="mesCitations" style="display: none;">
<p class="titre">Titre 1</p>
<p class="citation">Contenu 1</p>
<p class="citation"><img alt="mon_image" src="images/mon_image.gif.png" style="border:0px solid;margin:0px;width:20%;" /></p>
<p class="signature">Signature 1</p>
</div><!-- fin mesCitations -->
<div class="mesCitations" style="display: none;">
<p class="titre">Titre 2</p>
<p class="citation">Contenu 2</p>
<p class="signature">Signature 2</p>
</div><!-- fin mesCitations -->
<div class="mesCitations" style="display: none;">
<p class="titre">Titre 3</p>
<p class="citation">Contenu 3</p>
<p class="signature">Signature 3</p>
</div><!-- fin mesCitations -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="barre-progression">
</div>
</div><!-- fin quoteslideshow-container -->
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div><!-- fin dot-container -->
Il vous faudra autant de blocs [div class="mesCitations" style="display: none;"]...[/div][!-- fin mesCitations --] que de "slides" souhaités.
ATTENTION !! le premier "slide" doit s'ouvrir ainsi : [div class="mesCitations" style="display: block;"]Vous ajoutez dans la partie [div class="dot-container"]...[/div][!-- fin dot-container --] autant de ligne numérotées [span class="dot" onclick="currentSlide(N)"][/span] que nécessaire en conservant la première ligne ainsi [span class="dot active" onclick="currentSlide(1)"][/span].
Vous gérez le contenu comme vous l'entendez en utilisant (ou pas...) les "class" titre, citation, signature ... ou bien en en créant d'autres...
NB : une astuce fort utile afin de gérer le contenu plus facilement dans l'éditeur de texte Whizziwig d'adHoc (rappel : les autres éditeurs ne respecteront pas votre code, ils sont donc à proscrire pour ce procédé !) :
Pour voir et travailler dans l'éditeur de texte tous les "slides" : les ouvrir, dans le code source, provisoirement ainsi : [div class="mesCitations" style="display: block;"]. Puis quand votre travail est prêt, à part pour le premier "slide", replacer, dans le code source, les autres ouvertures de balises [div class="mesCitations" style="display: none;"]
Vous pouvez utiliser d'autres caractères que ❮ et ❯ pour les flèches de navigation. Les polices de caractères standards proposent d'autres solutions : < > , « » , ◄► ... Il serait possible aussi d'utiliser une police d'icône Font Awesome ( https://fontawesome.com/ ) par exemple...
Me contacter sur le forum de ce site ou directement pour toute question ou aide pour utiliser ce procédé, ou bien pour me proposer une amélioration bienvenue....