Facebox – Plugin jQuery – Des lightbox style Facebook

Aujourd’hui, nous allons découvrir Facebox, un plugin pour le framework javascript jQuery. Facebox est un plugin simple qui va vous permettre de réaliser de réaliser vos lightbox dans un style très Facebook 🙂

facebox-plugin-jquery-lightbox

Pour cela voici un exemple très simple d’utilisation :

le code javascript :

[pastacode lang= »javascript » manual= »%24(‘a%5Brel*%3Dfacebox%5D’).facebox() » message= » » highlight= » » provider= »manual »/]

Et le code html :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22images%2Fmonimage.jpg%22%20rel%3D%22facebox%22%3Etexte%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

l’appel des librairies reste classique :

[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22jquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Clink%20href%3D%22%2Ffacebox%2Ffacebox.css%22%20media%3D%22screen%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20%2F%3E%0A%3Cscript%20src%3D%22%2Ffacebox%2Ffacebox.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Quand vous cliquerez sur le lien texte, l’image monimage.jpg s’affichera dans une lightbox au style facebook.

Il est aussi possible d’afficher dans la lightbox une div, une page en ajax, de modifier le style etc…

Retrouver le plugin jQuery Facebox ici : http://defunkt.io/facebox/

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. Internet Explorer 9 – PHP – Problèmes avec mon site depuis IE9 | LudiBlog - [...] Facebox – Plugin jQuery – Des lightbox style Facebook [...]
  2. jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript | LudiBlog - [...] Facebox – Plugin jQuery – Des lightbox style Facebook [...]
  3. Google – Mais où est passé mon PageRank (PR) ? | LudiBlog - [...] Facebox – Plugin jQuery – Des lightbox style Facebook [...]

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *