Activation

Cocher cette case pour activer Colorbox pour le blog courant. Lors de l'insertion d'une image dans un billet, n'oubliez pas de choisir l'option En tant que lien vers l'image originale"

Thème

Choisissez le thème qui vous convient, puis modifiez-le éventuellement en suivant les indications de la section fichiers personnels dans la configuration avancée.

Paramètres de l'icône de zoom

Colorbox peut afficher une icône sur les vignettes des images à agrandir. Choisissez sa position, à droite ou à gauche, elle s'affichera au survol de la vignette par la souris. Vous pouvez aussi afficher cette icône en permanence.

Fichiers personnels

Thèmes

Colorbox propose 6 thèmes pour choisir l'apparence de la fenêtre modale. Vous pouvez modifier chacun d'eux à votre guise en y ajoutant une nouvelle feuille de style.

Note : le thème Lightbox Classic est particulier : il est conçu pour avoir le même aspect visuel que l'ancien plugin d'Olivier Meunier, et le compteur de vues ainsi que le diaporama sont masqués .

Modification des thèmes

Principe

La fenêtre modale de Colorbox peut être entièrement stylée en CSS, et les images modifiées.

Colorbox permet de définir une feuille de style personnalisée, stockée dans votre répertoire de médias ou dans le répertoire de votre thème, et dont les règles écraseront les règles de même nom du thème utilisé.

Voici comment procéder :

Créer un répertoire de thème personnel

Vous pouvez choisir de stocker vos fichiers personnels :

• dans le gestionnaire de médias
• dans le thème du blog

Commencez par créer, à la racine de l'emplacement choisi, les sous-répertoires nécessaires pour obtenir l'arborescence suivante :

colorbox/themes/x/

où x est le numéro du thème que vous souhaitez modifier. C'est dans ce répertoire que vous stockerez toutes vos modifications sur le thème. Répétez l'opération en remplaçant à chaque fois x par le numéro voulu si vous devez modifier plusieurs thèmes.

Créer votre feuille de style

Ajoutez maintenant dans le répertoire x une feuille de style nommée colorbox_user.css avec seulement les règles que vous voulez voir appliquer à la place de celles du thème, par exemple

#cboxOverlay{background-color:red;}

si vous ne souhaitez changer que la couleur de fond de la fenêtre modale

Modifications des images

Si vous voulez modifier les boutons de navigation de la fenêtre modale, placez dans le répertoire du thème personnel les images nécessaires, et faites référence à ces images dans colorbox_user.css .

Sélecteurs

Par défaut Colorbox est activé seulement pour les images contenues dans les billets.

Si vous voulez activer Colorbox pour les images contenues dans d'autres blocs, entrez dans cette case les sélecteurs, séparés par des virgules, correspondants aux blocs supplémentaires.

Si par exemple vous souhaitez que les blocs #sidebar et #pictures soient pris en compte, entrez

#sidebar,#pictures

dans le champ. Notez que les images des blocs choisis seront considérées comme faisant partie de groupes distincts pour les compteurs de vues et les diaporamas.

Si vous laissez ce champ vide, seules les images de vos billets seront affectées.

Effets

Fenêtre modale

Dimensions

Javascript

Goodie

Colorbox peut afficher autre chose que des images, voici quelques indications pour commencer à jouer avec :

Contenu html

Créez un fichier nommé test.html et contenant la portion de code que vous voulez afficher dans Colorbox, par exemple

<p>Test</p>
      <p><img src="/public/test.jpg" alt="" /></p>

Envoyez ce fichier et l'image dans votre répertoire de médias.

Dans un billet (syntaxe wiki), saisissez :

///html
      <script type="text/javascript">
      $(document).ready(function(){
      $(".html").colorbox();
      });
      </script>
      
      <p><a class="html" href="/public/test.html" title="Ma jolie page">html</a></p>
      ///

Quand vous cliquez sur le lien dans le billet, la page test.html est affichée par Colorbox.

Autres contenus

Sur le même principe, si votre page test.html contient le code pour un lecteur vidéo entouré de ses balises object , celui-ci s'affichera dans Colorbox.

Les possibilités offertes par ce système sont très nombreuses et intéressantes...