Cette page permet d'expliquer le fonctionnement de l'affichage Parallax, avec un peu de CSS et d'huile de coude.
Affichage de la première image (one1)
Attention: cette page a pour seul but de montrer la possibilité OnePage (effet Parallax) avec des images de fond qui changent en fonction du déplacement dans l'article (scrolling).
aller à la 2éme image (mais le mieux est de "scroller") aller directement à l'explication (sans voir l'effet).
Avec "l'obligation" du https, il convient de trouver un module/widget météo fonctionnant lui aussi en https.
En effet, le widget météo france ne fonctionne pas en https: il retourne des erreurs "mixed content" et vous retire l'accès sécurisé à votre site.
05/05/2017: le widget est devenu compatible https, même s'il affiche toujours un message "mixed content".06/05/2017 : et non ! ce n'est toujours pas compatible https...(voir page A propos qui perd son cadenas...).
03/07/2017: après de longues discussions https://forum.joomla.fr/showthread.php?221374-Article-non-s%C3%A9curis%C3%A9-en-HTTPS-avec-la-vignette-M%C3%A9t%C3%A9o-France, Yann (alias Daneel) a fourni un module permettant de corriger ce problème en attendant la correction officielle de MétéoFrance (voir page A propos qui a retrouvé son cadenas...)ainsi qu'un plugin que l'on peut intégrer dans n'importe quel article comme suit:
{meteofrance=95282|paysage}
Si, toutefois, vous avez des problèmes d'erreur comme suit, lisez la suite de cet article....
Donc, vite, cherchons autre chose....
J'ai, naturellement, dévéloppé mon propre module météo, simple météo, pour pallier à ce problème, en utilisant les informations de l'api Yahoo weather. Un exemple est affiché à droite de l'écran.
J'ai testé aussi pas mal de widget dont voici le résultat. J'espère juste que savoir la météo à Gouzangrez vous intéresse parce que cela va être le sujet.
Attention: la qualité du serveur météo peut impacter la vitesse d'affichage de votre page, voire même la bloquer....
Le module mod_WuWeather.
Le module Wu_weather https://extensions.joomla.org/extensions/extension/maps-a-weather/weather/wuweather/, que vous pouvez voir sur la droite est simple à paramétrer.
<p ">Attention : ce module en version 1.1 ne fonctionne pas en Joomla 3.8.x, il faut charger la version 1.6 . Cette nouvelle version 1.6 vous fera perdre le https à cause de la ligne 26 du fichier tmpl/default.php qui appelle src="http://icons.... Il suffit de la modifier en src="//icons...pour enfin retrouver le https avec ce module.Il faut s'inscrire sur wunderground, http://www.wunderground.com/weather/api, pour récupérer une clé.
La liste des différents icônes météo est visible https://www.wunderground.com/weather/api/d/docs?d=resources/icon-sets
Le module SP Weather.
JoomShaper propose un module simple SP Weather https://www.joomshaper.com/joomla-extensions/sp-weather. Il est, lui aussi, basé sur l'api yahoo weather.
Attention: depuis le 1er Août, ce module ne fonctionne plus en https à cause d'images qui ne sont plus disponibles qu'en http..., donc, je l'ai désactivé temporairement...corrigé le 1er septembre
Pour l'instant, la traduction du module n'est pas disponible, donc, cliquez sur le lien ci-dessous pour en récupérer ma version. Copiez le fichier fr-FR.mod_sp_weather.txt en fr-FR.mod_sp_weather.ini dans votre répertoire language/fr-FR, vous obtiendrez l'affichage comme le mien (voir à droite).
CG_DOWNLOAD_NOT_ALLOWED .
Affichage d'une nouvelle image (one2)
Le widget InfoClimat
Beaucoup plus complet, trop peut-être, ce widget se paramètre sur le site d'InfoClimat https://www.infoclimat.fr/.
Il faut passer par le menu Prévision, entrer la ville pour laquelle on souhaite avoir les informations et trouver en bas de page le lien "ces prévisions météo sur votre site".
Seul regret, le manque d'options sur l'affichage.
Remarque: pour les développeurs, il est possible de récupérer les informations météo en format XML, JSON, CSB/XLS.
Autre remarque: bien qu'il soit compatible https, ce widget génère une erreur "mixed content" à cause de l'appel à une police en http. Cette erreur est visible uniquement sur la console de votre explorateur, mais ne fait pas perdre le https.
Le widget MyMeteo.
Le widget MyMeteo se paramètre à l'adresse http://www.my-meteo.com/meteo-webmaster.html.
Son paramétrage est simple, l'affichage est correcte. Le nombre d'options d'affichage est intéressant.
Le seul "détail" vient du choix de la ville. En effet, impossible d'y trouver Gouzangrez, ainsi que tous les petits villages alentours.
Affichage d'une nouvelle image (one3)
Comment cela marche ?
Définition au niveau du CSS
Afin de simplifier la mise en place de ce test, j'utilise la plugin UP de Lomart, et plus précisément son action addCssHead (https://up.lomart.fr/demo/action-addcsshead) qui permet d'ajouter un peu de CSS dans un article sans avoir à modifier le CSS du template.
{up addCssHead=.one1 [background-attachment: fixed;background-image: url('/images/onepage/slide-1-maison.jpg');background-size: cover; background-position: center center;background-repeat: no-repeat;] .one2 [background-attachment: fixed;background-image: url('/images/onepage/accueil-slide-2.jpg');background-size: cover; background-position: center center; background-repeat: no-repeat;] .one3 [background-attachment: fixed;background-image: url('/images/onepage/accueil-slide-3-min.jpg');background-size: cover; background-position: center center; background-repeat: no-repeat;] .one1 p [background:#ded5d5;color:#4c4949;text-align: justify;opacity: 0.8;].one1 h2 [background:#444;color:white;ext-align: justify;opacity: 0.8;] .one2 p [background:#c7c7ca;color:#4e413c;text-align: justify;opacity: 0.8;] .one2 h2 [background:#444;color:white;text-align: justify;opacity: 0.8;].one3 p [background:blue;color:white;text-align: justify;opacity: 0.8;font-size:140%] .one3 h2 [background:#444;color:white;text-align: justify;opacity: 0.8;].one3 a[color:white] a.cg_anchor [display: block;position: relative;top: -100px;visibility: hidden;]}
}
Rappel sur le fonctionnement de addCssHead: il faut remplacer {} par [] au niveau de la définition de vos classes CSS.
Au niveau de l'article
Au niveau de l'article, il faut créer plusieurs sections séparées par des <div>.
Ainsi, pour notre exemple, nous avons la 1ère partie de l'article qui est définie comme suit <div class="one1">article sur la météo....</div>, la 2éme partie <div class="one2">suite de l'article avec une autre image....</div> et finalament la 3éme partie <div class="one3">explication du fonctionnement</div>
Remarque: j'ai utilisé des "ancres" pour aller directement d'une image à l'autre ou directement à cette explication.
Attention à vos images de fond, ne suivez pas mon exemple car c'est assez illisile......
© 2024 ConseilGouz