SPIP - Contrib

SPIP - Contrib

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

242 visiteurs en ce moment

fontsizeup fontsizedown
[110 commentaires]

Les fenêtres flottantes

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

lundi 2 avril 2007, par Arnault Pachot, Mathieu IMBERT

  • Digg
  • Del.icio.us
  • Facebook
  • Google
  • Technorati
0 vote

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.

Notes

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

Retour en haut de la page

110 Messages de forum

Voir toute la discussion

Pages 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |...

  • Répondre à ce message

    22 septembre 2008 21:09 , par Olivers

    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

    3 juillet 2008 20:22 , par Arnault Pachot

    dans ton cas c’est :

  • Répondre à ce message

    3 juillet 2008 18:03 , par Loco

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

    Je continue à chercher

  • Répondre à ce message

    3 juillet 2008 17:44 , par Loco

    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

  • Répondre à ce message

    3 juillet 2008 17:17 , par Arnault Pachot

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

  • Répondre à ce message

    3 juillet 2008 17:12 , par Loco

    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

    Formulaire de contact

    Merci

  • Répondre à ce message

    3 juillet 2008 10:56 , par carpatag

    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

    2 juillet 2008 14:24 , par Arnault Pachot

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

    ++

  • Répondre à ce message

    2 juillet 2008 14:12 , par Loco

    Bonjour,

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

    Merci

  • Répondre à ce message

    19 juin 2008 11:32

    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.

Pages 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |...

Répondre à cet article

Retour en haut de la page

Ça discute par ici