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...
Faux Texte 1
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
Faux Texte 2
Ce texte a pour autre avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale. La méthode simpliste consistant à copier-coller un court texte plusieurs fois (« ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ») a l'inconvénient de ne pas permettre une juste appréciation typographique du résultat final.
Signature 2
Faux Texte 3
Il circule des centaines de versions différentes du Lorem ipsum, mais ce texte aurait originellement été tiré de l'ouvrage de Cicéron, De Finibus Bonorum et Malorum (Liber Primus, 32), texte populaire à cette époque, dont l'une des premières phrases est : « Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... » (« Il n'existe personne qui aime la souffrance pour elle-même, ni qui la recherche ni qui la veuille pour ce qu'elle est... »).
Signature 3
Faux Texte 4
Expert en utilisabilité des sites web et des logiciels, Jakob Nielsen souligne que l'une des limites de l'utilisation du faux-texte dans la conception de sites web est que ce texte n'étant jamais lu, il ne permet pas de vérifier sa lisibilité effective. La lecture à l'écran étant plus difficile, cet aspect est pourtant essentiel. Nielsen préconise donc l'utilisation de textes représentatifs plutôt que du lorem ipsum.
On peut aussi faire remarquer que les formules conçues avec du faux-texte ont tendance à sous-estimer l'espace nécessaire à une titraille immédiatement intelligible, ce qui oblige les rédactions à formuler ensuite des titres simplificateurs, voire inexacts, pour ne pas dépasser l'espace imparti.
Signature 4
Faux Texte 5
Contrairement à une idée répandue, le faux-texte ne donne même pas un aperçu réaliste du gris typographique, en particulier dans le cas des textes justifiés : en effet, les mots fictifs employés dans le faux-texte ne faisant évidemment pas partie des dictionnaires des logiciels de PAO, les programmes de césure ne peuvent pas effectuer leur travail habituel sur de tels textes. Par conséquent, l'interlettrage du faux-texte sera toujours quelque peu supérieur à ce qu'il aurait été avec un texte réel, qui présentera donc un aspect plus sombre et moins lisible que le faux-texte avec lequel le graphiste a effectué ses essais.
Un vrai texte pose aussi des problèmes de lisibilité spécifiques (noms propres, numéros de téléphone, retours à la ligne fréquents, composition des citations en italiques, intertitres de plus de deux lignes...) qu'on n'observe jamais dans le faux-texte.
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 :
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 :
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.
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.
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....
Date de création: 27/04/2021
Dernière modification: 15/04/2023
Page lue: 279 fois