Dotclear

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

Revision 2086, 10.5 KB checked in by philippe, 14 years ago (diff)

1.3.2 Added theme Vintage Lightbox and corrected help files
  • 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. If however you wish to activate these functions, follow instructions in
214      <em>themes/3/colorbox_common.css</em>
215      .</p>
216    <p></p>
217    <h4>Modifying themes</h4>
218    <h5>Principle</h5>
219    <p>ColorBox modal window can be entirely styled using CSS, and all images modified. Plugin ships with a stylesheet named
220      <em>colorbox_common.css</em>
221      . It is the one you must not touch !</p>
222    <p>In each theme you will find a stylesheet that you may wish to modify, it is named
223      <em>colorbox_theme.css</em>
224    </p>
225    <p>In each theme there is also a directory named
226      <em>images</em>
227      : in there, you may modify your modal window navigation icons.</p>
228    <h5>Structure</h5>
229    <p>A theme is made of a numbered directory with the following content:</p>
230    <ul>
231      <li>a file named
232        <em>colorbox_theme.css</em>
233        with all ColorBox selectors that you can modify</li>
234      <li>a directory named
235        <em>images</em>
236        containing all images (CSS sprites or icons)</li>
237    </ul>
238    <h5>CSS</h5>
239    <p>You may position all blocks to your liking and style them.</p>
240    <p>Important : if you change images linked in the stylesheet, put them in the themes
241      <em>images</em>
242      folder and link them as follows:</p>
243    <pre>background:url(index.php?pf=colorbox/themes/x/images/image_name.png)...</pre>
244    <p>where x is the theme number.</p>
245    <h3>Goodie</h3>
246    <p>ColorBox display more than images, here are some instructions to start playing with:</p>
247    <h4>html content</h4>
248    <p>Create a file named
249      <em>test.html</em>
250      containing the html code you want ColorBox to display, for example</p>
251    <pre>&lt;p&gt;Test&lt;/p&gt;
252      &lt;p&gt;&lt;img src="/public/test.jpg" alt="" /&gt;&lt;/p&gt;</pre>
253    <p>Send this file and the image to your public folder.</p>
254    <p>Type this (wiki syntax) in your post:</p>
255    <pre>///html
256      &lt;script type="text/javascript"&gt;
257      $(document).ready(function(){
258      $(".html").colorbox();
259      });
260      &lt;/script&gt;
261     
262      &lt;p&gt;&lt;a class="html" href="/public/test.html" title="My pretty html"&gt;html&lt;/a&gt;&lt;/p&gt;
263      ///</pre>
264    <p>When you click on the link,
265      <em>test.html</em>
266      is displayed by ColorBox.</p>
267    <h4>Other content</h4>
268    <p>On the same idea, if
269      <em>test.html</em>
270      contains a video player code within its
271      <em>object</em>
272      tags, the video will be dispalyed in ColorBox.</p>
273    <p>Possibilities offered by this system are numerous and interesting...</p>
274  </body>
275</html>
Note: See TracBrowser for help on using the repository browser.

Sites map