Dotclear

source: plugins/colorbox/locales/fr/help/advanced_help.html @ 2111

Revision 2111, 11.1 KB checked in by philippe, 14 years ago (diff)

1.3.5 : added user css management option
  • Property svn:executable set to *
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<html>
3  <head>
4    <title>Configuration avancée de ColorBox</title>
5  </head>
6  <body>
7    <h2>Paramètres avancés</h2>
8    <h3>Sélecteurs</h3>
9    <p>Par défaut ColorBox est activé seulement pour les images contenues dans les billets.</p>
10    <p>Si vous voulez activer ColorBox pour les images contenues dans d'autres blocs, entrez dans cette case les sélecteurs jQuery, séparés par des virgules, correspondants aux blocs supplémentaires.</p>
11    <p>Si par exemple vous souhaitez que les blocs
12      <em>#sidebar</em>
13      et
14      <em>#pictures</em>
15      soient pris en compte, entrez</p>
16    <pre>div#sidebar,div#pictures</pre>
17    <p>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.</p>
18    <p>Si vous laissez ce champ vide, seules les images de vos billets seront affectées.</p>
19    <h3>Effets</h3>
20    <table>
21      <tr>
22        <th class="key">Option</th>
23        <th class="default">Defaut</th>
24        <th class="description">Description</th>
25      </tr>
26      <tr>
27        <td>Type de transition</td>
28        <td>"elastic"</td>
29        <td>Le type de transition. Peut prendre les valeurs "elastic", "fade", or "none".</td>
30      </tr>
31      <tr>
32        <td>Vitesse de transition</td>
33        <td>350</td>
34        <td>Vitesse des transitions fade et elastic, en millisecondes.</td>
35      </tr>
36      <tr>
37        <td>Opacité</td>
38        <td>0.85</td>
39        <td>Niveau d'opacité du cadre. Valeur: 0 à 1.</td>
40      </tr>
41      <tr >
42        <td>Ouvrir automatiquement</td>
43        <td>décochée</td>
44        <td>Si la case est cochée, la fenêtre s'ouvrira automatiquement sans action du visiteur.</td>
45      </tr>
46      <tr>
47        <td>Pré-chargement des groupes d'images</td>
48        <td>cochée</td>
49        <td>Si la case est cochée, permet le pré-chargement des images suivantes ou précédentes.</td>
50      </tr>
51      <tr>
52        <td>Fermeture sur clic dans le cadre</td>
53        <td>décochée</td>
54        <td>Si la case est cochée, permet de fermer la ColorBox en cliquant dans le cadre autour de l'image.</td>
55      </tr>
56      <tr>
57        <td>Activer le diaporama</td>
58        <td>décochée</td>
59        <td>Si la case est cochée, permet de voir toutes les images dans un diaporama.</td>
60      </tr>
61      <tr>
62        <td>Démarrer automatiquement le diaporama</td>
63        <td>cochée</td>
64        <td>Si la case est cochée, le diaporama commence automatiquement à l'ouverture de la première image.</td>
65      </tr>
66      <tr>
67        <td>Vitesse du diaporama</td>
68        <td>2500</td>
69        <td>Vitesse du diaporama, en nombre de millisecondes entre les images.</td>
70      </tr>
71      <tr>
72        <td>Démarrer (texte)</td>
73        <td>"marche"</td>
74        <td>Texte du bouton pour démarrer le diaporama.</td>
75      </tr>
76      <tr>
77        <td>Arrêter (texte)</td>
78        <td>"arrêt"</td>
79        <td>Texte du bouton pour arrêter le diaporama.</td>
80      </tr>
81    </table>
82    <h3>Fenêtre modale</h3>
83    <table>
84      <tr>
85        <th class="key">Option</th>
86        <th class="default">Defaut</th>
87        <th class="description">Description</th>
88      </tr>
89      <tr>
90        <td>Légende par défaut</td>
91        <td>vide</td>
92        <td>Peut-être utilisé pour afficher toujours la même légende. Si ce champ est laissé vide, l'attribut "title" du lien sur l'image est utilisé pour la légende.</td>
93      </tr>
94      <tr>
95        <td>Courant (texte)</td>
96        <td>"{current} sur {total}"</td>
97        <td>Texte pour le séparateur du compteur d'images. Les expressions {current} et {total} sont détectées et remplacées par les nombres correspondants.</td>
98      </tr>
99      <tr>
100        <td>Précédente (texte)</td>
101        <td>"prec."</td>
102        <td>Texte pour le bouton "image précédente". La largeur du bloc devra être adaptée dans la feuille de style si le texte est plus long</td>
103      </tr>
104      <tr>
105        <td>Suivante (texte)</td>
106        <td>"suiv."</td>
107        <td>Texte pour le bouton "image suivante". La largeur du bloc devra être adaptée dans la feuille de style si le texte est plus long</td>
108      </tr>
109      <tr>
110        <td>Fermer (texte)</td>
111        <td>"fermer"</td>
112        <td>Texte pour le bouton "fermer". La largeur du bloc devra être adaptée dans la feuille de style si le texte est plus long</td>
113      </tr>
114      <tr>
115        <td>Afficher le contenu dans une iframe</td>
116        <td>décochée</td>
117        <td>Si la case est cochée, le contenu sera affiché dans une iframe au lieu d'une fenêtre modale.</td>
118      </tr>
119    </table>
120    <h3>Dimensions</h3>
121    <table>
122      <tr>
123        <th class="key">Option</th>
124        <th class="default">Defaut</th>
125        <th class="description">Description</th>
126      </tr>
127      <tr>
128        <td>Largeur fixe</td>
129        <td>vide</td>
130        <td>Pour fixer une largeur totale fixe, bordures et boutons inclus. Exemple: "100%", "500px", ou 500</td>
131      </tr>
132      <tr>
133        <td>Hauteur fixe</td>
134        <td>vide</td>
135        <td>Pour fixer une hauteur totale fixe, bordures et boutons inclus. Exemple: "100%", "500px", ou 500</td>
136      </tr>
137      <tr>
138        <td>Largeur interne fixe</td>
139        <td>vide</td>
140        <td>Alternative à largeur fixe, bordures et boutons exclus. Exemple: "100%", "500px", ou 500</td>
141      </tr>
142      <tr>
143        <td>Hauteur interne fixe</td>
144        <td>vide</td>
145        <td>Alternative à hauteur fixe, bordures et boutons exclus. Exemple: "100%", "500px", ou 500</td>
146      </tr>
147      <tr>
148        <td>Mettre à l'échelle</td>
149        <td>cochée</td>
150        <td>Si la largeur et la hauteur, minimales ou maximales ont été définies ColorBox met les images à l'échelle pour entrer dans ces valeurs.</td>
151      </tr>
152      <tr>
153        <td>Masquer les barres de défilement</td>
154        <td>cochée</td>
155        <td>Si cette option est cochéee, ColorBox cachera les barres de défilement pour les contenus débordant de la fenêtre.</td>
156      </tr>
157      <tr>
158        <td>Largeur initiale</td>
159        <td>300</td>
160        <td>Largeur initiale de la fenêtre, avant que tout contenu soit chargé.</td>
161      </tr>
162      <tr>
163        <td>Hauteur initiale</td>
164        <td>100</td>
165        <td>Hauteur initiale de la fenêtre, avant que tout contenu soit chargé.</td>
166      </tr>
167      <tr>
168        <td>Largeur maximale</td>
169        <td>vide</td>
170        <td>Définit la largeur maximale de la fenêtre modale. Exemple: "100%", 500, "500px"</td>
171      </tr>
172      <tr>
173        <td>Hauteur maximale</td>
174        <td>vide</td>
175        <td>Définir la hauteur maximale de la fenêtre modale. Exemple: "100%", 500, "500px"</td>
176      </tr>
177    </table>
178    <h3>Javascript</h3>
179    <table>
180      <tr>
181        <th class="key">Option</th>
182        <th class="default">Defaut</th>
183        <th class="description">Description</th>
184      </tr>
185      <tr>
186        <td>onOpen</td>
187        <td>vide</td>
188        <td>Callback envoyé avant que ColorBox s'ouvre.</td>
189      </tr>
190      <tr>
191        <td>onLoad</td>
192        <td>vide</td>
193        <td>Callback envoyé avant de charger le contenu.</td>
194      </tr>
195      <tr>
196        <td>onComplete</td>
197        <td>vide</td>
198        <td>Callback envoyé une fois le contenu affiché.</td>
199      </tr>
200      <tr>
201        <td>onCleanup</td>
202        <td>vide</td>
203        <td>Callback envoyé avant de fermer la fenêtre.</td>
204      </tr>
205      <tr>
206        <td>onClosed</td>
207        <td>vide</td>
208        <td>Callback envoyé quand ColorBox est fermée.</td>
209      </tr>
210    </table>
211    <h3>Thèmes</h3>
212    <h4>Thèmes livrés</h4>
213    <p>ColorBox propose 6 thèmes pour choisir l'apparence de la fenêtre modale. D'autres seront ajoutés par la suite.</p>
214    <p>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.</p>
215    <h4>Modification des thèmes</h4>
216    <h5>Principe</h5>
217    <p>La fenêtre modale de ColorBox peut être entièrement stylée en CSS, et les images modifiées.</p>
218    <p>ColorBox permet de définir une feuille de style personnalisée, stockée dans votre répertoire de médias, et dont les règles écraseront les règles de même nom du thème utilisé.</p>
219    <p>Voici comment procéder :</p>
220    <h5>Créer un répertoires de thèmes personnels</h5>
221    <p>Commencez par créer, à la racine de votre répertoire de médias, les répertoires nécessaires pour obtenir l'arborescence suivante :</p>
222    <pre>colorbox/themes/x/</pre>
223    <p>où
224      <em>x</em>
225      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 changeant
226      <em>x</em>
227      si vous devez modifier plusieurs thèmes.</p>
228    <h5>Créer votre feuille de style</h5>
229    <p>Ajoutez maintenant dans le répertoire
230      <em>x</em>
231      une feuille de style nommée
232      <em>colorbox_user.css</em>
233      avec
234      <strong>seulement</strong>
235      les règles que vous voulez voir appliquer
236      <strong>à la place</strong>
237      de celles du thème, par exemple</p>
238    <pre>#cboxOverlay{background-color:red;}</pre>
239    <p>si vous ne souhaitez changer que la couleur de fond de la fenêtre modale</p>
240    <h5>Modifications des images</h5>
241    <p>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<em>colorbox_user.css</em>.</p>
242    <h3>Goodie</h3>
243    <p>ColorBox peut afficher autre chose que des images, voici quelques indications pour commencer à jouer avec :</p>
244    <h4>Contenu html</h4>
245    <p>Créez un fichier nommé
246      <em>test.html</em>
247      et contenant la portion de code que vous voulez afficher dans ColorBox, par exemple</p>
248    <pre>&lt;p&gt;Test&lt;/p&gt;
249      &lt;p&gt;&lt;img src="/public/test.jpg" alt="" /&gt;&lt;/p&gt;</pre>
250    <p>Envoyez ce fichier et l'image dans votre répertoire de médias.</p>
251    <p>Dans un billet (syntaxe wiki), saisissez :</p>
252    <pre>///html
253      &lt;script type="text/javascript"&gt;
254      $(document).ready(function(){
255      $(".html").colorbox();
256      });
257      &lt;/script&gt;
258     
259      &lt;p&gt;&lt;a class="html" href="/public/test.html" title="Ma jolie page"&gt;html&lt;/a&gt;&lt;/p&gt;
260      ///</pre>
261    <p>Quand vous cliquez sur le lien dans le billet, la page
262      <em>test.html</em>
263      est affichée par ColorBox.</p>
264    <h4>Autres contenus</h4>
265    <p>Sur le même principe, si votre page
266      <em>test.html</em>
267      contient le code pour un lecteur vidéo entouré de ses balises
268      <em>object</em>
269      , celui-ci s'affichera dans ColorBox.</p>
270    <p>Les possibilités offertes par ce système sont très nombreuses et intéressantes...</p>
271  </body>
272</html>
Note: See TracBrowser for help on using the repository browser.

Sites map