Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 5th, 2012  |  syntax: None  |  size: 16.38 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. RokBox, the successor of our popular RokZoom plugin, is a mootools powered JavaScript slideshow that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music.
  2. <br><br>
  3. The plugin provides a theme system that allows you to create your own custom ones to fit your websites design. It includes two predefined themes, a Light theme and a Dark theme that will fit seemlessly into your site design. RokBox is as easy as pie to install and customize, providing an easy way to create your own custom themes for it.
  4.  
  5. <h3>Demos</h3>
  6. <p>Below you will find some examples of the syntax used for a variety of RokBox functions.</p>
  7. <p>At any time, you can switch between Light theme and Dark theme by clicking on the buttons below.</p>
  8. <div id="switch-theme"><a class="active" id="light-theme" href="#"><span>Light Theme</span></a> <a id="dark-theme" href="#"><span>Dark Theme</span></a> <a id="mynxx-theme" href="#"><span>Mynxx Theme</span></a></div>
  9.  
  10.  
  11. <div class="rokbox-example">
  12. <h2>Image - Local</h2>
  13. <p>This demo will load a local image and automatically create a thumbnail thanks to "Content - RokBox".</p>
  14. <span class="attention">Since album is not specified, you won't see arrows appear, so you cannot navigate through other RokBox links.</span>
  15.  
  16. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8.jpg" rel="rokbox[561 350]" title="Audi RS8 :: Sample Caption for RS8"><img class="album" src="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8_thumb.jpg" alt="Audi RS8 :: Sample Caption for RS8"></a> </div>
  17.  
  18. <h4>Syntax</h4>
  19. <pre style="width: 720px; overflow: auto;">[rokbox title=|Audi RS8 :: Sample Caption for RS8 Image| size=|561 350|]images/stories/demo/rokbox/rs8.jpg[/rokbox]
  20.  
  21. </pre>
  22. </div>
  23.  
  24. <div class="rokbox-example">
  25. <h2>Image - Local (text instead of thumbnail)</h2>
  26. <p>This demo will load a local image and use text instead of a thumbnail".</p>
  27. <span class="attention">Since album is not specified, you won't see arrows appear, so you cannot navigate through other RokBox links.</span>
  28.  
  29. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8.jpg" rel="rokbox[561 350]" title="Audi RS8 :: Sample Caption for RS8 Image">RokBox link with no Thumbnail</a> </div>
  30.  
  31. <h4>Syntax</h4>
  32. <pre style="width: 720px; overflow: auto;">[rokbox title=|Audi RS8 :: Sample Caption for RS8 Image| text=|RokBox link with no Thumbnail| size=|561 350|]images/stories/demo/rokbox/rs8.jpg[/rokbox]
  33.  
  34. </pre>
  35.  
  36. </div>
  37.  
  38. <div class="rokbox-example">
  39. <h2>Image - Remote</h2>
  40. <p>This demo will load a remote image.</p>
  41. <span class="attention">Thumbnail maker functionality cannot generate thumbnails of remote images, it functions only for local ones. For this remote image we're going to specify a local thumbnail we've created on purpose.</span>
  42.  
  43. <div class="center"><a href="http://www.rockettheme.com/images/extensions/joomla/rokbox/sshot2.jpg" rel="rokbox[450 271]" title="Vauxhall VXR8"><img class="album" src="/extensions/images/stories/demo/rokbox/sshot2_thumb.jpg" alt="Vauxhall VXR8"></a> </div>
  44.  
  45. <h4>Syntax</h4>
  46. <pre style="width: 720px; overflow: auto;">[rokbox title=|Vauxhall VXR8| size=|640 594| thumb=|images/stories/demo/rokbox/sshot2_thumb.jpg|]http://www.rockettheme.com/images/extensions/joomla/rokbox/sshot2.jpg[/rokbox]
  47.  
  48. </pre>
  49.  
  50. </div>
  51.  
  52. <div class="rokbox-example">
  53. <h2>Image - Remote (no sizes provided)</h2>
  54. <p>This demo will load a remote image without having provided sizes.</p>
  55. <span class="attention">Enabling the option "Try to load remote images sizes" in Content - RokBox, RokBox will try to gather the remote image sizes if your server allows it. Note that this option enable could result in slowing your site down based on the remote server reply time. If disabled, anyway, the sizes will be handled by the JavaScript</span>
  56.  
  57. <div class="center"><a href="http://www.rockettheme.com/images/extensions/joomla/rokbox/sshot2.jpg" rel="rokbox[640 594]" title="Vauxhall VXR8"><img class="album" src="/extensions/images/stories/demo/rokbox/sshot2_thumb.jpg" alt="Vauxhall VXR8"></a> </div>
  58.  
  59. <h4>Syntax</h4>
  60. <pre style="width: 720px; overflow: auto;">[rokbox title=|Vauxhall VXR8| thumb=|images/stories/demo/rokbox/sshot2_thumb.jpg|]http://www.rockettheme.com/images/extensions/joomla/rokbox/sshot2.jpg[/rokbox]
  61.  
  62. </pre>
  63.  
  64. </div>
  65.  
  66. <div class="rokbox-example">
  67. <h2>Image not found</h2>
  68. <p>This demo will demonstrate RokBox handling images not found.</p>
  69. <span class="attention">This works for both local and remote images</span>
  70.  
  71. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8-notfound.jpg" rel="rokbox[561 350]" title="Audi RS8 :: Sample Caption for RS8 Image"><img class="album" src="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8-notfound_thumb.jpg" alt="Audi RS8 :: Sample Caption for RS8 Image"></a> </div>
  72.  
  73. <h4>Syntax</h4>
  74. <pre style="width: 720px; overflow: auto;">[rokbox title=|Audi RS8 :: Sample Caption for RS8 Image| size=|561 350|]images/stories/demo/rokbox/rs8-notfound.jpg[/rokbox]
  75.  
  76. </pre>
  77.  
  78. </div>
  79.  
  80. <div class="rokbox-example">
  81. <h2>Audio - mp3</h2>
  82. <p>This demo will load and play a local mp3 file. It could of have been remote also.</p>
  83. <span class="attention">From now on we're going to specify the same album for each demo, so we can navigate through them. Pay attention at the way we have specified the caption description, there's no caption title.</span>
  84.  
  85. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rockettheme.mp3" rel="rokbox[250 15](demo)" title="RocketTheme promo"><img class="album" src="/extensions/images/stories/demo/rokbox/mp3.jpg" alt="RocketTheme promo"></a> </div>
  86.  
  87. <h4>Syntax</h4>
  88. <pre style="width: 720px; overflow: auto;">[rokbox title=|RocketTheme promo| thumb=|images/stories/demo/rokbox/mp3.jpg| size=|250 15| album=|demo|]images/stories/demo/rokbox/rockettheme.mp3[/rokbox]
  89.  
  90. </pre>
  91.  
  92. </div>
  93.  
  94. <div class="rokbox-example">
  95. <h2>Video - Simple SWF File</h2>
  96. <p>This demo will load a simple flash movie (.swf) file.</p>
  97. <span class="attention">This demo simply load a .swf file but queries works the same (i.e. "myfile.swf?bgcolor=true&amp;color=ffffff").</span>
  98.  
  99. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rt_movie.swf" rel="rokbox[400 140]" title="RocketTheme :: RocketTheme Logo's flash movie"><img class="album" src="/extensions/images/stories/demo/rokbox/flash.gif" alt="RocketTheme :: RocketTheme Logo's flash movie"></a> </div>
  100.  
  101. <h4>Syntax</h4>
  102. <pre style="width: 720px; overflow: auto;">[rokbox title=|RocketTheme :: RocketTheme Logo's flash movie| size=|400 140| text=|Click here to load the .SWF file|]images/stories/demo/rokbox/rt_movie.swf[/rokbox]
  103.  
  104.  
  105. </pre>
  106. </div>
  107.  
  108. <div class="rokbox-example">
  109. <h2>Video - YouTube</h2>
  110. <p>This demo will load a YouTube movie.</p>
  111. <span class="attention">YouTube links must be the same as you get from within the URI bar. You can pass all the options to the URI (ie, &amp;hd=1&amp;autoplay=1). For our demo we're going to use this link: <em>http://www.youtube.com/watch?v=6RWQz0Q7_zY</em></span>
  112.  
  113. <div class="center"><a href="http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;hd=1&amp;autoplay=1" rel="rokbox[854 505](demo)" title="Cars :: 2010 Aston Martin Vantage V 12"><img class="album" src="/extensions/images/stories/demo/rokbox/youtube.jpg" alt="Cars :: 2010 Aston Martin Vantage V 12"></a> </div>
  114. <div class="center">
  115.  
  116.         <a href="http://www.youtube.com/watch?v=6RWQz0Q7_zY" rel="rokbox[425 373](demo)" title="Cars :: 2010 Aston Martin Vantage V 12">normal quality</a>  |
  117.         <a href="http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;autoplay=1&amp;fs=1&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;hd=1&amp;border=1" rel="rokbox[854 505](demo)" title="Cars :: 2010 Aston Martin Vantage V 12">HD + autoplay + layout colors</a>  |
  118.         <a href="http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;hd=1&amp;autoplay=1&amp;start=36" rel="rokbox[854 505](demo)" title="Cars :: 2010 Aston Martin Vantage V 12">HD + autoplay + start from 36s</a>
  119. </div>
  120.  
  121. <h4>Syntax</h4>
  122. <h4>Example 1 (thumb)</h4>
  123. <pre style="width: 720px; overflow: auto;">[rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| thumb=|images/stories/demo/rokbox/youtube.jpg| size=|854 505| album=|demo|]http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;hd=1&amp;autoplay=1[/rokbox]
  124.  
  125. </pre>
  126. <h4>Example 2 (normal quality)</h4>
  127. <pre style="width: 720px; overflow: auto;">[rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| text=|normal quality| size=|425 373| album=|demo|]http://www.youtube.com/watch?v=6RWQz0Q7_zY[/rokbox]
  128. </pre>
  129. <h4>Example 3 (HD + autoplay + layout colors)</h4>
  130. <pre style="width: 720px; overflow: auto;">[rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| text=|HD + autoplay + layout colors| size=|854 505| album=|demo|]http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;autoplay=1&amp;fs=1&amp;color1=0x5d1719&amp;color2=0xcd311b&amp;hd=1&amp;border=1[/rokbox]
  131. </pre>
  132. <h4>Example 4 (HD + autoplay + start from 36s)</h4>
  133.  
  134. <pre style="width: 720px; overflow: auto;">[rokbox title=|Cars :: 2010 Aston Martin Vantage V 12| text=|HD + autoplay + start from 36s| size=|854 505| album=|demo|]http://www.youtube.com/watch?v=6RWQz0Q7_zY&amp;hd=1&amp;autoplay=1&amp;start=36[/rokbox]
  135. </pre>
  136. </div>
  137.  
  138. <div class="rokbox-example">
  139. <h2>Built-in FLV Player</h2>
  140. <p>This demo will load a FLV movie.</p>
  141. <span class="attention">FLV built-in is now possible thanks to <a href="http://www.longtailvideo.com/players/jw-flv-player/">JW FLV Player</a>. The FLV video comes from http://www.youtube.com/watch?v=5KTI1-5Lapg <br>You can pass any option allowed by JW FLV Player, please use its <a href="http://developer.longtailvideo.com/trac/wiki/FlashVars">documentation</a> as reference.</span>
  142.  
  143. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/primavera.flv&amp;buffer=10&amp;autostart=true&amp;image=images/stories/demo/rokbox/flv.jpg&amp;fullscreen=true&amp;width=854&amp;height=505" rel="rokbox[854 505](demo)" title="Primavera :: A look at Earth and space."><img class="album" src="/extensions/images/stories/demo/rokbox/flv.jpg" alt="Primavera :: A look at Earth and space."></a> </div>
  144. </div>
  145.  
  146. <h4>Syntax</h4>
  147. <pre style="width: 720px; overflow: auto;">[rokbox title=|Primavera :: A look at Earth and space.| thumb=|images/stories/demo/rokbox/flv.jpg| size=|854 505| album=|demo|]images/stories/demo/rokbox/primavera.flv&amp;buffer=10&amp;autostart=true&amp;image=images/stories/demo/rokbox/flv.jpg&amp;fullscreen=true&amp;width=854&amp;height=505[/rokbox]
  148. </pre>
  149.  
  150.  
  151. <div class="rokbox-example">
  152. <h2>Video - Metacafe</h2>
  153. <p>This demo will load a Metacafe movie.</p>
  154. <span class="attention">Metacafe links must be the as same you get from within the URI bar. For our demo we're going to use this video: <em>http://www.metacafe.com/watch/1291008/how_to_make_jumping_magic_beans/</em></span>
  155.  
  156. <div class="center"><a href="http://www.metacafe.com/watch/1291008/how_to_make_jumping_magic_beans/" rel="rokbox[400 345](demo)" title="Magic Beans :: How to Make Jumping Magic Beans"><img class="album" src="/extensions/images/stories/demo/rokbox/metacafe.jpg" alt="Magic Beans :: How to Make Jumping Magic Beans"></a> </div>
  157.  
  158. <h4>Syntax</h4>
  159. <pre style="width: 720px; overflow: auto;">[rokbox title=|Magic Beans :: How to Make Jumping Magic Beans| thumb=|images/stories/demo/rokbox/metacafe.jpg| size=|400 345| album=|demo|]http://www.metacafe.com/watch/1291008/how_to_make_jumping_magic_beans/[/rokbox]
  160.  
  161. </pre>
  162.  
  163. </div>
  164.  
  165. <div class="rokbox-example">
  166. <h2>Remote Site - Google</h2>
  167. <p>This demo will loads an external site, in our case Google's home page.</p>
  168.  
  169. <div class="center"><a href="http://www.google.com" rel="rokbox[700 450]" title="Did you mean... :: ...Google?"><img class="album" src="/extensions/images/stories/demo/rokbox/google.jpg" alt="Did you mean... :: ...Google?"></a> </div>
  170.  
  171. <pre style="width: 720px; overflow: auto;">[rokbox title=|Did you mean... :: ...Google?| size=|700 450| thumb=|images/stories/demo/rokbox/google.jpg|]http://www.google.com[/rokbox]
  172.  
  173. </pre>
  174. </div>
  175.  
  176. <div class="rokbox-example">
  177. <h2>Remote Site - Google (size: 65% 80% of the screen)</h2>
  178.  
  179. <p>This demo acts like the previous one, but we're using <b>percentages</b> as size.</p>
  180.  
  181. <div class="center"><a href="http://www.google.com" rel="rokbox[65% 80%]" title=""><img class="album" src="/extensions/images/stories/demo/rokbox/google.jpg" alt=""></a> </div>
  182.  
  183. <pre style="width: 720px; overflow: auto;">[rokbox size=|65% 80%| thumb=|images/stories/demo/rokbox/google.jpg|]http://www.google.com[/rokbox]
  184.  
  185. </pre>
  186. </div>
  187.  
  188. <div class="rokbox-example">
  189. <h2>Remote Site - Google (size: fullscreen)</h2>
  190. <p>This demo acts like the previous one, but instead of percentages we're using the <b>fullscreen</b> option as size.</p>
  191.  
  192. <div class="center"><a href="http://www.google.com" rel="rokbox[fullscreen]" title=""><img class="album" src="/extensions/images/stories/demo/rokbox/google.jpg" alt=""></a> </div>
  193.  
  194. <pre style="width: 720px; overflow: auto;">[rokbox size=|fullscreen| thumb=|images/stories/demo/rokbox/google.jpg|]http://www.google.com[/rokbox]
  195.  
  196. </pre>
  197. </div>
  198.  
  199. <div class="rokbox-example">
  200. <h2>PDF</h2>
  201. <p>This demo will load a PDF file.</p>
  202.  
  203. <div class="center"><a href="http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rokbox.pdf" rel="rokbox[fullscreen](demo)" title="RokBox :: PDF File"><img class="album" src="/extensions/images/stories/demo/rokbox/pdf.gif" alt="RokBox :: PDF File"></a> </div>
  204.  
  205. <pre style="width: 720px; overflow: auto;">[rokbox size=|fullscreen| album=|demo| title=|RokBox :: PDF File| thumb=|images/stories/demo/rokbox/pdf.gif|]images/stories/demo/rokbox/rokbox.pdf[/rokbox]
  206.  
  207. </pre>
  208. </div>
  209.  
  210. <span class="attention">NOTICE: The Joomla 1.0 plugins for RokBox are not supported. Development for these plugins has stopped, although you can still download them if needed. We strongly recommend upgrading to Joomla 1.5 to take advantage of the Joomla 1.5 RokBox plugins which are more advanced than their 1.0 counterparts.</span>
  211.  
  212. <h3>Features</h3>
  213.  
  214. <ul>
  215.         <li>Mootools v1.11 compatible</li>
  216.         <li>4 Customizable Transition Type: <b>Fade, QuickSilver, Growl, Explode.</b></li>
  217.  
  218.         <li>Support for <b>PDF</b>, <b>Images</b>, <b>FLV</b>, <b>QuickTime</b> (.mov, .m4v), <b>Windows Media Video</b> (.wmv), <b>Flash</b> (.swf), <b>YouTube</b>, <b>DailyMotion</b>, <b>MetaCafe</b>, <b>Google Video</b>, <b>Vimeo</b>, <b>Audio</b> (.mp3, .wav, .m4a), <b>local</b> and <b>remote</b> sites.</li>
  219.  
  220.         <li>Support for albums/categories.</li>
  221.         <li>Ability to popup RokBox in <strong>pixels</strong> or <strong>percentages</strong> and <strong>fullscreen</strong> relative to the browser window.</li>
  222.         <li>Support for <b>Captions</b> including support for titles and descriptions.</li>
  223.  
  224.         <li>3 Predefined Themes provided: <b>Light Theme</b>, <b>Dark Theme</b>, <b>Mynxx Theme</b>.</li>
  225.         <li>Support for custom themes with ability to customize styles and RokBox configuration per theme.</li>
  226.         <li>Ability to auto-generate thumbnails when RokBox-ing local images.</li>
  227.         <li>Support for generate <b>thumbnail</b> or <b>inline</b> links from your Joomla! Content.</li>
  228.  
  229. </ul>
  230.  
  231. <h3>Requirements</h3>
  232. The requirements for the extension are listed below:-
  233. <ul>
  234.         <li><strong>Joomla 1.5x or 1.0x</strong> - Ensure that you are using the latest version for compatibility and security purposes from <a href="http://www.joomla.org">Joomla.org</a>. However, it is better, in terms of usability and performance to use the 1.5 variant of the plugin.</li>
  235. </ul>
  236.  
  237. <h3>More Information</h3>
  238.  
  239. For more details on the extensions, please visit the following:-
  240. <ul>
  241.         <li><strong>Installation:</strong> <a href="http://www.rockettheme.com/extensions-joomla/rokbox#installation">Guide on how to install the extension</a></li>
  242.         <li><strong>Documentation:</strong> <a href="http://www.rockettheme.com/extensions-joomla/rokbox#documentation">Learn how to configure and use the extension</a></li>
  243.         <li><strong>Changelog:</strong> <a href="http://www.rockettheme.com/extensions-joomla/rokbox#changelog">Check the changelog to see all fixes, additions and changes</a></li>
  244.  
  245.         <li><strong>Forums:</strong> <a href="http://www.rockettheme.com/forum/index.php?f=201&amp;rb_v=viewforum">Interact with the forum community</a></li>  
  246. </ul>
  247.  
  248. </td>
  249. </tr>
  250.  
  251. </tbody></table>
  252. <span class="article_separator">&nbsp;</span>
create a new version of this paste RAW Paste Data