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

9 discussions

  • 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

  • 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

  • 1
    Eric Luyckx

    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.0
      window.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&ecirc;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

    • 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

  • 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

  • 6

    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.

    • 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.

    • Bonjour,

      Apparamment c’est possible aussi pour une image ou un document !
      Merci de nous renseigner sur la méthode SVP.

    • 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

      <html>
      <BOUCLE_n(DOCUMENTS){id_document=#ENV{id}}{mode=document} {extension IN swf}>
      <a href='#URL_ARTICLE'target='_blank'onClick='fenetreCen("#URL_DOCUMENT","#TITRE",#ENV{width},#ENV{height},"menubar=no,scrollbars=no,resizable=yes,statusbar=no");return false;'title="Ouvrir ´ #TITRE ª dans une nouvelle fen&ecirc;tre"><:voir_le_film:></a>
      </BOUCLE_n>
      </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.

    • Nicolas

      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

    • 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

    • 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

  • 1

    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.

    • Thierry

      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

  • 2
    jfdonze

    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…

    • Philippe Multeau

      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.

    • jfdonze

      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

  • 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

  • 1

    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

    • 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 :

      <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>

      Voila, en espérant t’avoir aidé.
      Cordialement.

    Répondre à ce message

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