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ê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.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |