SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 199 visiteurs en ce moment

Accueil > Rédaction > Affichage dans texte > Fenêtres flottantes > Les fenêtres flottantes

Les fenêtres flottantes

Un plugin pour ajouter facilement des fenêtres flottantes dans SPIP

2 avril 2007 – par Arnault Pachot, Mathieu IMBERT – 119 commentaires

5 votes

Description

Ce plugin permet d’afficher le contenu de l’élément <div> de votre choix dans une fenêtre flottante avec effet de transparence.

Ce plugin implémente la fonction floating windows de la bibliothèque interface.js de JQuery

Utilisation de cookies pour mémoriser l’emplacement et les dimensions de la fenêtre pour chaque visiteur du site.

Démonstration

-  démonstration : http://www.hesge.ch/head

Installation

-  récupérez le zip du plugin sur l’espace de téléchargement de la Zone : http://files.spip.org/spip-zone/ [1]. L’installation se déroule ensuite comme pour tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Paramétrage du plugin avec cfg

Pour faire fonctionner le plugin et changer la configuration des fenêtres flottantes, vous devez installer le plugin cfg.



Avec cfg, il est possible de changer certaines options du plugin telles que :

-  la hauteur et la largeur de la fenêtre, en pixels

-  la position de la fenêtre, en pixels

-  le div que l’on veut afficher dans la fenêtre (dans cette option, il faudra mettre la class ou l’id du div dont le contenu sera affiché dans la fenêtre flottante).

-  couleur de la fenêtre : vous pouvez désormais choisir parmi quelques styles disponibles : rose, vert, orange, gris ou antracite. Egalement possibilité de changer la couleur de la bordure qui entoure le texte (valeur au format CSS).

-  activer/désactiver le bouton de fermeture de la fenêtre

-  activer/desactiver les effets de zoom en ouverture et fermeture de fenêtre

Compatibilité

-  en cas de problème pour faire fonctionner le plugin « les crayons » avec le plugin « les fenêtres flottantes », il faut remplacer le fichier JQuery-1.1.js qui se trouve dans le repertoire /plugins/crayons/js par le fichier jQuery-1.1.2.js (et le renommer jQuery-1.1.js).

-  version de SPIP supérieur ou égal à 1.9.2.

Voir en ligne : http://plugins.spip.net/fenflo

Notes

[1En cas de problême sur ce lien de téléchargement voir les sites miroirs

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 7 novembre 2010 à 13:41, par Fredy En réponse à : Les fenêtres flottantes

    Bonjour a tous !
    Je suis actuellement à la recherche d’un script déja tout fait en téléchargment avec des explication en français uniquement pour le CREATION D’UNE FENETRE FLOTANT TRANSPARENTE AU DESSUS D’UNE PAGE EXISTANTE.
    Avec une partie admin pour permettre d’activité ou de désactivé la fonction et de modifier les textes et de mettre des images.
    La fenêtre apparaîtra directement au chargement de la page d’accueil par exemple.
    MErci de votre réponse.

    Répondre à ce message

  • Le 30 août 2010 à 14:53, par Yack En réponse à : Les fenêtres flottantes

    Bonjour,

    J’ai essayé ce plug in version spip 2.1.

    Je voulais avoir un lien sur ma page d’accueil qui envoie vers un formulaire de contact dans une fenêtre flottant. Mais quand j’ai passé le lien selon vos instructions, il n’apparaît plus sur la page.

    J’ai bien essayé de comprendre mais je bloque.

    Auriez-vous une piste

    Voilà le script entré dans la head

    <script type="text/javascript">
    $(document).ready(function(){
    $('a.fenflo').bind('click', function(){
    $('#window').show();
    return false;
    });
    });
    </script>

    et le lien :

    a href=« http://www.____.fr » class=« fenflo »>Formulaire de contact

    Merci,

    Yk

    Répondre à ce message

  • Le 8 mai 2009 à 16:52, par gael En réponse à : Bonjour, comment peut on faire pour ne faire apparaître une fenetre flottante que sur des articles sélectionnés ?

    Merci encore pour ce beau plugins. J’aimerais bien l’utiliser mais seulement sur certains articles ou certaines rubrique. Comment dois-je procéder
    Merci pour votre réponse
    Gael
    l

    Répondre à ce message

  • Le 4 février 2009 à 19:21, par ? En réponse à : Les fenêtres flottantes

    Bonsoir, désolé pour les précisions tardives voici le code dans sommaire.html

    Dans une page article, la fenêtre se charge. Par contre rien ne se passe dans sommaire.html

    <script type="text/javascript">
      $(document).ready(function(){
          $('a.fenflo').bind('click', function(){
               $('#window').show();
               return false;
          });
      });
    </script>
    </HEAD>
    <BODY bgcolor="#F9F9F9" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" onLoad="safaribgdroite();">
    <div id="contenu">
    <body onLoad="NewWindow('/popup/popup.html',' ','400','300','center','front');">
    </div>

    Merci pour votre aide

    • Le 24 avril 2009 à 15:15, par nathbni En réponse à : Fenêtre flottante et changement de page

      Bonjour à tous : excellent ce plugin !! c’est très joli en plus.
      Cependant, je l’ai développé en voulant l’utiliser comme une playliste. J’ai donc un lecteur (pour le moment skinnableMP3Player) et des musiques qui sont chargées dans un article. Mais bécasse comme je suis, je n’ai pas pensé qu’au changement de page, la fenêtre se ferme et les musiques s’arrêtent ! Or, mon intérêt était de proposer une ambiance musicale indépendante de la navigation dans le site.

      Alors ma question est : y-a-t-il une solution pour l’objectif que je me suis fixée ou est-ce que je reviens au traditionnel pop-up par window.open, plus moche et nettement moins fun !! Merci mille fois pour votre aide.

      Autre petite anomalie : quand je déplace ma fenêtre dans l’écran, la bordure de droite disparait. Un conflit de css peut-être ?

      Voir ici : http://www.festival-du-blues.com

    • Le 24 avril 2009 à 16:10, par nathbni En réponse à : Fenêtre flottante et changement de page

      disparition de la bordure réglée : désolée...

    Répondre à ce message

  • Le 15 janvier 2009 à 15:54, par Fifouille En réponse à : Les fenêtres flottantes

    Bonjour,

    j’ai un souci pour afficher la fenêtre flottante au chargement de ma page. Entre les balises

    et

    j’ai mis :

    <script type="text/javascript">
    $(document).ready(function(){
    $('a.openwindow').bind('click', function(){
    $("#window").show();
    return false;
    });
    });
    </script>

    Dans le body :

    <body onLoad="NewWindow('/popup/popup.html','test','800','700','center','front');">

    ça ne fonctionne pas. Quelqu’un peut il me renseigner ?

    • Le 16 janvier 2009 à 10:13, par Arnault Pachot En réponse à : Les fenêtres flottantes

      bonjour,

      je ne vois pas tous les codes cités, il faudrait les mettres entre les balises <code> autour.

      mais la fenêtre doit se lancer toute seule au démarrage, tu as un lien pour qu’on regarde ?

    Répondre à ce message

  • Le 22 septembre 2008 à 21:09, par Olivers En réponse à : Les fenêtres flottantes

    Bonjour,

    Le plugin fonctionne parfaitement et j’aurais voulu savoir s’il existait une solution pour que cette fenêtre se referme automatiquement après quelques secondes ?

    Si quelqu’un a un début d’idée...

    Merci.

    Répondre à ce message

  • Le 19 juin 2008 à 11:32, par ? En réponse à : Les fenêtres flottantes

    Bonjour,
    J’ai suivi la procédure décrite pat Arnault pour que la fenêtre s’ouvre en cliquant sur un lien.

    J’ai un lien <a href="#" class="openwindow">blogger</a>, le morceau de code php donné par Arnault dans le « head » de la page, une div appelée « blog » et le plugin configuré pour ouvrir cette div.

    Quand je laisse le fichier fenetre_flottante_define_head.php tel quel, la fenêtre s’ouvre au chargement de la page (normal) ; mais quand je supprime l’instruction ".$script_open." (l.262) comme conseillé, impossible d’afficher la fenêtre en cliquant sur le lien.

    Est-ce que le plugin aurait changé depuis lors et il y aurait de nouvelles choses à faire pour que ça marche ?

    Merci beaucoup.

    • Le 2 juillet 2008 à 14:12, par Loco En réponse à : Les fenêtres flottantes

      Bonjour,

      J’ai le même pb. Quelqu’un aurait la solution ?

      Merci

    • Le 2 juillet 2008 à 14:24, par Arnault Pachot En réponse à : Les fenêtres flottantes

      Salut,

      effectivement, le code a changé depuis et ajouter simplement un lien <a href="#" class="openwindow">blogger</a> ne suffit plus.

      mais on peut faire autrement ;)

      par exemple, mettre le lien ci-dessus dans la page, et ajouter dans le squelette :

      Je n’ai pas testé en réel le code, mais le principe c’est de faire afficher la fenêtre ($("#window").show()) lorsqu’on clique sur le lien de classe « openwindow ».

      ++

    • Le 3 juillet 2008 à 17:12, par Loco En réponse à : Les fenêtres flottantes

      Merci pour ta réponse

      J’ai un truc bizarre qui m’empêche de tester. Mon lien qui devrait ouvrir le fenêtre quand on clique dessus n’apparaît pas dans ma page, sauf furtivement quand je rafraichis la page. Il disparait ensuite aussitôt. A quoi cela peut-il être du ?

      J’ai placé ça dans mon squelette

      Merci

    • Le 3 juillet 2008 à 17:17, par Arnault Pachot En réponse à : Les fenêtres flottantes

      en fait tu peux le faire avec n’importe quel lien.

      par exemple tu peux ajouter un lien dans ton squelette : <a href="#" id="monLien"></a>

      ensuite adapter le bout de script que j’ai donné en mettant : $('#monLien') au lieu de $('a.openwindow')

    • Le 3 juillet 2008 à 17:44, par Loco En réponse à : Les fenêtres flottantes

      J’ai placé ça dans mon squelette :

      <a href="http://www.elsey.ouvaton.org/LightForm/index.php" id="fenflo"><h6>Formulaire de contact</h6></a>

      avec le script dans le head

      <script type="text/javascript">
         $(document).ready(function(){
             $('a.openwindow').bind('click', function(){
                  $('#fenflo').show();
                  return false;
             });
         });
      </script>

      Mais j’ai toujours le même pb

      Merci pour ta patience

    • Le 3 juillet 2008 à 18:03, par Loco En réponse à : Les fenêtres flottantes

      Ok j’ai modifié comme ceci dans mon squelette :
      <a href="http://www.elsey.ouvaton.org/LightForm/index.php" class="fenflo"><h6>Formulaire de contact</h6></a>

      avec le script correct dans le head

      <script type="text/javascript">
         $(document).ready(function(){
             $('a.fenflo').bind('click', function(){
                  $('a.fenflo').show();
                  return false;
             });
         });
      </script>

      Ctte fois ci le texte apparaît bien mais quand je clique dessus il ne se passe rien

      voici la page :
      http://www.elsey.ouvaton.org/spip.php?article179

      Je continue à chercher

    • Le 3 juillet 2008 à 20:22, par Arnault Pachot En réponse à : Les fenêtres flottantes

      dans ton cas c’est :

    Répondre à ce message

  • Le 3 juillet 2008 à 10:56, par carpatag En réponse à : Les fenêtres flottantes

    impeccable plugin bravo, petit problème tout de même , peut être avez vous une piste, j’ai enlevé le script open pour éviter de voir la fenêtre au demerrage, j’ai inclus dans le fenêtre flottante [(#MODELEformid_form=2)]
    j’ai bien mon formulaire ( plugin form et table

    mais qd je valide la fenêtre disparait
    Avez vous une hypothese ??
    merci

    Répondre à ce message

  • Le 21 avril 2008 à 11:33, par revolter En réponse à : Les fenêtres flottantes

    Bonjour

    je debute et il me manque une étape pour afficher une fenetre flottante en page d’accueil.
    J’ai installer le plugin —> ok
    J’ai configuere ds CFG —>ok
    Maintenant je souhaite mettre un article en fenetre flottante
    #contenue ( ds le choix)
    Ensuite on doit ajouter un ligne ds le code de la page sommaire.html
    c’est ca ?
    Mais la syntax c’est quoi ?

    • Le 21 avril 2008 à 12:34, par Arnault Pachot En réponse à : Les fenêtres flottantes

      Salut,

      il n’y a pas à modifier les squelettes dans ton cas, puisque le div #contenu (et pas #contenue) existe déjà dans les squelettes de SPIP.

      normalement, le contenu du div #contenu doit s’afficher dans une fenêtre flottante (après recalcul du la page)

      sinon c’est qu’il y a peut-être un pb... il faudrait alors m’envoyer un lien ou me donner quelques infos notamment regarder si il y a des erreurs javascript à l’exécution.

      a+

    • Le 21 avril 2008 à 14:43, par revolter En réponse à : Les fenêtres flottantes

      merci pour ta reponse rapide IoI
      Je n’ai pas de message d’erreur ?

      Mais si je te comprends bien je devrais avoir un fichier appeler contenu.html (squelette par fournit par defaut) mais je ne le trouve pas ?

      Mais comment verifier ca presence , et le lien avec l’article que l’on souhaite faire apparaitre se fait ou ?

    • Le 21 avril 2008 à 14:51, par Arnault Pachot En réponse à : Les fenêtres flottantes

      non ce n’est exactement ça.

      dans tes squelettes, par exemple sommaire.html, rubrique.html ..etc... tu devrais avoir un div de id=« contenu ».

      c’est le cas si tu utilises le squelette par défaut livré avec spip.

      si ce n’est pas le cas, il faut que tu ajoutes dans tes squelettes

      ++

    • Le 21 avril 2008 à 20:26, par ? En réponse à : Les fenêtres flottantes

      merci j’ai cela fonctionne c’est super !!!

      dernier problème j’arrive a entrer du texte mais se que je recherche c’est qu’il fasse appel a un article exemple l’article 400 de mon site

      j’ai essayé le chemin complet cela fonctionne pas ?

      meeeeeeeeeeeeeerci d’avance

    Répondre à ce message

  • Le 20 avril 2008 à 14:24, par M’Klod En réponse à : Interaction avec plugin « Thickbox »

    Bonjour,

    Pour info, je viens de me rendre compte que le plugin « Thickbox » ne peut pas fonctionner en même temps que « Fenetres flottantes » : on ne peut plus fermer le popup ouvert par Thickbox. Il faut donc pour le moment utiliser soit l’un soit l’autre.

    C’était juste pour info, car en fait c’est Thickbox qui ne marche pas, et j’ai donc signalé ce problème sur l’article concernant ce plugin.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Champs Extras 3

    16 janvier 2012 – 523 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 188 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là