Websourcing.fr » Actualités, Web, Logiciels et Fun

[Webdesign] Facebox, un script JQuery pour des fenêtres « ligthbox » à la Facebook

Tags: CSS, Facebook, Javascript, JQuery, Webdesign
Posté dans Billets, Webworker par Lionel Roux le 8 juil 2009

De plus en plus de site web, y compris les plus gros, adoptent les fenêtres « lightbox ». Celles-ci sont censées concentrer l’attention sur le cadre mis en valeur (en général une photo ou une vidéo) en rendant ce qui l’entoure plus sombre ou en le faisant ressortir.

(exemple à la rédaction de Fredzone, on se concentre beaucoup avec une lightbox intégrale)

Personnellement j’aime beaucoup la méthode employée par Facebook, avec une simple bordure translucide. C’est à la fois discret et jolie.

Facebox est un petit script JQuery qui reproduit cet effet « Facebook » sur votre site. Il permet d’afficher des cadres de ce style pour vos images, div ou même un page externe entière.

Il nécessite a minima JQuery 1.2.1 et s’appuie sur plusieurs images pour notamment le chargement, les coins et la bordure. Un jeu par défaut est fournit mais cela vous laisse la possibilité de les personnaliser en plus du CSS et du JS.

Par défaut, facebox s’appuie sur la syntaxe de l’attribut rel des ancres. Pour instrumenter vos liens il suffit alors d’ajouter l’appel Javascript suivant:

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
})

Bien entendu, vos liens devront avoir l’attribut rel=facebox (ou autre si vous voulez changer).

Le petit truc que je trouve bien avec ce script, c’est la possibilité qui est donnée d’afficher dans un tel cadre des données récupérées avec un appel AJAX:

jQuery.facebox(function() {
  jQuery.get('code.js', function(data) {
    jQuery.facebox('<textarea>' + data + '</textarea>')
  })
})

Si vous cherchez des scripts pour créer des lightboxes, allez jeter un œil sur cet excellent article de Line25.

En savoir plus et télécharger FaceBox