SLIDER / DIAPORAMA
Un slider/diaporama (nommé aussi "carrousel"ou "slider" ou "slideshow" ) est un module intégré à un blog ou une page web qui permet le défilement dynamique de plusieurs images ("slides").. Il se trouve soit sur la page d’accueil en dessous de la barre du menu ("bannière"), soit dans un article comme illustration ou de présentation de photos ("diaporama". Il peut être composé de 2, 3, 4 ou plus... images qui s’affichent les unes après les autres, soit automatiquement (après un délai fixe), soit manuellement en cliquant sur un bouton.Pour afficher un diaporama , il faut avoir du "code HTML..." à intégrer dans le blog en mode HTML. Une recherche sur Internet montre qu'il existe de très nombreux "codes" pour réaliser un slider/diaporama mais quasiment tous nécessitent de modifier le CSS ou Template, ce qui n'est pas aisé à faire dans un blog avec Blogger, surtout pour un non spécialiste....
Afin d'avoir un code simple à intégrer, nous ne proposerons que du code formant un seul "bloc" s'intégrant en totalité dans un article de blog ou dans un gadget HTML, sans modifier le CSS/Template d'origine du blog. De plus, aucun diaporama utilise la technologie Flash, dépassée et, désormais, non reconnue par les navigateurs.
Ce code, à intégrer en mode HTML, est plus ou moins long et complexe à configurer selon son graphisme et ses possibilités techniques. Nous présentons donc les sliders en fonction de leur difficulté de configuration : longueur du code et nombre et difficulté des modifications à réaliser
Dans cet article, il s'agit de sliders assez perfectionnés
Toutefois
il faudra travailler en mode html (copier / coller du code) puis le modifier pour insérer les liens URL vers vos photos
A savoir :
- il existe des logiciels gratuits (Wov Sider / Hi Slider) pour concevoir facilement des sliders à mettre en ligne sur un espace web. Ensuite, après la mise en ligne, ils permettent aussi, de les intégrer dans un blog, le plus souvent, il faut modifier le code Html du "modèle". Nous pensons que cela a peu d'intérêt puisque le slider est déjà visible en ligne sur le site web, alors pourquoi avoir 2 possibilités pour les visualiser ?
-Ici, nous proposons un slider intégré dans l'article du blog : il suffit de lui indiquer où sont stockées en ligne les photos.
1-PRINCIPE
-L'idéal : avoir des photos stockées sur un serveur distant, de préférence adaptées au web (taille, résolution, définition). Il est préférable que les images soient de même taille , même si certains sliders ajustent automatiquement les photos. Dans nos démos perso les fichiers sont stockées chez Free qui le permet gratuitement, mais il existe d'autres possibilités...
-cas des photos sur Google Drive : En principe, il n'est pas possible d'utiliser des photos stockées sur "Google Photos ou sur Drive" (ou équivalent) car ce stockage ne permet d'obtenir l'URL "classique de la photo d'origine en "nom.jpg", mais propose une URL de partage de type
https://photos.app.goo.gl/p8fKHMk9ENLxAdoP6
ou
https://drive.google.com/file/d/1D1rvWaCvv4BMuMCGpW1RLliLFmTVaL38/view?usp=sharing
Ces URL permettent le partage mais ne sont pas utilisables pour être intégrées dans du code html classique.
Mais dans l'URL de partage fourni, se trouve l'identifiant du fichier en /fluo jaune/. Il suffit de le récupérer et de créer une nouvelle URL basée sur :
https://drive.google.com/uc?id=identifiant
https://drive.google.com/uc?export=view&id=identifiant
https://drive.google.com/uc?export=download&id=identifiant
=>En principe ces 3 URL fonctionnent
=> pour le faire automatiquement aller sur https://google-drive-direct-link.blogspot.com/
-Intégrer en mode html du "code" (un simple copier/coller) dans un article ou dans un gadget "Html".
-Puis, modifier dans le code les adresses URL des photos en indiquant l'adresse de vos photos de type :
Vous devez retrouver la partie du code correspondant à l'URL des photos et le changer
<img src="http://monsite.free.fr/slider1/1.jpg" />
dans ce code, il faudra remplacer l' URL en rouge par l'URL de vos images ...
-Éventuellement, ajuster quelques valeurs pour configurer le diaporama : le plus souvent la taille du slider en fonction de celle des photos et la vitesse de déroulement
2-CREER VOS SLIDERS
Nous proposons dans cet article 6 beaux Sliders assez simples à utiliser:
- uniquement les adresses URL des photos à indiquer dans le code
- Rien à changer dans le "modèle" ou template du blog.
Nota : si cela vous semble trop complexe, nous proposons aussi des sliders plus simples dans l'aspect et aussi dans la configuration :
-Les code des sliders sont uniquement disponibles sur le site du concepteur : https://project.dimpost.com/ & https://bloggerslider.dascodes.com/ que nous remercions de le mettre à disposition.
Nota : si cela vous semble trop complexe, nous proposons aussi des sliders plus simples dans l'aspect et aussi dans la configuration :
-Les code des sliders sont uniquement disponibles sur le site du concepteur : https://project.dimpost.com/ & https://bloggerslider.dascodes.com/ que nous remercions de le mettre à disposition.
-Nous proposons 6 exemples en "démo" réalisés avec les mêmes photos ( Photos retaillées en 800/600 maxi et vignettes en 200/150) . Nota, les photos peuvent être de taille différente mais nous le déconseillons car le résultat peut être décevant (testez !). Seule la dimension du slider a parfois été modifiée dans le code pour la taille des photos en 800/600
2-1 PREAMBULE :
Vos photos doivent être déjà être stockées sur un serveur distant :
-toutes de même taille (c'est plus joli) et adaptées au web
-si possible utiliser des noms courts et simples pour vos photos (pas d'accent, ni majuscules, ni symboles...), de même pour le nom du dossier .
Ex : les photos, nommées "1.jpg"... "2.jpg"..., sont situées dans un dossier nommé "slider1" à la racine du serveur.
-vous connaissez donc l'adresse de vos photos de type (chez Free) :
<img src="http://monsite.free.fr/slider1/1.jpg" />
2-2 MODIFICATIONS DU CODE
-Vous avez uniquement l'adresse URL de vos photos à indiquer après : <img src="......"/>
<img src="http://monsite.free.fr/slider1/1.jpg" />
-Eventuellement Indiquer ou non un titre via la balise : title=Mont saint Michel "
-Parfois, ajuster quelques valeurs pour configurer le diaporama : le plus souvent la taille du slider en fonction de celle des photos et la vitesse d'affichage des photos
-A vous de faire des test faire des tests
-A savoir : si à l'Enregistrement Blogger affiche ce message
Cliquer sur IGNORER
et refaire "Enregistrer" : Blogger acceptera l'enregistrement
2-3 OBTENIR LE CODE
Uniquement disponible sur le site et le blog du créateur (protégé par le droit d'auteur):
& https://bloggerslider.dascodes.com/
Les auteurs ont le plus souvent adopté le code qui vient à l'origine d'un autre site comme flexslider.woothemes.com, smashingmagazine, menucool.com, dev7studios.com/nivo-slider/
Pour obtenir le code cliquer sur le titre du slider
"Slider élégant e qui utilise simplement du CSS3 pur. Aucun Javascript ou jQuery n'est utilisé. Donc, ce slider est facile à personnaliser pour les débutants. Ce slider est créé par smashingmagazine. Ici, c'est une version adaptée pour Blogger "
=> Cliquer pour voir notre DEMO de ce pur CSS3 Image Slider pour Blogspot (Cycle Style)
Slider élégant qui utilise uniquement du CSS3 pur. Les photos glissent de haut en bas. Aucun Javascript ou jQuery n'est utilisé. Donc, ce slider est plus facile à personnaliser pour les débutants, en langage HTML de base et de peu de connaissances en CSS3.
nota: Taille modifiée en 800/600 dans le code
Slider élégant qui utilise uniquement du CSS3 pur. Les photos glissent de haut en bas. Aucun Javascript ou jQuery n'est utilisé. Donc, ce slider est plus facile à personnaliser pour les débutants, en langage HTML de base et de peu de connaissances en CSS3.
nota: Taille modifiée en 800/600 dans le code
- Add JavaScript Image Slider to Blogger Easily:
"Voici un slider en JavaScript sympa pour les blogueurs. Ce slider est créé par menucool.com . . Il a un effet de glissement assez agréable, et un temps de chargement moins long qu'avec du Javascript, pas de jQuery ou de flash utilisé. De plus, il est facilement personnalisable. Ici, il est adaptée pour Blogger."
=> Cliquer pour notre DEMO du JavaScript Image Slider
nota: Taille modifiée en 800/600 dans le code
très bel effet de glissement avec des divers effets avec un temps de chargement réduit, créé par Javascript, sans utilisation de jQuery ou de flash. De plus, il est facilement personnalisable.
- Nivo Slider - jQuery Image Slider For Blogger:
"Ce slider conçu pour un blog Blogger / BlogSpot est génial et magnifique. Il est fait avec jQuery. et bien sûr HTML et CSS, mais le principal effet de glissement est fait avec jQuery. Ce slider est créé par dev7studios.com/nivo-slider/. qui ont vraiment fait un excellent travail. Ce slider a été téléchargé plus de 20,00000 fois depuis leur site. Nous avons créé une version Blogger du slider "
Slider avec divers effets glissant des images
nota: Taille modifiée en 800/600 dans le code
"Ce slider jQuery avec vignettes' créé par a été personnalisé pour le rendre convivial pour les blogueurs dans le respect de wowslider."
- FlexSlider Basic Image Slider Widget for Blogger
"Il s'agit d'un slider jQuery réactif, simple mais étonnant, développé par woothemes.com. Il a quelques fonctionnalités vraiment intéressantes, la caractéristique la plus intéressante est qu'il est extrêmement réactif et léger; vous n'avez pas à régler largeur / hauteur des curseurs, même la largeur et la hauteur des images car tout s'ajuste t automatiquement. Ici, il est personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog blogger."
-hauteur et largeur des photos sont automatiquement ajustées
-Remplacer l'URL en rouge par l'URL de vos images
-Autres possibilités de modification en gris
controlNav: true,
directionNav: true,
easing:
easing: "swing",
slideshowSpeed:
slideshowSpeed: 3000,
animationSpeed:
animationSpeed: 600,
=> cliquer pour voir notre DEMO du FlexSlider Basic Image Slider Widget pour Blogger
Slider réactif : vous n'avez pas à vous inquiéter de la largeur / hauteur des photos, qui sont ajustées automatiquement . Les photos glissent latéralement. Ici, il est personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog.
Slider réactif : vous n'avez pas à vous inquiéter de la largeur / hauteur des photos, qui sont ajustées automatiquement . Les photos glissent latéralement. Ici, il est personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog.
- jQuery Carousel Slider for Blogger (FlexSlider)
"Il s'agit d'un slider carrousel jQuery réactif développé par flexslider.woothemes.com. Il a des fonctionnalités vraiment intéressantes, la fonctionnalité la plus intéressante est qu'il est entièrement réactif; vous n'avez pas à vous régler largeur / hauteur des curseurs et des images qui sont réglables automatiquement. Vous pouvez également définir le nombre minimum / maximum d'images à afficher selon la taille écran / navigateur. Donc dans l'ensemble, c'est un très beau slider carrousel, personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog blogger."
A savoir :
-Hauteur et largeur s'ajustent automatiquement
-Remplacer l'URL en rouge par l'URL de vos images
-autres modifications possibles :
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4
=> Cliquer pour voir notre DEMO du jQuery Carousel Slider pour Blogger (FlexSlider)
Ce mini Slider s'adapte a vos photos, vous n'avez pas à vous inquiéter de la largeur / hauteur ajustables automatiquement. Vous pouvez également définir le nombre minimum / maximum d'images à afficher. Il fait uniquement et simplement défiler vos photos
=> Cliquer pour voir notre DEMO du wow slider avec vignettes (Thumbnails)
Slider fonctionne avec affichage de vignettes.
Ici il semble impossible de modifier la taille du slider, côté vignette?Pour résoudre ce problème afficher des photos de taille plus petite
Slider fonctionne avec affichage de vignettes.
Ici il semble impossible de modifier la taille du slider, côté vignette?Pour résoudre ce problème afficher des photos de taille plus petite
4- AUTRES SLIDER
https://imageslidermaker.com/Vous concevez vous même votre slider en choisissant les divers élèments ou blocs qui vont le composer, puisle code est prêt
souvent, il faudra modifier le CSS...
https://taunieverett.com/image-slider-bloger/
https://georgialoustudios.zendesk.com/hc/en-us/articles/115007212627-Slider-setup-Anaise-Blogger-
