FancyBox

Adaptation du script FancyBox pour jQuery en plugin SPIP.

Liste des fonctionnalités reprise depuis le site original :

  • ajoute un joli effet d’ombre portée sous la fenêtre
  • possibilité de grouper les images pour naviguer dans les séries d’éléments
  • permet d’afficher des images, du contenu en ligne, ajax ou en iframe

Voir la démonstration sur le site de FancyBox.

Installation et configuration

FancyBox (0.6.1)

Installation et activation comme tous les plugins.

La page de configuration du plugin est accessible à l’adresse ecrire/?exec=cfg&cfg=fancybox (menu CFG => onglet FancyBox).

Page de configuration du plugin FancyBox

Elle permet de modifier les paramètres suivants :

  • cible des éléments qui déclencheront une fenêtre fancybox ;
  • cible des éléments qui déclencheront une galerie avec fancybox ;
  • espacement autour du contenu de la fenêtre (en pixels) ;
  • redimensionnement automatique des images à la taille de la fenêtre du navigateur ;
  • affichage et opacité de l’arrière plan
  • fermeture de la fenêtre si la touche ESC du clavier est pressée
  • afficher ou non le bouton de fermeture de la fenêtre
  • fermeture de la fenêtre lors d’un clic sur celle-ci ou à l’extérieur
  • centrer la fenêtre lors du défilement de la page

Discussion

