Saturday, Feb 11, 2012
Login

RokBox

RokBox 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.

RokBox provides a theme system that allows you to create your own custom ones to fit your websites design. It includes three predefined themes, a Light and Dark theme and a Mynxx theme that will fit seamlessly 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.

Demos

Below you will find some examples of the syntax used for a variety of RokBox functions.

Image

This demo will load a image

Since album is not specified, you won’t see arrows appear, so you cannot navigate through other RokBox links.

Audi RS8 :: Sample Caption for RS8 Image

Syntax

[rokbox title="Audi RS8 :: Sample Caption for RS8 Image" size="561 350" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/rs8_thumb.jpg"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8.jpg[/rokbox]

Image (text instead of thumbnail)

This demo will load a image and use text instead of a thumbnail”.

Since album is not specified, you won’t see arrows appear, so you cannot navigate through other RokBox links.

RokBox link with no Thumbnail

Syntax

[rokbox size="561 350" title="Audi RS8 :: Sample Caption for RS8 Image" text="RokBox link with no Thumbnail"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rs8.jpg[/rokbox]

Image (no sizes provided)

This demo will load a image without having provided sizes.

Vauxhall VXR8

Syntax

[rokbox thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/sshot2_thumb.jpg" title="Vauxhall VXR8"]http://www.rockettheme.com/images/extensions/joomla/rokbox/sshot2.jpg[/rokbox]

Image not found

This demo will demonstrate RokBox handling images not found.

Audi RS8 :: Sample Caption for RS8 Image

Syntax

[rokbox title="Audi RS8 :: Sample Caption for RS8 Image" size="561 350" thumb="images/some_folder/not_existing_thumb.jpg"]images/some_folder/not_existing.jpg[/rokbox]

Audio – mp3

This demo will load and play a mp3 file.

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.

RocketTheme promo

Syntax

[rokbox title="RocketTheme promo" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/mp3.jpg" size="250 15" album="demo"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rockettheme.mp3[/rokbox]

Video – Simple SWF File

This demo will load a simple flash movie (.swf) file.

This demo simply load a .swf file but queries works the same (i.e. “myfile.swf?bgcolor=true&color=ffffff”).

RocketTheme :: RocketTheme Logo's flash movie

Syntax

[rokbox title="RocketTheme :: RocketTheme Logo's flash movie" size="400 140" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/flash.gif"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rt_movie.swf[/rokbox]

Video – YouTube

This demo will load a YouTube movie.

YouTube links must be the same as you get from within the URI bar. You can pass all the options to the URI (ie, &hd=1&autoplay=1). For our demo we’re going to use this link: http://www.youtube.com/watch?v=6RWQz0Q7_zY

Cars :: 2010 Aston Martin Vantage V 12
normal quality | HD + autoplay + layout colors | HD + autoplay + start from 36s

Syntax

Example 1 (thumb)

[rokbox title="Cars :: 2010 Aston Martin Vantage V 12" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/youtube.jpg" size="854 505" album="demo"]http://www.youtube.com/watch?v=6RWQz0Q7_zY&hd=1&autoplay=1[/rokbox]

Example 2 (normal quality)

[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]

Example 3 (HD + autoplay + layout colors)

[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&autoplay=1&fs=1&color1=0x5d1719&color2=0xcd311b&hd=1&border=1[/rokbox]

Example 4 (HD + autoplay + start from 36s)

[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&hd=1&autoplay=1&start=36[/rokbox]

Built-in FLV Player

This demo will load a FLV movie.

FLV built-in is now possible thanks to JW FLV Player. The FLV video comes from http://www.youtube.com/watch?v=5KTI1-5Lapg
You can pass any option allowed by JW FLV Player, please use its documentation as reference.

Primavera :: A look at Earth and space.

Syntax

[rokbox title="Primavera :: A look at Earth and space." thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/flv.jpg" size="854 505" album="demo"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/primavera.flv&buffer=10&autostart=true&fullscreen=true&width=854&height=505[/rokbox]

Video – Metacafe

This demo will load a Metacafe movie.

Metacafe links must be the as same you get from within the URI bar. For our demo we’re going to use this video: http://www.metacafe.com/watch/1291008/how_to_make_jumping_magic_beans/

Magic Beans :: How to Make Jumping Magic Beans

Syntax

[rokbox title="Magic Beans :: How to Make Jumping Magic Beans" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/metacafe.jpg" size="400 345" album="demo"]http://www.metacafe.com/watch/1291008/how_to_make_jumping_magic_beans/[/rokbox]

Remote Site – Google

This demo will loads an external site, in our case Google’s home page.

Did you mean... :: ...Google?
[rokbox title="Did you mean... :: ...Google?" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/google.jpg" size="700 450"]http://www.google.com[/rokbox]

Remote Site – Google (size: 65% 80% of the screen)

This demo acts like the previous one, but we’re using percentages as size.

[rokbox size="65% 80%" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/google.jpg"]http://www.google.com[/rokbox]

Remote Site – Google (size: fullscreen)

This demo acts like the previous one, but instead of percentages we’re using the fullscreen option as size.

[rokbox size="fullscreen" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/google.jpg"]http://www.google.com[/rokbox]

PDF

This demo will load a PDF file.

RokBox :: PDF File
[rokbox size="fullscreen" album="demo" title="RokBox :: PDF File" thumb="http://demo.rockettheme.com/wordpress/wp_affinity/wp-content/rockettheme/wp_affinity/pdf.gif"]http://demo.rockettheme.com/extensions/images/stories/demo/rokbox/rokbox.pdf[/rokbox]

Features

  • Mootools v1.11 compatible
  • 4 Customizable Transition Type: Fade, QuickSilver, Growl, Explode.
  • Support for PDF, Images, FLV, QuickTime (.mov, .m4v), Windows Media Video (.wmv), Flash (.swf), YouTube, DailyMotion, MetaCafe, Google Video, Vimeo, Audio (.mp3, .wav, .m4a), local and remote sites.
  • Support for albums/categories.
  • Ability to popup RokBox in pixels or percentages and fullscreen relative to the browser window.
  • Support for Captions including support for titles and descriptions.
  • 3 Predefined Themes provided: Light Theme, Dark Theme, Mynxx Theme.
  • Support for custom themes with ability to customize styles and RokBox configuration per theme.
 

RokTabs

  • IE6 Warning Message
  • RokBox JavaScript Slideshow
  • RokStories Widget
  • Source Ordered Layout
  • Nunc Placerat Tempor
  • Donec Ultricies Lectus
  • Lorem Ipsum Dolor

The template has a script that will display a message to IE6 users advising them to upgrade to a more secure browser version. This is enabled by default, but can easily be turned off or on with a toggle in the theme settings page. When enabled, users visiting your site with IE6 only, will be able to view the message. By enabling this, you can help fight the good fight that rids the internet of the evil incarnation that is IE6!

Any web developer will tell you, working with IE 6 is one of the most difficult and frustrating things they have to deal with on a daily basis, taking up a disproportionate amount of their time. Beyond that, IE 6’s support for modern web standards is very lacking, restricting what developers can create and holding the web back.

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.

RokBox 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.

RokStories is a great widget to display your articles and accompanying images as a featured item. The widget itself is facilitated by Mootools to transition between images and articles seamlessly. Perfect for showcasing featured articles or image on your site.

RokStories provides a vast assortment of configuration options and parameters to give you more control over how your dynamic content is displayed as well as providing a lightweight and fast loading experience.

Rewriting it to widget let’s you configure and use it even easier!

Affinity continues the latest trend of SEO optimised templates. The layout of the template has been constructed differently to the norm. A typical WordPress template, in regards to the mainbody source, will load the left column first, then the right column and finally the main column (where your main articles are loaded). Affinity takes a different approach and loads the main column code before the left and right columns.

Therefore, this template loads in this order: Header, Menu, Showcase, Main Column, Left Column, Right Column, Bottom, Footer. This is perfect for SEO purposes as the search crawlers will find your main content before your subsidiary content in your side columns. This is a major step forward and will improve your search engine results for your pages.

Etiam rhoncus risus non est pretium egestas. Nunc placerat tempor dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sollicitudin scelerisque varius. Cras volutpat sem vulputate quam feugiat a luctus erat feugiat. Nullam blandit, sapien non venenatis tristique, nunc quam pulvinar nunc, at sodales nunc libero a purus. Curabitur dignissim, urna ac convallis fringilla, mauris velit malesuada turpis, nec tincidunt felis lorem a augue.

Aliquam erat volutpat. Phasellus accumsan fermentum lacus, in imperdiet orci imperdiet in. Fusce et nisl id mauris pulvinar aliquet quis a dui. Quisque nisl augue, facilisis nec gravida a, auctor non arcu.

Suspendisse eros velit, rutrum nec congue in, viverra ac leo. Suspendisse potenti. Duis fermentum arcu at sem hendrerit auctor. In condimentum sem ac ante porta pellentesque. Vivamus pretium ullamcorper urna, bibendum euismod felis tincidunt eget. Nunc viverra ante et purus venenatis luctus. Fusce vehicula eros sed arcu congue suscipit. Duis diam justo, laoreet id luctus quis, varius eget erat. In quis urna nunc, pretium euismod sapien. Cras malesuada iaculis augue at aliquam. In urna augue, pharetra at dictum id, tristique a ligula. Nunc bibendum viverra tortor sed bibendum.

Nunc viverra ante et purus venenatis luctus. Fusce vehicula eros sed arcu congue suscipit. Cras malesuada iaculis augue at aliquam. Vivamus pretium ullamcorper urna, bibendum euismod felis tincidunt eget.

Phasellus accumsan fermentum lacus, in imperdiet orci imperdiet in. Fusce et nisl id mauris pulvinar aliquet quis a dui. Quisque nisl augue, facilisis nec gravida a, auctor non arcu. Donec metus eros, vestibulum ut venenatis eget, varius a velit. Ut eget est quam, in auctor lectus. Nulla fringilla placerat diam nec placerat. Cras bibendum arcu vitae nibh porta eget vestibulum lacus egestas. In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam condimentum feugiat mauris at dignissim. Duis tincidunt tellus eget eros iaculis ultricies.

Fusce et nisl id mauris pulvinar aliquet quis a dui. Quisque nisl augue, facilisis nec gravida a, auctor non arcu. Donec metus eros, vestibulum ut venenatis eget, varius a velit. Ut eget est quam, in auctor lectus.

User 5 Widget

The "User 5" position is set to the 'light' color variation. Variation switch can be done in the theme settings page.

User 6 Widget

The "User 6" position is set to the 'medium' color variation. Variation switch can be done in the theme settings page.

User 7 Widget

The "User 7" position is set to the 'Dark' color variation. Variation switch can be done in the theme settings page.