SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Rédaction > Affichage dans texte > Lancer popup depuis article

Raccourci typographique pour lancer une popup.

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

dimanche 3 décembre 2006, par Philippe Multeau. Dernier ajout dimanche 4 mars 2007


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.


Mots-clés

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.


Répondre à cet article

  • Adaptation du script

    24 août 2007 18:12, par 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

    Répondre à ce message

    • java javascript 7 novembre 2007 12:39

      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

    Retour au début des forums

  • comment éditer le squelette ?

    19 juillet 2007 08:46, par Magali

    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

    Retour au début des forums

  • Raccourci typographique pour lancer une popup.

    3 décembre 2006 22:14, par Fil

    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.

    Répondre à ce message

    • Autre utilisation des modèles 10 décembre 2006 00:19, par Philippe Multeau

      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.

      Répondre à ce message

      • Autre utilisation des modèles 24 janvier 2007 23:42, par Patousky

        Bonjour,

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

        Répondre à ce message

        • Adaptation de la contrib à d’autres documents 27 janvier 2007 15:11, par Philippe Multeau

          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.

          Répondre à ce message

          • Adaptation de la contrib à un lien extérieur ? 27 mai 2007 20:33, par 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

            Répondre à ce message

          • Adaptation de la contrib à d’autres documents 25 juin 2007 15:40, par Macsou

            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

            Répondre à ce message

    Retour au début des forums

  • Raccourci typographique pour lancer une popup.

    30 avril 2007 19:16

    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.

    Répondre à ce message

    • Raccourci typographique pour lancer une popup. 1er mai 2007 13:47, par 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

    Retour au début des forums

  • Raccourci typographique pour lancer une popup.

    10 avril 2007 18:27, par 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…

    Voir en ligne : Historique suite

    Répondre à ce message

    • Raccourci typographique pour lancer une popup. 10 avril 2007 19:40, par 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.

      Répondre à ce message

    Retour au début des forums

  • Mise à jour.

    4 mars 2007 01:17, par Philippe Multeau

    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.

    Voir en ligne : Les envoyés du Yuoclund

    Répondre à ce message

    Retour au début des forums

  • Raccourci typographique pour lancer une popup.

    9 janvier 2007 10:59, par igedmedia

    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

    Répondre à ce message

    • Raccourci typographique pour lancer une popup. 13 janvier 2007 10:30, par Philippe Multeau

      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

    Retour au début des forums



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net