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.
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.
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.
Vos commentaires
# Le 3 juin 2009 à 18:48, par arno2
En réponse à : Raccourci typographique pour lancer une popup.
Je suis un vrai débutant de spip et j’ai suivi le tuto pas à pas sur spip contrib pour ouvrir une fenêtre en pop up sur un autre article. Ca marche, la fenêtre s’ouvre au centre comme prévu à la taille indiquée.
1. Ce que je ne sais pas faire c’est épurer le fichier article.html et en enlever le header, le footer, les menus...etc (en fait, je ne sais pas quoi enlever pour ne garder que le corps de l’article dans le fichier article2.html
2. J’ignore comment affecter aux articles destinés aux popups le mot-clé « popup ». Quelle est la procédure ?
3. Comment modifier la programmation de mon fichier article.html pour qu’il n’affiche que les articles qui n’ont pas le mot-clé « popup ». S’il faut rajouter une condition au début de la boucle : SI l’article à le mot clé popup, ALORS il s’affiche avec le fichier squelette article2.html, SINON il s’affiche avec les instructions ci-dessous.
Si c’est la syntaxe de cette condition :
<BOUCLE_choix(ARTICLES){id_article}{titre_mot=popup}>
<INCLURE{fond=article2}{id_article}>
</BOUCLE_choix>
<BOUCLE_article_normal(ARTICLES) {id_article}>
... le contenu habituel de ton fichier article.html
</BOUCLE_articles_normal>
<//B_choix>
où, à quel endroit dans quel fichier la placer ?
Idéalement, je souhaite connaître le développement suivre pour faire des popup avec une ou des images (et pas seulement des articles).
J’essaie d’être le plus clair possible. Veuillez m’excuser si mes explications peuvent vous sembler confuses !
En vous remerciant d’avance pour votre aide.
Arno
Répondre à ce message
# Le 27 février 2009 à 19:47, par nomitruk
En réponse à : Raccourci typographique pour lancer une popup.
Bonjour,
J’utilise SPIP 2.0
Merci pour ce script simple et efficace.
J’aimerais m’en servir pour ouvrir des adresses html...
Quelqu’un a une idée ?
Merci d’avance
Répondre à ce message
# Le 24 août 2007 à 18:12, par Eric Luyckx
En réponse à : Adaptation du script
Hello, super idée…
… mais elle ne fonctionnait pas chez moi
je l’ai transformée avec le Java de Dreamweaver et ça fonctionne. voici les sources
function MM_openBrWindow(theURL,winName,features) { //v2.0window.open(theURL,winName,features);
}
dans le « head » de l’hôte, et
<BOUCLE_n(DOCUMENTS){id_document=#ENV{id}}{mode=document}><a href="#" title="Ouvrir #TITRE dans une nouvelle fenêtre" onclick="MM_openBrWindow('#URL_DOCUMENT','','width=#ENV{width},height=#ENV{height}')">#LOGO_DOCUMENT</a>
</BOUCLE_n>
dans le modèle (pour un popup sur les documents)
à+ éric
# Le 7 novembre 2007 à 12:39, par ?
En réponse à : java javascript
pourriez-vous dire javascript et réserver Java à l’autre langage... ils n’ont rien à voir et cela rend cela confus pour chacun.
Répondre à ce message
# Le 19 juillet 2007 à 08:46, par Magali
En réponse à : comment éditer le squelette ?
Bonjour et merci pour cette contrib
Je ne sais pas comment éditer le squelette popup.html. J’ai seulement intégré ce qui a été indiqué sur la zone html.
Quand je mets le raccourci typo dans un article, une nouvelle fenêtre s’ouvre en effet, mais pas en popup, c’est la page entière dudit article qui s’ouvre, plein page (squelette article)
Faut-il absolument intégrer le mot clé pour déterminer l’ouverture de popup.html ? Ce qui expliquerai que mon 1er test n’ouvre pas le squelette popup mais article, ou est-ce parce que dans ma page popup.html je n’ai pas su éditer autre chose que le code cité dans la contrib ?
Merci
Répondre à ce message
# Le 3 décembre 2006 à 22:14, par Fil
En réponse à : Raccourci typographique pour lancer une popup.
Jolie utilisation des modèles :)
Pour info, SPIP 1.9.2 permettra l’insertion de javascript dans les contenus ainsi que dans les modèles.
# Le 10 décembre 2006 à 00:19, par Philippe Multeau
En réponse à : Autre utilisation des modèles
Merci !
Je me suis aperçu depuis que ma contrib peut parfaitement s’adapter à des documents vidéos ou Flash ou a des images, et pas seulement à des articles. Du coup, j’ai enfin un portefolio de photos et de vidéos dont les vignettes ouvrent l’original en fenêtre popup. Coooool....
En fait, en adaptant le principe, il devient simple de lancer des scripts java depuis un article, avec juste un petit raccourci typo (ce qui est bien pratique pour les rédacteurs allergiques à toutes lignes de code informatique).
Bref, je kiffe grave sur les perspectives qu’ouvre cette nouvelle version de SPIP.
Cordialement.
# Le 24 janvier 2007 à 23:42, par Patousky
En réponse à : Autre utilisation des modèles
Bonjour,
Apparamment c’est possible aussi pour une image ou un document !
Merci de nous renseigner sur la méthode SVP.
# Le 27 janvier 2007 à 15:11, par Philippe Multeau
En réponse à : Adaptation de la contrib à d’autres documents
Salut, merci de l’intéret porté à ma contrib, pourtant toute simple et pas révolutionnaire...
Pour l’adapter à tout autre type de document qu’un article, c’est tout bête. On ne change pas le javascript, on se contente de créer un nouveau modèle adapté au type de document à afficher. Tu utilises la même syntaxe que dans un squelette pour afficher un document, sauf que tu la mets dans un fichier à part (un modèle) et lui donnes en plus l’ordre de s’afficher en utilisant la fonction javascript.
Une fois qu’on a compris ce principe, on peut afficher n’importe quel document supporté par Spip dans une fenêtre popup. Un exemple ?
Voici, par exemple, comment afficher en popup une vidéo au format flash (swf) :
1) on créé un nouveau modèle qu’on appelle vidéo.html
Tu enregistres ce fichier dans le sous dossier MODELES de ton répertoire SQUELETTES
2) Dans l’article qui doit contenir le lien popup vers la vidéo, tu importes ton fichier swf dans la colonne « ajouter un document ».
3) Dans le texte de l’article, à l’endroit ou tu veux le lien popup vers la vidéo, tu écris
<video234|width=341|height=294>- 234 correspond au numéro qu’a attribué Spip à ton document quand tu l’as importé
- width et height correspondent aux dimensions de ta vidéo
Voila. Pour afficher d’autres types de documents, tu modifies le modèles en changeant le type d’extension.
Cordialement.
# Le 27 mai 2007 à 20:33, par Nicolas
En réponse à : Adaptation de la contrib à un lien extérieur ?
Bonjour.
Je suis plutôt novice en matière de SPIP.
J’ai trouvé cette contrib très intéressante et je souhaiterais l’utiliser non pas pour un article de mon site, mais pour une url. Est ce possible et si oui comment ?
Merci
Nicolas
# Le 25 juin 2007 à 15:40, par Macsou
En réponse à : Adaptation de la contrib à d’autres documents
Bonjour,
J’apprécie votre contribution qui fonctionne à merveille avec un popup texte (reprise d’article). Génial et encore merci.
En revanche, je rencontre une difficulté en essayant de l’adapter à d’autres documents, en l’occurence une vidéo en swf (pour reprendre votre exemple). Le code du modèle video.html que vous nous donnez ne fonctionne pas. J’ai changé #URL_ARTICLE (devant href=) par #URL_DOCUMENT (pensant à une erreur), mais dans ce cas si j’ouvre bien une nouvelle fenêtre avec mon film, la taille de la fenêtre n’est absolument pas prise en compte et pas centrer.
Pouvez-vous m’éclairer ?
Merci
# Le 25 juin 2007 à 21:35, par ?
En réponse à : Adaptation de la contrib à d’autres documents
Ouh la... ça fait lontemps que je ne me suis pas penché sur cette contrib. Elle fonctionne parfaitement sur mon site ici. Mais peut-être ais-je fait une erreur de syntaxe dans mes explications. Je regarde ça ce week-end, si j’ai le temps. Promis.
Si d’ici là tu arrives à résoudre ton problème, fais moi signe.
Cordialement.
Répondre à ce message
# Le 30 avril 2007 à 19:16, par ?
En réponse à : Raccourci typographique pour lancer une popup.
Bonjour,
Merci pour cette contrib très intéressante. Ceci dit moi aussi j’ai le même problème de pop-up qui s’ouvre avec la mise en forme par défaut de mon article. Je croyais avoir fait les choses correctement mais qq chose m’échappe.
Particularité de mon besoin, je souhaite que cette pop-up s’acitive non pas depuis un article mais une rubrique. J’ai bien intégré le script au-dessus du de ma rubrique. Puis j’ai créé comme indiqué un article2.hml mais ça ne fonctionne pas. Sans doute cela vient du fait que j’ai supprimé toute référence aux articles dans ma page rubrique. Je n’en veux pas puisqu’ils s’affichent dans le menu, inutile d’avoir des doublons.
Pour voir ce que ça donne il suffit de cliquer là . Si quelqu’un peut m’aider, j’apprécierai car je tourne en rond depuis un moment.
# Le 1er mai 2007 à 13:47, par Thierry
En réponse à : Raccourci typographique pour lancer une popup.
En fait c’est presque bon et j’ai réglé mon problème tout seul.
J’avais oublié de mettre la balise
<BOUCLE_article_popup(ARTICLES) {id_article}>
contenu de l'article
</BOUCLE_article_popup>
dans ma fenêtre pop-up, évidemment ça marche beaucoup mieux maintenant.
Reste que la fonction « scrollbars=auto » ne fonctionne pas. Pourquoi ? Mystère !
Répondre à ce message
# Le 10 avril 2007 à 18:27, par jfdonze
En réponse à : Raccourci typographique pour lancer une popup.
J’ai bien suivi les trois étapes indiquée, et quelque soit mon application à les mettre ne place, la fenêtre popup s’ouvre avec la bonne dimension, mais sans tenir compte du choix article2.html que j’ai épuré comme convenu. La fenêtre popup s’ouvre avec l’entête et les liens déroulants .
J’ai donc fait par défaut une page grenoble.html qui ne s’ouvre pas en popup.
J’aimerai comprendre…
# Le 10 avril 2007 à 19:40, par Philippe Multeau
En réponse à : Raccourci typographique pour lancer une popup.
Curieux...
Une suggestion : as-tu bien mis les deux lignes de fermeture de condition à la toute fin du fichier article.html ? Je te dis ça car j’ai déja fait l’erreur moi-même, et du coup le choix ne se faisait pas.
Je n’ai pas trop d’autre idée, il faudrait que tu m’envoies tes fichiers article.html, article2.html et popup.html pour que je voie si tu as oublié quelquechose.
Cordialement.
Philippe.
# Le 10 avril 2007 à 22:35, par jfdonze
En réponse à : Raccourci typographique pour lancer une popup.
Tout fonctionne sans problème, il suffit de ne pas oublier de configurer les mots clés dans configuration et ensuite d’inclure popup dans ces dits mots clés. Merci Philippe Multeau !
jfdonze
Répondre à ce message
# Le 4 mars 2007 à 01:17, par Philippe Multeau
En réponse à : Mise à jour.
Bonjour,
Je viens de mettre à jour ma contrib. En effet, une petite erreur de syntaxe empéchait le javascript de se lancer dans Internet Explorer PC, alors que tout marchait bien sur les autres navigateurs, qu’ils soient Mac ou PC.
Désormais, cette contrib fonctionne parfaitement partout !
Cordialement.
Répondre à ce message
# Le 9 janvier 2007 à 10:59, par igedmedia
En réponse à : Raccourci typographique pour lancer une popup.
Bonjour et bravo pour cette contrib, ça fonctionne nickel.
Cépendant j’aimerais avoir un squellette different pour le popup.
J’ai donc essayé avec le systeme des mots clés mais pas de bons résultats.
Peux tu m’ indiquer la marche à suivre ????
Merci par avance
# Le 13 janvier 2007 à 10:30, par Philippe Multeau
En réponse à : Raccourci typographique pour lancer une popup.
3 étapes à suivre :
1) Il faut que tu te fabriques un ossature spécifique pour les articles destinés aux popup, appelée article2.html (par exemple). Il te suffit de recopier ton fichier article.html et de l’épurer en enlevant le header, le footer, les menus...etc. Bref, tu ne gardes que les instructions d’affichage de l’article lui même.
2) Tu affecte aux articles destinés aux popups le mot-clé « popup ».
3) Tu modifies la programmation de ton fichier article.html pour qu’il n’affiche que les articles qui n’ont pas le mot-clé « popup ». C’est le plus compliqué de l’histoire. En fait, il faut rajouter une condition au début de la boucle : SI l’article à le mot clé popup, ALORS il s’affiche avec le fichier squelette article2.html, SINON il s’affiche avec les instructions ci-dessous.
Syntaxe de la condition :
Voila, en espérant t’avoir aidé.
Cordialement.
Répondre à ce message