Accueil du site > Diaporamas > Le plugin SPIP Colorbox

Le plugin SPIP Colorbox

dimanche 17 juin 2012, par Franck Ruzzin

Colorbox est un visualiseur d’image gratuit pour les sites web. Il est écrit en javascript, et utilise jQuery, version 1.3.2 minimum. Le site officiel : http://colorpowered.com/colorbox/.

Caractéristiques :
- Gère les photos, groupes de photos, diaporamas
- Léger : moins de 9 kb de JavaScript
- Apparence pilotée par CSS (donc facile à personnaliser)
- Paramètres de comportement pouvant être surchargés, sans altération du javascript original
- Non obstrusif, toutes les options sont fixées dans le javascript et ne nécessite aucun changement au code HTML
- Préchargement des images en tâche de fond
- Ecrit au format jQuery
- Produit un code XHTML valide W3C, n’ajoute aucune variable javascript globales
- Distribué sous licence MIT

Testé avec : Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.

 

Le plugin Colorbox ajoute un diaporama Colorbox dans un article.

Les images qui constituent le diaporama sont jointes à l’article :
- en tant que documents (pour SPIP 1.9)
- déposées dans le portfolio (SPIP 2)

Il y a 4 moyens d’utiliser le plugin :

Les 2 balises :
- #COLORBOXGALLERY insertion avec portfolio
- #COLORBOX insertion sans portfolio

Les 2 modèles :
- <mod_colorboxgalleryxxx> insertion avec portfolio (xxx est l’id de l’article contenant les images à intégrer dans le diaporama)
- <mod_colorboxxxx> insertion sans portfolio (xxx est l’id de l’article contenant les images à intégrer dans le diaporama)

Le plugin Colorbox nécessite l’utilisation du plugin CFG, par lequel on peut configurer certains des paramètres de l’affichage :
- Hauteur des vignettes du portfolio
- Largeur des vignettes du portfolio
- Taille de l’image initiale (mode sans portfolio)
- Feuille de style à utiliser
- Type de transition
- Vitesse de transition
- Largeur totale bordures et boutons inclus
- Hauteur totale bordures et boutons inclus
- Largeur totale sans bordures ni boutons
- Hauteur totale sans bordures ni boutons
- Largeur initiale avant chargement du contenu
- Hauteur initiale avant chargement du contenu
- Largeur maximum du contenu
- Hauteur maximum du contenu
- Redimensionne les photos en fonctions des contraintes de dimensions
- Afficher des ascenseurs si le contenu est plus grand que l’afficheur
- Opacité du recouvrement
- Lancer automatiquement Colorbox
- Rendre le focus à l’élément qui a lancé ColorBox en quittant le diaporama
- Précharger les images suivante et précédente
- Fermer Colorbox par un clic sur le fond
- Recommencer la lecture au premier élément lorsque le dernier est atteint
- Fermer Colorbox avec la touche Echap
- Autoriser les flèches gauche et droite pour naviguer entre les éléments
- Ajouter la fonctionnalité diaporama
- Vitesse du diaporama
- Démarrage automatique du diaporama
- Texte pour le bouton ’Démarrer’
- Texte pour le bouton ’Arrêter’
- Numérotation des photos
- Texte pour ’précédent’
- Texte pour ’suivant’
- Texte pour ’fermer’

 

Les nouveautés de la version 1.3.19 (SPIP 3 uniquement)


- Ajout de la chaîne de traduction xhrError, message en cas d’erreur de chargement ajax
- Ajout de la chaîne de traduction imgError, message en cas d’échec de chargement d’une image
- Ajout de l’option fixed (defaut false), positionnement fixe dans la fenêtre du client
- Ajout de l’option top, positionnement vertical de ColorBox (false, nn%, nnpx ou xx)
- Ajout de l’option bottom, positionnement vertical de ColorBox (false, nn%, nnpx ou xx)
- Ajout de l’option left, positionnement horizontal de ColorBox (false, nn%, nnpx ou xx)
- Ajout de l’option right, positionnement horizontal de ColorBox (false, nn%, nnpx ou xx)

 

Les nouveautés de la version 1.3.15


- Ajout de l’option loop (defaut : vrai). Recommencer la lecture au premier élément lorsque le dernier est atteint.
- Ajout de l’option escKey (defaut : vrai). Fermer Colorbox avec la touche Echap.
- Ajout de l’option arrowKey (defaut : vrai). Autoriser les flèches gauche et droite pour naviguer entre les éléments.
- Ajout de l’option returnFocus (defaut : vrai). Rendre le focus à l’élément qui a lancé ColorBox en quittant le diaporama.
- Correction de compatibilité avec jQuery 1.4.3
- Correction de divers bugs.

 

IMPORTANT

Le fonctionnement du plugin nécessite jQuery 1.3.2 minimum.
Pour une utilisation avec les versions de SPIP antérieures à 2, il faut éditer les fichiers
- colorbox.html
- colorboxgallery.html
- mod_colorbox.html
- mod_colorboxgallery.html

et retirer dans toutes les boucles le critère {vu=non}

- utiliser le plugin jQuery 1.4.2 pour SPIP 1.92x pour remplacer la version par défaut (v1.1.x) par la version 1.4.2 ou 1.3.2.

Documents joints

Répondre à cet article