126 discussions

  • 3

    Je suis dans le même cas, cela ne fonctionne pas correctement sous IE 8. Il manque les contours, la case de fermeture et le fond du titre de l’image.

    C’est visible ici : jp.guihard.net

    • Ca y est, j’ai résolu mon problème grâce à la solution trouvée ici : http://groups.google.com/group/fancybox. J’ai donc modifié les lignes ad hoc dans le fichier jquery.fancybox-1.3.1.css. Comme indiqué, j’ai remplacé tous les appels dans la partie spécial IE qui sont orginalement de ce type :

      filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fancybox/

      en

      filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’lib/jquery.fancybox-1.3.1/fancybox/

      Et cela fonctionne sous IE pour moi.

      Ce qui est bizarre, c’est que je sois le seul à avoir eu ce problème ??

    • Salut,

      Oui le bug est bien présent sous ie. En fait le problème vient des règle filter spécifiques à ie qui nécessitent un chemin absolu pour bien fonctionner :

      http://reference.sitepoint.com/css/filter

      Le problème serait à régler directement dans la librairie fancybox car à partir d’ie 7 ces « filter » ne sont plus nécessaires car ie7 gère la transparence de png. Il faudrait que l’auteur de fancybox utilise un vilain hack dans sa css pour n’appliquer les règle filter qu’à ie5 et ie6. Le plus simple serait même de virer ces règles de la css (ça fonctionne très bien sans ça sous ie7) car on peut tout de même estimer que la version min à supporter est ie7...

      ++

    • J’ai créé un ticket sur le site de dev de fancybox pou signaler le problème et proposer une solution ;)

      http://code.google.com/p/fancybox/issues/detail?id=90

      ++

    Répondre à ce message

  • 3
    Guillaume

    Bonjour,
    Je viens de lire tous les post et apparemment personne n’a eu mon problème.
    J’ai la dernière version de spip, et la version de fancybox téléchargeable sur cette page.
    Quand je souhaite modifier les paramètres via l’onglet CFG de la partie administrateur, une page blanche s’affiche. C’est-à-dire que dès que je clique dans un champs pour y modifier quelque chose, une page blanche s’affiche...
    Peut être ai-je mal fait quelque chose ?

    • Guillaume

      Problème résolu, sans savoir pourquoi...

    • Guillaume

      Euh.. en fait ça ne fonctionne à nouveau plus, je viens de voire que dès que je suis dans le fenêtre de CFG de FancyBox, dès que je clique quelque part, j’ai une page blanche, que ça soit quand je clique dans un champs, sur un icône comme « à suivre » ou « configuration » etc, ou ailleurs sur la page.
      Est ce que quelqu’un à une idée de se que ça pourrait être ?
      Pour info, je suis héberger chez free, et j’ai un autre plugin, cooliris qui fonctionne très bien en CFG..
      Merci par avance.

    • Salut Guillaume, j’avais le même problème que toi.
      J’ai revu la liste des me plugins et ai enlevé tout ce dont je n’utilisait pas, notamment Mediabox, Mediatheque et Mots-Partout2 ; peut-être aurais-tu des plugins qui conflictent avec Fancybox ?

    Répondre à ce message

  • 1

    Pour obtenir le fonctionnement attendu, c’est-à-dire la possibilité d’avoir une galerie où l’on peut faire défiler les images dans le portfolio, j’ai dû ajouter cette ligne après la ligne 87 du fichier fancybox/javascript/fancybox.js du plugin :

    .attr(« rel »,« fancybox »)

    Maintenant, ça fonctionne impéccablement. J’imagine qu’il y a d’autres façons ?

    Répondre à ce message

  • désolé — erreur de commentaire :x

    Répondre à ce message

  • Le site est riaumont.eu

    Vous pourrez voir que tout se passe bien avec Firefox, mais que les coins arrondis des menus de sarka spip et surtout l’agrandissement des images avce Fancy box ne passent pas dans IE 8...

    En tous les cas, merci pour cette réponse rapide !

    Répondre à ce message

  • 1

    Bonjour,
    Je suis novice et travaille sur Sarkaspip hébergé chez 1and1.
    J’ai installé le plugin Fanbcybox qui fonctionne parfaitement sous Firefox mais pas du tout sous IE8. Pourquoi ?
    De même, les coins arrondis aux menus s’affichent parfaitement sous Firefox mais pas du tout sous IE8. Pourquoi également ?
    Sans doute y a t-il des réponses toutes simples, mais encore une fois je suis novice !
    Merci pour votre aide...
    dauphin

    • Salut, ton problème doit certainement venir d’une erreur javascript mais on ne peut pas t’aider plus que ça si tu ne nous donnes pas l’adresse du site...

      Essaye de désactiver tes plugins un par un pour trouver le fautif.

      ++

    Répondre à ce message

  • 2
    ommadawn85

    Bonjour,

    Je ne comprends pas pourquoi le plugin fonctionne dans la partie privée du site et pas sur la partie publique ? J’ai vidé les caches, tout est à jour des dernières versions...
    Si j’ajoute #INSERT_HEAD dans mon squelette j’obtiens un message d’erreur ; Double occurence de INSERT_HEAD.

    Je suis un peu perdu.

    Pouvez-vous m’aider ?

    Merci.

    • Salut,

      Pouvez-vous m’aider ?

      Oui à condition que tu nous donnes un lien vers le site en question ;)

      ++

    • ommadawn85

      Cela aurait été avec plaisir mais le site est en local sur mon ordinateur...
      Voici la liste des autres plugins installés :

      Acces Restreint 3.0.1
      cfg : moteur de configuration 1.15.2
      CleverMail pour SPIP 2.0 2.5.1
      Facteur 1.5.9
      Formulaire de contact avancé 0.62
      Mediathèque 1.3.6 - stable
      Saisies pour formulaires 1.7.7
      SPIP Bonux 2.2.7

    Répondre à ce message

  • 1

    bonjour,

    après de nombreux tests sur les différentes box disponibles pour SPIP voici ma conclusion (qui n’engage que moi !) :

    -  Le meilleur : Fancybox (ne rate aucune photo, dispose d’une page de configuration)
    -  Le bon : Thickbox (ne rate aucune photo, ne dispose pas d’une page de configuration)
    -  Le moins bien : Mediabox (rate de nombreuses photos n’affichant rien (est-ce un bug ???), dispose d’une page de configuration).

    Pas tester : Nyroceros

    Le seul truc qui manque à Fancybox est une intégration au plugin mediathèque.
    Aussi dans la page config : ce titre prête à confusion « Afficher le titre sous la fenêtre. » devrait à mon avis être juste « Afficher le titre. », car si on met non à la proposition, même si on configure le paramètre suivant (titre position) ça ne donne rien, donc il faut répondre oui pour pouvoir choisir une position (où d’ailleurs sous la fenêtre est proposé !), donc pas sous la fenêtre forcement !! lol

    Merci pour ce super plugin, bonne continuation.

    • ce qui serait bien je trouve c’est si on emploi le critère pagination, que la fancybox puisse suivre les liens dans les pages suivantes et précédentes...

      @+

    Répondre à ce message

  • 2

    Comme dit Patrick avec qui je suis tt à fait d’accord :

    J’ai remarqué que « ceux qui savent », rechignent à expliquer le b a ba sur les forums.
    Comment aurait évolué Spip sans des explications basiques , sous forme d’aide, à des non initiés.

    Un forum c’est pour partager, c’est pas pour frimer avec du jargon stérile.
    Le B A BA ! ça vous rabaisserait tant de donner une procédure et/ou des explications ?

    • Bonjour Henry,

      C’est une mauvaise habitude que j’ai en tant que développeur SPIP de dire bonjour sur les forums quand je pose une question.

      Alors la question. Ahhh, ben y en a pas... :p
      Pourtant d’après ce que tu dis, tu as l’air d’avoir pas mal cherché pour arriver à cette conclusion que les développeurs de plugins sont tellement arrogants qu’ils ne daignent même pas expliquer le B A BA !

      Il ne t’est jamais venu à l’idée que parfois les développeurs ont une famille, un boulot, des occupations hors SPIP et qu’ils n’ont pas forcément le temps de tout documenter. Peut-être attendent-ils aussi une attitude moins « consommateur » des gens qui utilisent les logiciels libres ? Utopie tu crois ?

      Et oui c’est pas facile le libre, faut chercher un peu, faut passer du temps à réfléchir, faut parfois partager pour mieux recevoir... du « respect social » quoi ! Non, moi je crois qu’un truc payant avec une hot-line c’est ça qu’il te faut...

      Sinon, si tu as une question, surtout te gêne pas...

    • Bonjour,

      Désolé, je m’arrachait les cheveux !

      Néanmoins : lire « j’ai installé, ça marche, ciao ! » sans explications.... c’est rageant et c’est pas comme ça qu’on avance.

      Quand je disait que les programmeurs on la fâcheuse tendance à ne pas documenter, je parle en connaissance de cause : j’ai programmé plusieurs années !

      Mais ma rage vient en réalité du fait que bien souvent, le programmeur raffine son code, développe des fonctions toutes plus belles que les autres... et gâche tout en ne sortant pas son nez du guidon.

      C’est comme pour les recettes de cuisine : « faites une pâte feuilletée comme vous faites d’habitude... »

      J’ai donc des questions qui serviront à tout ceux qui ne sont pas programmeurs mais qui devraient être quand même capables d’installer un plugin pour Spip... avec des explications :

      Voici mon cas :

      J’ai installé le plugin ET tout ceux réclamés ensuite (avec spip 2.10).
      J’ai découvert que les images doivent êtres dans le Portfolio (bouton en bas des encadrés des images importées, à gauche des pages articles)
      Après avoir importé une image, je la place dans le portfolio spip, je place un

      <docxx>

      dans une page.
      Résultat, l’icone standard apparait, je clic dessus et plug fait effet sur cette image.

      Donc comment faire pour créer un DIAPORAMA de n images ?

      H.


    Répondre à ce message

  • C’est bien joli d’expiquer comment on met son plugin en ftp dans le dossier ’plugins’ : on lit ça cent fois à chaque page. et quand on l’a fait 10 fois ça fout les boules de le lire encore alors que :

    Impossible de trouver comment on utilise ce plugin FancyBox.

    Mon spip 2.10 m’a d’abord demandé Bonx, Cfg, et compagnie...

    Ça serait le minimum de dir quels sont les plugs nécessaire. AVANT !

    Lire « j’ai mis FancyBox et ça marche tout de suite »

    Un peu de PEDAGOGIE associée à votre génie de programmation serait tout simplement Extrêmement bénéfique !

    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