jQuery SuperBox!

Traductions

Français

English

Introduction

jQuery Superbox! est un script permettant d'afficher des fenêtres avec effet Lightbox.

Ce script est un plugin pour jQuery (1.3.x).

Pourquoi créer un nouveau script de ce type, alors qu'il en existe déjà beaucoup ?

• L'accessibilité. Seul l'attribut rel est utilisé pour déclencher le script. L'attribut href est donc cohérent : il cible l'adresse d'une image, celle d'une page ou l'identifiant d'un élément de la page (ancre).
• L'extensibilité. Superbox n'impose aucun style, tout est entièrement et facilement stylable en CSS.
• La licence MIT. Cette licence vous permet d'utiliser, de dupliquer, de modifier, de publier, de diffuser, de fusionner, de vendre et même de changer la licence de ce script. Votre seule obligation est de conserver le nom de l'auteur de ce script.
• C'est amusant.

jQuery Superbox! permet d'afficher des images, des galeries d'images, des pages externes, un élément de la page et même un contenu chargé en AJAX.

Téléchargement

Le poids de la version compressée de Superbox est de 2ko si la compression GZip est utilisée, et 5,4ko sans.

Télécharger jQuery Superbox! 0.9.1 (zip)

Contribuer

Vous souhaitez participer ? N'hésitez pas à vous rendre sur la page du projet Bitbucket ; vous pourrez y reporter des bugs, proposer des améliorations et contribuer au code : http://bitbucket.org/bpierre/jquery-superbox/

Mise en route

Pour installer ce script, vous devez inclure sur votre page jQuery, ainsi que les fichiers jquery.superbox-min.js (version compressée) et jquery.superbox.css :

<link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="jquery.superbox-min.js"></script>

Par défaut, la superbox est générée d'après l'attribut rel d'un lien. Il doit contenir le mot superbox, suivi du mode d'affichage entre crochets : rel="superbox[mode_affichage]".

Le nom du mode sera éventuellement associé à un id et une ou plusieurs class (syntaxe CSS) qui seront appliqués sur la fenêtre générée : rel="superbox[type#mon_id.ma_classe]".

Les paramètres spécifiques au mode d'affichage seront ensuite placés à la suite, entre crochets.

La fenêtre est placée en position:fixed, sauf si sa hauteur dépasse la surface d'affichage. Dans ce cas, elle passera en position:absolute, ce qui permettra de voir toute la zone à l'aide des barres de défilement du navigateur.

Pour activer jQuery Superbox!, la méthode $.superbox() doit être executée au chargement de la page :

$(function(){
	$.superbox();
});

Certains paramètres peuvent être définis ; tous sont optionnels. En voici les valeurs par défaut :

$.superbox.settings = {
	boxId: "superbox", // Attribut id de l'élément "superbox"
	boxClasses: "", // Classes de l'élément "superbox"
	overlayOpacity: .8, // Opacité du fond
	boxWidth: "600", // Largeur par défaut de la box
	boxHeight: "400", // Hauteur par défaut de la box
	loadTxt: "Loading...", // Texte de loading
	closeTxt: "Close", // Texte du bouton "Close"
	prevTxt: "Previous", // Texte du bouton "previous"
	nextTxt: "Next" // Texte du bouton "Next"
};

<a href="http://example.com/image.png" rel="superbox[image]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[image][500x200]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[image][500x]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[image][x200]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[gallery][my_gallery]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[gallery][my_gallery][500x200]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[gallery][my_gallery][500x]">SuperBox</a>

<a href="http://example.com/image.png" rel="superbox[gallery][my_gallery][x200]">SuperBox</a>

<a href="http://example.com/" rel="superbox[iframe][700x500]">SuperBox</a>

<a href="#box-content" rel="superbox[content]">SuperBox</a>

<a href="#box-content" rel="superbox[content]">SuperBox</a>