OverLIB dans SPIP

Les informations ci-dessous s’adressent bien-sûr aux connaisseurs de OverLIB ! Et des utilisateurs avertis de SPIP !

Visiter le site ... OverLIB

ATTENTION
À l’heure où j’écris ces lignes, je ne prétend pas avoir pratiqué tous les tests sur les astuces présentées. A vous de compléter en m’informant de vos remarques. Merci par avance !

Je ne décrirais ici que succintement ce qu’est Overlib (voir le site de l’auteur de cette bibliothèque javascript, ci-dessous).
Le but de cette fonctionnalité est de faire apparaitre un popup (une balise <div> en fait) au survol - ou clic ! - d’un objet ou lien. Typiquement vient remplacer les classiques tooltip introduit par la propirété "title" d’une image ou d’un lien. Ce popup est très largement modulable dans sa forme et contenu. Mais comme dit plus haut c’est du javascript et donc la syntaxe ne supportera pas les apostrophes simple quote.

Je vais ici vous confier les astuces, largement utilisées dans koakidi.com. Astuces que je n’ai pas eu à aller chercher bien loin, vu que SPIP nous offre tout ce qu’il faut !

Passer des chaîne-textes .. de traduction

En exemple, les ’raccourcis’ à droite de cette page. (liens vers Forums, newsletter, rss ...). Le texte du popup est une chaine typique dans spip : <:mon_texte_a_traduire:>. Cette dernière peut contenir des apostrophes à échapper.
La solution ... la balise [(#REM)] à laquelle on passe les filtres techniques, ainsi :

J’ai, pour l’exemple, épuré le code des éléments introduisant l’image etc...

Passer une balise SPIP

Autre cas de figure, on souhaite passer un #DESCRIPTIF (ou autre balise SPIP) en guise de texte du popup.

En exemple, le menu principal de koakidi.com, montrant un popup en son pied, qui détaille le contenu de la rubrique survolée.
Cet empillage de filtres semble nécessaire afin d’extraire et échapper tout ce que javascript ne peut supporter !

Appeler une page ...

Exemple ? Sur cette page ! En tête de page vous aurez remarqué la petite silhouette ("ouvrir la fiche auteur") à côté de « Scoty ». Un clic sur cette image va ouvrir un popup "overlib" qui appelle le squelette : fiche_auteur.html (dérivé du classique auteur.html).
J’obtiens ceci grâce à une fonction javascript :
OLiframeContent()
trouvée sur Overlibmws (qui propose bien d’autres fonctionnalitées). Cette dernière construit un <iframe> dans le popup.

L’appel dans le squelette article.html :

La fonction javascript :

Placer cette fonction dans votre fichier [.js] appellé par tous vos squelettes.

Le fichier html introduit, ici fiche_auteur.html, ne contient rien de particulier. Ni plus ni moins qu’un squelette standard. A ceci près qu’il faudrait je pense, ne pas trop charger le code, pour éviter d’exploser le <div id="overDiv"> d’OverLIB. Vous le verrez bien, de toute façons !

Le fichier fiche_auteur.html, en exemple épuré ... à peine !

Pour vos commentaires, remarques, écrivez à Scoty ou sur le Forum.

Accueil
L'auteur ...
Ecrire à Hugues
Plan du site
... quelques liens !
Catalogue
:::  koakidi.com © 2002-2017 :::  Crédits  :::  spip   koak2.0  :::  ico 1037738  :::  ff  :::