Raccourci typographique pour lancer une popup.

Voici un raccourci typographique pour créer un lien vers une popup centrée.

Voici une petite contrib (ma première, je débute un peu) qui permet de lancer directement depuis un article une popup centrée, grace à un raccourci typographique, un modèle et un tout petit peu de javascript dans le squelette.

Je voulais pouvoir lancer des popup à partir de liens dans le corps d’un article.

Problematique

Spip n’autorise pas de javascript dans un article, et de toute façon je devais mettre au point un système simple qui évite aux rédacteurs du site de taper des instructions barbares auquelles ils ne comprennent rien. De plus, je souhaite rester 100% dynamique, c’est à dire que même la fenêtre popup doit pouvoir contenir un article issu de la base de donnée.

La solution trouvée


-  mettre l’instruction javascript dans le squelette article.html
-  creer un raccourci typographique grâce aux modèles de SPIP 1.9
-  lancer la fenêtre popup grace à ce raccourci typo
Voir en ligne un exemple de cette contribution.

Dans article.html

Vous devez placer cette fonction javascript juste avant la balise head.

<script language="JavaScript">
function fenetreCent(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
fencent=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
</script>

Dans le dossier squelettes/modeles

Créez tout d’abord, si ce n’est pas déjà fait, un dossier modeles dans votre répertoire squelettes. Puis, vous y créez un fichier popup.html dans lequel vous inscrivez votre raccourci typographique.

<html>
<BOUCLE_n(ARTICLES){id_article=#ENV{id}}>
<a href='#URL_ARTICLE' target='_blank' onClick='fenetreCent("#URL_ARTICLE","popup",#ENV{width},#ENV{height},"menubar=no,scrollbars=auto,statusbar=no"); return false;' title="Ouvrir « #TITRE » dans une nouvelle fen&ecirc;tre"> #TITRE </a>	
</BOUCLE_n>
</html>	

Dans votre article

A l’endroit ou vous voulez mettre le lien vers la fenêtre popup, vous inscrivez juste le raccourci typographique popup suivi du numéro de l’article à afficher et la taille de la fenêtre en largeur et hauteur.

Exemple :

<popup2|width=300|height=400>

-  Le chiffre 2 correspond au numéro de l’article à afficher dans la popup.
-  width=300 indique que la fenêtre aura 300 pixels de large.
-  height=400 indique que la fenêtre aura 400 pixels de haut.

Ce sera le titre de l’article qui s’affichera en lien.
Voila, c’est tout et ça marche.

Intégration au design de votre site

Je vous conseille de créer un squelette spécifique, plus épuré, pour les articles destinés à s’afficher dans la popup. La solution que j’ai adopté est un choix du squelette par mot clé « popup » assigné aux articles concernés. Je peux indiquer la marche à suivre en contib ici, s’il y a de la demande pour ça.

Cette contrib est basée sur du Javascript. Toutefois elle fonctionnera quand même sur les navigateurs qui ne lisent pas le java : les options de hauteur et de largeur ne seront simplement pas pris en compte et le lien ouvrira une nouvelle fenêtre plein écran.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom