Dotclear

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

Revision 2111, 10.4 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>ColorBox advanced configuration</title>
5  </head>
6  <body>
7    <h2>Advanced parameters help</h2>
8    <h3>Selectors</h3>
9    <p>By default, ColorBox is activated only for images within posts.</p>
10    <p>If you wish to activate it for supplementary blocks, type here the list of jQuery selectors, comma separated, corresponding to these blocks.</p>
11    <p>For example if you wish to activate ColorBox for blocks
12      <em>#sidebar</em>
13      and
14      <em>#pictures</em>, type:</p>
15    <pre>div#sidebar,div#pictures</pre>
16    <p>in the field. Please note that images contained in the blocks will be considered as being in separate groups for images counters and slideshows.</p>
17    <p>If you leave this field empty, only post images will be displayed by ColorBox.</p>
18    <h3>Effects</h3>
19    <table>
20      <tr>
21        <th class="key">Option</th>
22        <th class="default">Default</th>
23        <th class="description">Description</th>
24      </tr>
25      <tr>
26        <td>Transition type</td>
27        <td>"elastic"</td>
28        <td>The transition type. Can be set to "elastic", "fade", or "none".</td>
29      </tr>
30      <tr>
31        <td>Transition speed</td>
32        <td>350</td>
33        <td>Sets the speed of the fade and elastic transitions, in milliseconds.</td>
34      </tr>
35      <tr>
36        <td>Opacity</td>
37        <td>0.85</td>
38        <td>The overlay opacity level. Range: 0 to 1.</td>
39      </tr>
40      <tr >
41        <td>Auto open ColorBox</td>
42        <td>false</td>
43        <td>If true, the lightbox will automatically open with no input from the visitor.</td>
44      </tr>
45      <tr>
46        <td>Enable preloading for photo group</td>
47        <td>true</td>
48        <td>Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading.  Set to 'false' to disable.</td>
49      </tr>
50      <tr>
51        <td>Enable close by clicking on overlay</td>
52        <td>true</td>
53        <td>If true, enables closing ColorBox by clicking on the background overlay.</td>
54      </tr>
55      <tr>
56        <td>Enable slideshow</td>
57        <td>false</td>
58        <td>If true, adds an automatic slideshow to a content group of images.</td>
59      </tr>
60      <tr>
61        <td>Auto start slideshow</td>
62        <td>true</td>
63        <td>If true, the slideshow will automatically start to play.</td>
64      </tr>
65      <tr>
66        <td>Slideshow speed</td>
67        <td>2500</td>
68        <td>Sets the speed of the slideshow, in milliseconds.</td>
69      </tr>
70      <tr>
71        <td>Slideshow start display text</td>
72        <td>"start slideshow"</td>
73        <td>Text for the slideshow start button.</td>
74      </tr>
75      <tr>
76        <td>Slideshow stop display text</td>
77        <td>"stop slideshow"</td>
78        <td>Text for the slideshow stop button</td>
79      </tr>
80    </table>
81    <h3>Modal window</h3>
82    <table>
83      <tr>
84        <th class="key">Key</th>
85        <th class="default">Default</th>
86        <th class="description">Description</th>
87      </tr>
88      <tr>
89        <td>Default title</td>
90        <td>false</td>
91        <td>This can be used as an anchor title alternative for ColorBox.</td>
92      </tr>
93      <tr>
94        <td>Current text</td>
95        <td>"{current} of {total}"</td>
96        <td>Text format for the content group / gallery count.  {current} and {total} are detected and replaced with actual numbers while ColorBox runs.</td>
97      </tr>
98      <tr>
99        <td>Previous text</td>
100        <td>"previous"</td>
101        <td>Text for the previous button in a shared relation group (same values for 'rel' attribute).</td>
102      </tr>
103      <tr>
104        <td>Next text</td>
105        <td>"next"</td>
106        <td>Text for the next button in a shared relation group (same values for 'rel' attribute).</td>
107      </tr>
108      <tr>
109        <td>Close text</td>
110        <td>"close"</td>
111        <td>Text for the close button.  The 'Esc' key will also close ColorBox.</td>
112      </tr>
113      <tr>
114        <td>Display content in an iframe</td>
115        <td>false</td>
116        <td>If 'true' specifies that content should be displayed in an iFrame.</td>
117      </tr>
118    </table>
119    <h3>Dimensions</h3>
120    <table>
121      <tr>
122        <th class="key">Key</th>
123        <th class="default">Default</th>
124        <th class="description">Description</th>
125      </tr>
126      <tr>
127        <td>Fixed width</td>
128        <td>false</td>
129        <td>Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500</td>
130      </tr>
131      <tr>
132        <td>Fixed height</td>
133        <td>false</td>
134        <td>Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500</td>
135      </tr>
136      <tr>
137        <td>Fixed inner width</td>
138        <td>false</td>
139        <td>This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500</td>
140      </tr>
141      <tr>
142        <td>Fixed inner height</td>
143        <td>false</td>
144        <td>This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500</td>
145      </tr>
146      <tr>
147        <td>Scale photos</td>
148        <td>true</td>
149        <td>If 'true' and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.</td>
150      </tr>
151      <tr>
152        <td>Hide overflowing content</td>
153        <td>true</td>
154        <td>If 'false' ColorBox will hide scrollbars for overflowing content.  This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.</td>
155      </tr>
156      <tr>
157        <td>Initial width</td>
158        <td>300</td>
159        <td>Set the initial width, prior to any content being loaded.</td>
160      </tr>
161      <tr>
162        <td>Initial height</td>
163        <td>100</td>
164        <td>Set the initial height, prior to any content being loaded.</td>
165      </tr>
166      <tr>
167        <td>Max width</td>
168        <td>false</td>
169        <td>Set a maximum width for loaded content. Example: "100%", 500, "500px"</td>
170      </tr>
171      <tr>
172        <td>Max height</td>
173        <td>false</td>
174        <td>Set a maximum height for loaded content. Example: "100%", 500, "500px"</td>
175      </tr>
176    </table>
177    <h3>Javascript</h3>
178    <table>
179      <tr>
180        <th class="key">Option</th>
181        <th class="default">Defaut</th>
182        <th class="description">Description</th>
183      </tr>
184      <tr>
185        <td>Callback name for onOpen event</td>
186        <td>false</td>
187        <td>Callback that fires right before ColorBox begins to open.</td>
188      </tr>
189      <tr>
190        <td>Callback name for onLoad event</td>
191        <td>false</td>
192        <td>Callback that fires right before attempting to load the target content.</td>
193      </tr>
194      <tr>
195        <td>Callback name for onComplete event</td>
196        <td>false</td>
197        <td>Callback that fires right after loaded content is displayed.</td>
198      </tr>
199      <tr>
200        <td>Callback name for onCleanup event</td>
201        <td>false</td>
202        <td>Callback that fires at the start of the close process.</td>
203      </tr>
204      <tr>
205        <td>Callback name for onClosed event</td>
206        <td>false</td>
207        <td>Callback that fires once ColorBox is closed.</td>
208      </tr>
209    </table>
210    <h3>Themes</h3>
211    <h4>Included themes</h4>
212    <p>ColorBox ships with 6 themes to choose its modal window's appearance. Others will be added later.</p>
213    <p>Lightbox Classic theme is special : it is designed to look exactly like the former plugin, and has no view counter and no slideshow commands.</p>
214    <h4>Modifying themes</h4>
215    <h5>Principle</h5>
216    <p>ColorBox modal window can be entirely styled using CSS, and its navigation images modified.</p>
217    <p>ColorBox allows to define for each theme a personnal stylesheet, stored in your public folder, and whose rules will overwrite existing theme rules.</p>
218    <p>Here is how to do it:</p>
219    <h5>Create a personnal Colorbox themes directory</h5>
220    <p>First create a directory, at the root of your plugin folder, containing the following hierarchy :</p>
221    <pre>colorbox/themes/x/</pre>
222    <p>where
223      <em>x</em>
224      is the number of the theme you wish to modify. In this directory you will store all your modifications on the theme. Repeat this operation and change
225      <em>x</em>
226      if you wish to modify several themes.</p>
227    <h5>Create your stylesheet</h5>
228    <p>Add now in directory
229      <em>x</em>
230      a stylesheet named
231      <em>colorbox_user.css</em>
232      with
233      <strong>only</strong>
234      the rules you want to apply
235      <strong>instead of</strong>
236      theme rules, i.e.</p>
237    <pre>#cboxOverlay{background-color:red;}</pre>
238    <p>if you only wish to change modal window background color.</p>
239    <h5>Add images</h5>
240    <p>If you wish to modify modal window navigation graphics, place your images in the personnal directory, and refer to them in <em>colorbox_user.css</em>.</p>
241    <h3>Goodie</h3>
242    <p>ColorBox display more than images, here are some instructions to start playing with:</p>
243    <h4>html content</h4>
244    <p>Create a file named
245      <em>test.html</em>
246      containing the html code you want ColorBox to display, for example</p>
247    <pre>&lt;p&gt;Test&lt;/p&gt;
248      &lt;p&gt;&lt;img src="/public/test.jpg" alt="" /&gt;&lt;/p&gt;</pre>
249    <p>Send this file and the image to your public folder.</p>
250    <p>Type this (wiki syntax) in your post:</p>
251    <pre>///html
252      &lt;script type="text/javascript"&gt;
253      $(document).ready(function(){
254      $(".html").colorbox();
255      });
256      &lt;/script&gt;
257     
258      &lt;p&gt;&lt;a class="html" href="/public/test.html" title="My pretty html"&gt;html&lt;/a&gt;&lt;/p&gt;
259      ///</pre>
260    <p>When you click on the link,
261      <em>test.html</em>
262      is displayed by ColorBox.</p>
263    <h4>Other content</h4>
264    <p>On the same idea, if
265      <em>test.html</em>
266      contains a video player code within its
267      <em>object</em>
268      tags, the video will be dispalyed in ColorBox.</p>
269    <p>Possibilities offered by this system are numerous and interesting...</p>
270  </body>
271</html>
Note: See TracBrowser for help on using the repository browser.

Sites map