Главная Обзор Помощь
Вход
docker
/
ohmu
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 67c26b8c33
Ветки Метки
ohmu
/
third
/
drupal
/
bussikeskus
/
php83-test
/
html
/
sites
/
all
/
libraries
/
jquery.jcarousel
/
index.html

index.html 23 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. 

  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    4. 

  4. <head>
    5. 

  5. <title>jCarousel - Riding carousels with jQuery</title>
    6. 

  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    7. 

  7. <link href="style.css" rel="stylesheet" type="text/css">
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <div id="wrap">
    11. 

  11.   <h1>jCarousel</h1>
    12. 

  12.   <h2>Riding carousels with jQuery</h2>
    13. 

  13.   <p><strong>Author:</strong> <a href="http://sorgalla.com">Jan Sorgalla</a><br />
    14. 

  14.     <strong>Version:</strong> 0.2.8 (<a href="changelog.html">Changelog</a>)<br />
    15. 

  15.     <strong>Download:</strong> <a href="http://sorgalla.com/projects/download.php?jcarousel">jcarousel.tar.gz</a> or <a href="http://sorgalla.com/projects/download-zip.php?jcarousel">jcarousel.zip</a><br />
    16. 

  16.     <strong>Source Code:</strong> <a href="http://github.com/jsor/jcarousel">http://github.com/jsor/jcarousel</a><br/>
    17. 

  17.     <strong>Bugtracker:</strong> <a href="http://github.com/jsor/jcarousel/issues">http://github.com/jsor/jcarousel/issues</a><br/>
    18. 

  18.     <strong>Licence:</strong> Dual licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
    19. 

  19.     and <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.</p>
    20. 

  20. 

  21.   <a name="Contents"></a>
    22. 

  22.   <h3>Contents</h3>
    23. 

  23.     <ol>
    24. 

  24.     <li><a href="#Introduction">Introduction</a></li>
    25. 

  25.     <li><a href="#Examples">Examples</a></li>
    26. 

  26.     <li><a href="#Getting-Started">Getting started</a></li>
    27. 

  27.     <li><a href="#Dynamic-Content-Loading">Dynamic content loading</a></li>
    28. 

  28.     <li><a href="#Accessing-The-Jcarousel-Instance">Accessing the jCarousel instance</a></li>
    29. 

  29.     <li><a href="#Defining-The-Number-Of-Visible-Items">Defining the number of visible items</a></li>
    30. 

  30.     <li><a href="#Configuration">Configuration</a></li>
    31. 

  31.     <li><a href="#Credits">Credits</a></li>
    32. 

  32.   </ol>
    33. 

  33. 

  34.   <a name="Introduction"></a>
    35. 

  35.   <h3>Introduction</h3>
    36. 

  36.   <p>jCarousel is a <a href="http://jquery.com">jQuery</a> plugin for controlling
    37. 

  37.     a list of items in horizontal or vertical order. The items, which can be static
    38. 

  38.     HTML content or loaded with (or without) AJAX, can be scrolled back and forth
    39. 

  39.     (with or without animation).</p>
    40. 

  40. 

  41.   <a name="Examples"></a>
    42. 

  42.     <h3>Examples</h3>
    43. 

  43.   <p>The following examples illustrate the possibilities of jCarousel:</p>
    44. 

  44.   <noscript>
    45. 

  45.   <p style="color:red">You need JavaScript enabled to see the carousel</p>
    46. 

  46.   </noscript>
    47. 

  47.   <ul>
    48. 

  48.     <li><strong>Static Examples</strong>
    49. 

  49.       <ul>
    50. 

  50.         <li><a href="examples/static_simple.html">Simple carousel</a></li>
    51. 

  51.         <li><a href="examples/static_vertical.html">Vertical carousel</a></li>
    52. 

  52.         <li><a href="examples/static_circular.html">Circular carousel</a></li>
    53. 

  53.         <li><a href="examples/static_auto.html">Carousel with autoscrolling</a></li>
    54. 

  54.         <li><a href="examples/static_callbacks.html">Carousel illustrating the
    55. 

  55.           callback functions</a></li>
    56. 

  56.         <li><a href="examples/static_controls.html">Carousel with external controls</a></li>
    57. 

  57.         <li><a href="examples/static_start.html">Carousel with custom start position</a></li>
    58. 

  58.         <li><a href="examples/static_multiple.html">Multiple carousels on one page</a></li>
    59. 

  59.       </ul>
    60. 

  60.     </li>
    61. 

  61.     <li><strong>Dynamic Examples</strong>
    62. 

  62.       <ul>
    63. 

  63.         <li><a href="examples/dynamic_javascript.html">Carousel with dynamic content
    64. 

  64.           loading via JavaScript</a></li>
    65. 

  65.         <li><a href="examples/dynamic_ajax.html">Carousel with dynamic content
    66. 

  66.           loading via Ajax</a></li>
    67. 

  67.         <li><a href="examples/dynamic_ajax_php.html">Carousel with dynamic content
    68. 

  68.           loading via Ajax from a PHP script</a></li>
    69. 

  69.         <li><a href="examples/dynamic_flickr_feed.html">Carousel with dynamic
    70. 

  70.           content loading via Ajax from the Flickr photo stream</a></li>
    71. 

  71.         <li><a href="examples/dynamic_flickr_api.html">Carousel with dynamic content
    72. 

  72.           loading via Ajax from the Flickr API</a></li>
    73. 

  73.       </ul>
    74. 

  74.     </li>
    75. 

  75.     <li><strong>Special Examples</strong>
    76. 

  76.       <ul>
    77. 

  77.         <li><a href="examples/special_textscroller.html">Using jCarousel as a
    78. 

  78.           Textscroller</a></li>
    79. 

  79.         <li><a href="examples/special_flexible.html">Flexible carousel</a></li>
    80. 

  80.         <li><a href="examples/special_thickbox.html">jCarousel and Thickbox 3</a></li>
    81. 

  81.         <li><a href="examples/special_easing.html">Carousel with custom animation
    82. 

  82.           effect</a></li>
    83. 

  83.       </ul>
    84. 

  84.     </li>
    85. 

  85.   </ul>
    86. 

  86. 

  87.   <a name="Getting-Started"></a>
    88. 

  88.   <h3>Getting started</h3>
    89. 

  89.   <p>To use the jCarousel component, include the <a href="http://jquery.com">jQuery</a>
    90. 

  90.     library, the jCarousel source file and a jCarousel skin stylesheet file inside the <code>&lt;head&gt;</code> tag
    91. 

  91.     of your HTML document:</p>
    92. 

  92.   <pre>
    93. 

  93. &lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;
    94. 

  94. &lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/lib/jquery.jcarousel.min.js&quot;&gt;&lt;/script&gt;
    95. 

  95. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/path/to/skin/skin.css&quot; /&gt;
    96. 

  96. </pre>
    97. 

  97.   <p>The download package contains some example skin packages. Feel free to build your own skins based on it.</p>
    98. 

  98. 	<p>jCarousel expects a very basic HTML markup structure inside your HTML document:</p>
    99. 

  99.   <pre>
    100. 

  100. &lt;ul id=&quot;mycarousel&quot; class=&quot;jcarousel-skin-<em>name</em>&quot;&gt
    101. 

  101.    &lt;!-- The content goes in here --&gt;
    102. 

  102. &lt;/ul&gt;
    103. 

  103. </pre>
    104. 

  104.   <p>jCarousel automatically wraps the required HTML markup around the list. The
    105. 

  105.     class attribute applies the jCarousel skin <em>&quot;name&quot;</em> to the
    106. 

  106.     carousel.</p>
    107. 

  107.     <p> To setup jCarousel, add the following code inside the <code>&lt;head&gt;</code>
    108. 

  108.     tag of your HTML document:</p>
    109. 

  109.     <pre>
    110. 

  110. &lt;script type=&quot;text/javascript&quot;&gt;
    111. 

  111. jQuery(document).ready(function() {
    112. 

  112.     jQuery('#mycarousel').jcarousel({
    113. 

  113.         // Configuration goes here
    114. 

  114.     });
    115. 

  115. });
    116. 

  116. &lt;/script&gt;
    117. 

  117. </pre>
    118. 

  118.     <p> jCarousel accepts a lot of configuration options, see chapter "<a href="#Configuration">Configuration</a>"
    119. 

  119.     for further informations.</p>
    120. 

  120.     <p>After jCarousel has been initialised, the fully created markup in
    121. 

  121.     the DOM is:</p>
    122. 

  122.     <pre>
    123. 

  123. &lt;div class=&quot;jcarousel-skin-<em>name</em>&quot;&gt;
    124. 

  124.   &lt;div class=&quot;jcarousel-container&quot;&gt;
    125. 

  125.     &lt;div class=&quot;jcarousel-clip&quot;&gt;
    126. 

  126.       &lt;ul class=&quot;jcarousel-list&quot;&gt;
    127. 

  127.         &lt;li class=&quot;jcarousel-item-1&quot;&gt;First item&lt;/li&gt;
    128. 

  128.         &lt;li class=&quot;jcarousel-item-2&quot;&gt;Second item&lt;/li&gt;
    129. 

  129.       &lt;/ul&gt;
    130. 

  130.     &lt;/div&gt;
    131. 

  131.     &lt;div disabled=&quot;disabled&quot; class=&quot;jcarousel-prev jcarousel-prev-disabled&quot;&gt;&lt;/div&gt;
    132. 

  132.     &lt;div class=&quot;jcarousel-next&quot;&gt;&lt;/div&gt;
    133. 

  133.   &lt;/div&gt;
    134. 

  134. &lt;/div&gt;
    135. 

  135. </pre>
    136. 

  136. 

  137.   <p>As you can see, there are some elements added which have assigned classes
    138. 

  138.     (in addition to the classes you may have already assigned manually). Feel
    139. 

  139.     free to design your carousel with the classes you can see above.</p>
    140. 

  140.     <h4>Note:</h4>
    141. 

  141.   <ul>
    142. 

  142.     <li>The skin class &quot;jcarousel-skin-<em>name&quot;</em> has been moved
    143. 

  143.       from the <code>&lt;ul&gt;</code> to the top <code>&lt;div&gt;</code> element.</li>
    144. 

  144.     <li>The last 2 nested <code>&lt;div&gt;</code>'s under <code>&lt;div class=&quot;jcarousel-container&quot;&gt;</code>
    145. 

  145.         are the next/prev buttons of the carousel. The first one illustrates a disabled button, the second an enabled one. The disabled
    146. 

  146.         button has the attribute
    147. 

  147.       <code>disabled</code> (which actually makes no sense for <code>&lt;div&gt;</code>
    148. 

  148.       elements, but you can also use <code>&lt;button&gt;</code> elements or
    149. 

  149.       whatever  you want) as well as the additional class <code>jcarousel-prev-disabled</code>
    150. 

  150.       (or <code>jcarousel-next-disabled</code>).</li>
    151. 

  151.     <li>All <code>&lt;li&gt;</code> elements of the list have the class <code></code><code>jcarousel-item-<em>n</em></code>
    152. 

  152.       assigned where <code><em>n</em></code> represents the position in the list.</li>
    153. 

  153.     <li>Not shown here is, that all classes are followed by additional classes with a suffix
    154. 

  154.       dependent on the orientation of the carousel, ie. <code>&lt;ul class=&quot;jcarousel-list
    155. 

  155.       jcarousel-list-horizontal&quot;&gt;</code> for a horizontal carousel.</li>
    156. 

  156.   </ul>
    157. 

  157. 

  158.   <a name="Dynamic-Content-Loading"></a>
    159. 

  159.   <h3>Dynamic content loading</h3>
    160. 

  160.   <p>By passing the callback function <code>itemLoadCallback</code> as configuration
    161. 

  161.     option, you are able to dynamically create <code>&lt;li&gt;</code> items for the content.</p>
    162. 

  162.   <pre>
    163. 

  163. &lt;script type=&quot;text/javascript&quot;&gt;
    164. 

  164. jQuery(document).ready(function() {
    165. 

  165.     jQuery('#mycarousel').jcarousel({
    166. 

  166.         itemLoadCallback: itemLoadCallbackFunction
    167. 

  167.     });
    168. 

  168. });
    169. 

  169. &lt;/script&gt;</pre>
    170. 

  170.   <p><code>itemLoadCallbackFunction</code> is a JavaScript function that is called
    171. 

  171.     when the carousel requests a set of items to be loaded. Two parameters are
    172. 

  172.     passed: The instance of the requesting carousel and a flag which indicates
    173. 

  173.     the current state of the carousel ('init', 'prev' or 'next').</p>
    174. 

  174.     <pre>
    175. 

  175. &lt;script type=&quot;text/javascript&quot;&gt;
    176. 

  176. function itemLoadCallbackFunction(carousel, state)
    177. 

  177. {
    178. 

  178.     for (var i = carousel.first; i &lt;= carousel.last; i++) {
    179. 

  179.         // Check if the item already exists
    180. 

  180.         if (!carousel.has(i)) {
    181. 

  181.             // Add the item
    182. 

  182.             carousel.add(i, &quot;I'm item #&quot; + i);
    183. 

  183.         }
    184. 

  184.     }
    185. 

  185. };
    186. 

  186. &lt;/script&gt;</pre>
    187. 

  187.     <p>jCarousel contains a convenience method <code>add()</code> that can be
    188. 

  188.       passed the index of the item to create and the innerHTML string of the
    189. 

  189.       item to be
    190. 

  190.       created. If the item already exists, it just updates the innerHTML. You can
    191. 

  191.       access the index of the first and last visible element by the public variables <code>carousel.first</code> and <code>carousel.last</code>.
    192. 

  192.     </p>
    193. 

  193. 

  194.     <a name="Accessing-The-Jcarousel-Instance"></a>
    195. 

  195.     <h3>Accessing the jCarousel instance</h3>
    196. 

  196.     <p>The instance of the carousel will be stored with the <code>data()</code> method of jQuery under the key <code>jcarousel</code> for a simple access.</p>
    197. 

  197.     <p>If you have created a carousel like:</p>
    198. 

  198.     <pre>
    199. 

  199. jQuery(document).ready(function() {
    200. 

  200.     jQuery('#mycarousel').jcarousel();
    201. 

  201. });</pre>
    202. 

  202.     <p>You can access the instance with:</p>
    203. 

  203.     <pre>
    204. 

  204. var carousel = jQuery('#mycarousel').data('jcarousel');</pre>
    205. 

  205.     <p>You can also access methods of the instance directly, for example the <code>add()</code> method:
    206. 

  206.     <pre>
    207. 

  207. var index = 1;
    208. 

  208. var html = 'My content of item no. 1';
    209. 

  209. jQuery('#mycarousel').jcarousel('add', index, html);</pre>
    210. 

  210. 

  211.     <a name="Defining-The-Number-Of-Visible-Items"></a>
    212. 

  212.     <h3>Defining the number of visible items</h3>
    213. 

  213. 

  214.     <p>Sometimes people are confused how to define the number of visible items because there is no option for this as they expect (Yes, there is an option <code>visible</code>, we discuss this later).</p>
    215. 

  215.     <p>You simply define the number of visible items by defining the width (or height) with the class <code>.jcarousel-clip</code> (or the more distinct <code>.jcarousel-clip-horizontal</code> and <code>.jcarousel-clip-vertical</code> classes) in your skin stylesheet.</p>
    216. 

  216.     <p>This offers a lot of flexibility, because you can define the width in pixel for a fixed carousel or in percent for a flexible carousel (<a href="examples/static_callbacks.html">This example</a> shows a carousel with a clip width in percent, resize the browser to see it in effect).</p>
    217. 

  217.     <p>So, why there is an option <code>visible</code>? If you set the option <code>visible</code>, jCarousel sets the width of the visible items to always make this number of items visible. Open <a href="examples/special_flexible.html">this example</a> and resize your browser window to see it in effect.</p>
    218. 

  218. 

  219.     <a name="Configuration"></a>
    220. 

  220.     <h3>Configuration</h3>
    221. 

  221.   <p> jCarousel accepts a list of options to control the appearance and behaviour
    222. 

  222.     of the carousel. Here is the list of options you may set: </p>
    223. 

  223.   <table>
    224. 

  224.     <thead>
    225. 

  225.       <tr>
    226. 

  226.         <th>Property</th>
    227. 

  227.         <th>Type</th>
    228. 

  228.         <th>Default</th>
    229. 

  229.         <th>Description</th>
    230. 

  230.       </tr>
    231. 

  231.       <tr>
    232. 

  232.         <td>vertical</td>
    233. 

  233.         <td>bool</td>
    234. 

  234.         <td>false</td>
    235. 

  235.         <td>Specifies wether the carousel appears in horizontal or vertical orientation.
    236. 

  236.           Changes the carousel from a left/right style to a up/down style carousel.</td>
    237. 

  237.       </tr>
    238. 

  238.       <tr>
    239. 

  239.         <td>rtl</td>
    240. 

  240.         <td>bool</td>
    241. 

  241.         <td>false</td>
    242. 

  242.         <td>Specifies wether the carousel appears in RTL (Right-To-Left) mode.</td>
    243. 

  243.       </tr>
    244. 

  244.       <tr>
    245. 

  245.         <td>start</td>
    246. 

  246.         <td>integer</td>
    247. 

  247.         <td>1</td>
    248. 

  248.         <td>The index of the item to start with.</td>
    249. 

  249.       </tr>
    250. 

  250.       <tr>
    251. 

  251.         <td>offset</td>
    252. 

  252.         <td>integer</td>
    253. 

  253.         <td>1</td>
    254. 

  254.         <td>The index of the first available item at initialisation.</td>
    255. 

  255.       </tr>
    256. 

  256.     </thead>
    257. 

  257.     <tbody>
    258. 

  258.       <tr>
    259. 

  259.         <td>size</td>
    260. 

  260.         <td>integer</td>
    261. 

  261.         <td><em>Number of existing &lt;li&gt; elements if size is not passed explicitly</em></td>
    262. 

  262.         <td>The number of total items.</td>
    263. 

  263.       </tr>
    264. 

  264.       <tr>
    265. 

  265.         <td>scroll</td>
    266. 

  266.         <td>integer</td>
    267. 

  267.         <td>3</td>
    268. 

  268.         <td>The number of items to scroll by.</td>
    269. 

  269.       </tr>
    270. 

  270.       <tr>
    271. 

  271.         <td>visible</td>
    272. 

  272.         <td>integer</td>
    273. 

  273.         <td>null</td>
    274. 

  274.         <td>If passed, the width/height of the items will be calculated and set
    275. 

  275.           depending on the width/height of the clipping, so that exactly that
    276. 

  276.           number of items will be visible.</td>
    277. 

  277.       </tr>
    278. 

  278.       <tr>
    279. 

  279.         <td>animation</td>
    280. 

  280.         <td>mixed</td>
    281. 

  281.         <td>&quot;fast&quot;</td>
    282. 

  282.         <td>The speed of the scroll animation as string in jQuery terms (<code>&quot;slow&quot;</code>
    283. 

  283.           or <code>&quot;fast&quot;</code>) or milliseconds as integer
    284. 

  284.            (See <a href="http://docs.jquery.com/effects/animate">jQuery Documentation</a>).
    285. 

  285.             If set to 0, animation is turned off.</td>
    286. 

  286.       </tr>
    287. 

  287.       <tr>
    288. 

  288.         <td>easing</td>
    289. 

  289.         <td>string</td>
    290. 

  290.         <td>null</td>
    291. 

  291.         <td>The name of the easing effect that you want to use (See <a href="http://docs.jquery.com/effects/animate">jQuery
    292. 

  292.           Documentation</a>).</td>
    293. 

  293.       </tr>
    294. 

  294.       <tr>
    295. 

  295.         <td>auto</td>
    296. 

  296.         <td>integer</td>
    297. 

  297.         <td>0</td>
    298. 

  298.         <td>Specifies how many seconds to periodically autoscroll the content.
    299. 

  299.           If set to <code>0</code> (default) then autoscrolling is turned off.
    300. 

  300.         </td>
    301. 

  301.       </tr>
    302. 

  302.       <tr>
    303. 

  303.         <td>wrap</td>
    304. 

  304.         <td>string</td>
    305. 

  305.         <td>null</td>
    306. 

  306.         <td>Specifies whether to wrap at the first/last item (or both) and jump
    307. 

  307.           back to the start/end. Options are <code>&quot;first&quot;</code>, <code>&quot;last&quot;</code>,
    308. 

  308.           <code>&quot;both&quot;</code> or <code>&quot;circular&quot;</code> as string. If set to <code>null</code>,
    309. 

  309.           wrapping is turned off (default).</td>
    310. 

  310.       </tr>
    311. 

  311.       <tr>
    312. 

  312.         <td>initCallback</td>
    313. 

  313.         <td>function</td>
    314. 

  314.         <td>null</td>
    315. 

  315.         <td>JavaScript function that is called right after initialisation of the
    316. 

  316.           carousel. Two parameters are passed: The instance of the requesting
    317. 

  317.           carousel and the state of the carousel initialisation (init, reset or
    318. 

  318.           reload).</td>
    319. 

  319.       </tr>
    320. 

  320.       <tr>
    321. 

  321.         <td>setupCallback</td>
    322. 

  322.         <td>function</td>
    323. 

  323.         <td>null</td>
    324. 

  324.         <td>JavaScript function that is called right after the carousel is completely setup.
    325. 

  325.           One parameter is passed: The instance of the requesting carousel.</td>
    326. 

  326.       </tr>
    327. 

  327.       <tr>
    328. 

  328.         <td>itemLoadCallback</td>
    329. 

  329.         <td>function</td>
    330. 

  330.         <td>null</td>
    331. 

  331.         <td>JavaScript function that is called when the carousel requests a set
    332. 

  332.           of items to be loaded. Two parameters are passed: The instance of the
    333. 

  333.           requesting carousel and the state of the carousel action (prev, next
    334. 

  334.           or init). Alternatively, you can pass a hash of one or two functions
    335. 

  335.           which are triggered before and/or after animation:
    336. 

  336.           <pre>
    337. 

  337. itemLoadCallback: {
    338. 

  338.   onBeforeAnimation: callback1,
    339. 

  339.   onAfterAnimation: callback2
    340. 

  340. }</pre> </td>
    341. 

  341.       </tr>
    342. 

  342.       <tr>
    343. 

  343.         <td>itemFirstInCallback </td>
    344. 

  344.         <td>function</td>
    345. 

  345.         <td>null</td>
    346. 

  346.         <td>JavaScript function that is called (after the scroll animation) when
    347. 

  347.           an item becomes the first one in the visible range of the carousel.
    348. 

  348.           Four parameters are passed: The instance of the requesting carousel
    349. 

  349.           and the <code>&lt;li&gt;</code> object itself, the index which indicates
    350. 

  350.           the position of the item in the list and the state of the carousel action
    351. 

  351.           (prev, next or init). Alternatively, you can pass a hash of one or two
    352. 

  352.           functions which are triggered before and/or after animation:
    353. 

  353.           <pre>
    354. 

  354. itemFirstInCallback: {
    355. 

  355.   onBeforeAnimation: callback1,
    356. 

  356.   onAfterAnimation: callback2
    357. 

  357. }</pre> </td>
    358. 

  358.       </tr>
    359. 

  359.       <tr>
    360. 

  360.         <td>itemFirstOutCallback</td>
    361. 

  361.         <td>function</td>
    362. 

  362.         <td>null</td>
    363. 

  363.         <td>JavaScript function that is called (after the scroll animation) when
    364. 

  364.           an item isn't longer the first one in the visible range of the carousel.
    365. 

  365.           Four parameters are passed: The instance of the requesting carousel
    366. 

  366.           and the <code>&lt;li&gt;</code> object itself, the index which indicates
    367. 

  367.           the position of the item in the list and the state of the carousel action
    368. 

  368.           (prev, next or init). Alternatively, you can pass a hash of one or two
    369. 

  369.           functions which are triggered before and/or after animation:
    370. 

  370.           <pre>
    371. 

  371. itemFirstOutCallback: {
    372. 

  372.   onBeforeAnimation: callback1,
    373. 

  373.   onAfterAnimation: callback2
    374. 

  374. }</pre> </td>
    375. 

  375.       </tr>
    376. 

  376.       <tr>
    377. 

  377.         <td>itemLastInCallback</td>
    378. 

  378.         <td>function</td>
    379. 

  379.         <td>null</td>
    380. 

  380.         <td>JavaScript function that is called (after the scroll animation) when
    381. 

  381.           an item becomes the last one in the visible range of the carousel. Four
    382. 

  382.           parameters are passed: The instance of the requesting carousel and the
    383. 

  383.           <code>&lt;li&gt;</code> object itself, the index which indicates the
    384. 

  384.           position of the item in the list and the state of the carousel action
    385. 

  385.           (prev, next or init). Alternatively, you can pass a hash of one or two
    386. 

  386.           functions which are triggered before and/or after animation:
    387. 

  387.           <pre>
    388. 

  388. itemLastInCallback: {
    389. 

  389.   onBeforeAnimation: callback1,
    390. 

  390.   onAfterAnimation: callback2
    391. 

  391. }</pre> </td>
    392. 

  392.       </tr>
    393. 

  393.       <tr>
    394. 

  394.         <td>itemLastOutCallback</td>
    395. 

  395.         <td>function</td>
    396. 

  396.         <td>null</td>
    397. 

  397.         <td>JavaScript function that is called when an item isn't longer the last
    398. 

  398.           one in the visible range of the carousel. Four parameters are passed:
    399. 

  399.           The instance of the requesting carousel and the <code>&lt;li&gt;</code>
    400. 

  400.           object itself, the index which indicates the position of the item in
    401. 

  401.           the list and the state of the carousel action (prev, next or init).
    402. 

  402.           Alternatively, you can pass a hash of one or two functions which are
    403. 

  403.           triggered before and/or after animation:
    404. 

  404.           <pre>
    405. 

  405. itemLastOutCallback: {
    406. 

  406.   onBeforeAnimation: callback1,
    407. 

  407.   onAfterAnimation: callback2
    408. 

  408. }</pre> </td>
    409. 

  409.       </tr>
    410. 

  410.       <tr>
    411. 

  411.         <td>itemVisibleInCallback</td>
    412. 

  412.         <td>function</td>
    413. 

  413.         <td>null</td>
    414. 

  414.         <td>JavaScript function that is called (after the scroll animation) when
    415. 

  415.           an item is in the visible range of the carousel. Four parameters are
    416. 

  416.           passed: The instance of the requesting carousel and the <code>&lt;li&gt;</code>
    417. 

  417.           object itself, the index which indicates the position of the item in
    418. 

  418.           the list and the state of the carousel action (prev, next or init).
    419. 

  419.           Alternatively, you can pass a hash of one or two functions which are
    420. 

  420.           triggered before and/or after animation:
    421. 

  421.           <pre>
    422. 

  422. itemVisibleInCallback: {
    423. 

  423.   onBeforeAnimation: callback1,
    424. 

  424.   onAfterAnimation: callback2
    425. 

  425. }</pre> </td>
    426. 

  426.       </tr>
    427. 

  427.       <tr>
    428. 

  428.         <td>itemVisibleOutCallback</td>
    429. 

  429.         <td>function</td>
    430. 

  430.         <td>null</td>
    431. 

  431.         <td>JavaScript function that is called (after the scroll animation) when
    432. 

  432.           an item isn't longer in the visible range of the carousel. Four parameters
    433. 

  433.           are passed: The instance of the requesting carousel and the <code>&lt;li&gt;</code>
    434. 

  434.           object itself, the index which indicates the position of the item in
    435. 

  435.           the list and the state of the carousel action (prev, next or init).
    436. 

  436.           Alternatively, you can pass a hash of one or two functions which are
    437. 

  437.           triggered before and/or after animation:
    438. 

  438.           <pre>
    439. 

  439. itemVisibleOutCallback: {
    440. 

  440.   onBeforeAnimation: callback1,
    441. 

  441.   onAfterAnimation: callback2
    442. 

  442. }</pre> </td>
    443. 

  443.       </tr>
    444. 

  444.       <tr>
    445. 

  445.         <td>animationStepCallback</td>
    446. 

  446.         <td>function</td>
    447. 

  447.         <td>null</td>
    448. 

  448.         <td>JavaScript function that is called after each animation step. This
    449. 

  449.           function is directly passed to jQuery's <code>.animate()</code> method
    450. 

  450.           as the <code>step</code> parameter. See the jQuery documentation for the
    451. 

  451.           parameters it will receive.</td>
    452. 

  452.       </tr>
    453. 

  453.       <tr>
    454. 

  454.         <td>buttonNextCallback</td>
    455. 

  455.         <td>function</td>
    456. 

  456.         <td>null</td>
    457. 

  457.         <td>JavaScript function that is called when the state of the 'next' control
    458. 

  458.           is changing. The responsibility of this method is to enable or disable
    459. 

  459.           the 'next' control. Three parameters are passed: The instance of the
    460. 

  460.           requesting carousel, the control element and a flag indicating whether
    461. 

  461.           the button should be enabled or disabled.</td>
    462. 

  462.       </tr>
    463. 

  463.       <tr>
    464. 

  464.         <td>buttonPrevCallback</td>
    465. 

  465.         <td>function</td>
    466. 

  466.         <td>null</td>
    467. 

  467.         <td>JavaScript function that is called when the state of the 'previous'
    468. 

  468.           control is changing. The responsibility of this method is to enable
    469. 

  469.           or disable the 'previous' control. Three parameters are passed: The
    470. 

  470.           instance of the requesting carousel, the control element and a flag
    471. 

  471.           indicating whether the button should be enabled or disabled.</td>
    472. 

  472.       </tr>
    473. 

  473.       <tr>
    474. 

  474.         <td>buttonNextHTML</td>
    475. 

  475.         <td>string</td>
    476. 

  476.         <td><code>&lt;div&gt;&lt;/div&gt;</code></td>
    477. 

  477.         <td>The HTML markup for the auto-generated next button. If set to <code>null</code>,
    478. 

  478.           no next-button is created.</td>
    479. 

  479.       </tr>
    480. 

  480.       <tr>
    481. 

  481.         <td>buttonPrevHTML</td>
    482. 

  482.         <td>string</td>
    483. 

  483.         <td><code>&lt;div&gt;&lt;/div&gt;</code></td>
    484. 

  484.         <td>The HTML markup for the auto-generated prev button. If set to <code>null</code>,
    485. 

  485.           no prev-button is created.</td>
    486. 

  486.       </tr>
    487. 

  487.       <tr>
    488. 

  488.         <td>buttonNextEvent</td>
    489. 

  489.         <td>string</td>
    490. 

  490.         <td>&quot;click&quot;</td>
    491. 

  491.         <td>Specifies the event which triggers the next scroll.</td>
    492. 

  492.       </tr>
    493. 

  493.       <tr>
    494. 

  494.         <td>buttonPrevEvent</td>
    495. 

  495.         <td>string</td>
    496. 

  496.         <td>&quot;click&quot;</td>
    497. 

  497.         <td>Specifies the event which triggers the prev scroll.</td>
    498. 

  498.       </tr>
    499. 

  499.       <tr>
    500. 

  500.         <td>itemFallbackDimension</td>
    501. 

  501.         <td>integer</td>
    502. 

  502.         <td>null</td>
    503. 

  503.         <td>If, for some reason, jCarousel can not detect the width of an item, you can set a fallback dimension (width or height, depending on the orientation) here to ensure correct calculations.</td>
    504. 

  504.       </tr>
    505. 

  505.     </tbody>
    506. 

  506.   </table>
    507. 

  507. 

  508.   <a name="Credits"></a>
    509. 

  509.   <h3>Credits</h3>
    510. 

  510.   <p>Thanks to <a href="http://ejohn.org">John Resig</a> for his fantastic <a href="http://jquery.com">jQuery</a>
    511. 

  511.     library. <br>
    512. 

  512.     jCarousel is inspired by the <a href="http://billwscott.com/carousel/">Carousel
    513. 

  513.     Component</a> written by <a href="http://looksgoodworkswell.com">Bill Scott</a>.</p>
    514. 

  514. </div>
    515. 

  515. </body>
    516. 

  516. </html>
    517.