Les fenêtres flottantes

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

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

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

Discussion

34 discussions

  • 4

    Salut,
    j’aimerai inserer un lien ou un bouton pour fermer la fenetre flottante de manière plus lisible que la croix, j’ai essayé les manières habituelles c’est a avec la fonction javascript « window.close() » mais le probleme c’est qu’il me ferme toute la page web et non uniquement la fenetre...
    quelqu’un a t-il une astuce ??
    merci
    So :)

    • si je comprend bien , tu voudrai que dans ta fenetre, il y est un lien qui te permette de fermer la fenêtre ?

      Tiens moi au courant pour savoir si c’est ça.

    • Re... Oui voila exactement, jaimerai un lien en texte clair pour que les personnes qui veulent fermer la fenetre puissent cliquer dessus, j’ai deja testé avec window.close() mais ca me ferme tte la page et non uniquement la fenetre flottante donc cava pas, as tu une idée ?
      Merci
      So :)

    • essaie de mettre la ligne de code suivante :

      <a href="#" id="windowClose">Fermer la fenetre</a>

      tiens moi au coourant pour savoir si ca marche.

    • J’ai essayé le code que tu ma donné, ca ne fonctionne pas, est ce que ca fonctionne chez toi ?? si tu as une autre astuce je suis preneur...
      merci
      So :)

    Répondre à ce message

  • 1
    Jead Wellor

    Bonjour, je trouve l’idée excellente, mais lorsque j’installe le plugin, ma page de backend bug (à cause du insert_head je suppose), avez vous une idée pour corriger le problème

    • pourriez vous etre plus precis sur la nature du bug et me fournir un lien de la page pour que je puisse voir ?

    Répondre à ce message

  • jean-noël

    nouvelle archive :

    la fenêtre ouverte est directement présente à l’appel de l’article.

    Si je laisse la fenêtre ouverte et que j’active le lien de la note je peux lire la note dans la fenêtre.
    Si je réduis la fenêtre le lien de la note reste inactif
    Si je ferme la fenêtre le lien de la note reste inactif et la fenêtre ne s’affiche pas.
    Par contre le plugin thickbox fonctionne de nouveau

    cordialement

    Répondre à ce message

  • 4
    jean-noël

    J’ai essayé sur deux « div » PS et NOTES il est indiqué agrandir ou minimiser la fenêtre le lien open windows s’affiche mais pas dans une fenêtre flottante.

    Exemple sur notes

    • juju2002

      Fonctionne avec firefox, mais pas sous ie7. Quelles sont les modifications à faire pour résoudre le problème ? Ne me dites pas de passer sous Firefox ;) parfois on a des contraintes ...

    • ca y est, normalement le probleme est réglé, si tu veux réessayer, il faut que tu retelecharge l’archive et que tu l’a réinstalle sur ton site. Si tu a encore des problèmes, n’hesite pas a le dire.

    • Ca y est juju2002, le probleme est réglé, tu peut retelecharger l’archive pour réparer le probleme, ou alors dans le fichier fenetre_flottante_fonct.php, tu remplace la ligne

      <a href=\"#\" class=\"invisible\" id=\"windowOpen\">Open window</a>

      par

      <a href=\"#\" style=\"display: hidden;\" id=\"windowOpen\">Open window</a>

    • je suis aller un peu trop vite tout a l’heure, tu peut aussi remplacer la ligne par :

      <a href=\"#\"  id=\"windowOpen\">&nbsp;</a>

      ce qui t’evitera d’avoir la phrase open window d’afficher sur ton site.

    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