http://www.rockettheme.com/extensions-joomla/rokbox#documentation
How to Use - Lots of Pics ... but I think for a different CMS or theme of the Admin or somethin'
http://www.jseblod-cck.com/documentation/how-to/1382-use-rokbox-plugin.html
... Here's the RocketTheme documentation ... it's pretty awesome!!
RokBox — Free
RokBox, is a Mootools powered, popup plugin, that can load images, videos, web pages and other elements in a styled popup.
RocketTheme's Default Instructions & Info - Supporting RoxBox
Joomla Extensions
RokBoxLatest Versions: J1.5 2.7 / J1.6 1.1
The Ultimate Javascript Powered Multimedia Box 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.
Introduction
RokBox can be either used as Joomla! and Standalone plugin.
The way RokBox works is really simple, all potential RokBox links need just to be links () with rel tag starting as rokbox. Every example is infact a link that RokBox will take in consideration.
In this documentation it will be explained how Joomla! and Standalone versions work and the meaning of all parameters that you can use.
Joomla! Plugin
Joomla! Plugin provides itself two plugins: System - RokBox and Content - RokBox.
The System - RokBox is the core of the plugin and it is mandatory having it enabled to let RokBox working. The Content - RokBox is a helper for composing proper links while writing your Joomla! Content and can be disabled without affecting the RokBox functionalities. Content - RokBox provides also a tool that let you auto-generate thumbnails for local images, without the need of doing too much, it's basically automatic.
If Content - RokBox is disabled, you cannot use RokBox Syntax (explained below), but you can still use the same Syntax explained in the Standalone documentation below.
System - RokBox
As said before, System - RokBox is the Core of the plugin that let RokBox being enabled or disabled and via admin control panel, let you choose which theme to use and its configuration. To get access to RokBox configuration panel, follow these pathways:
- J! 1.0: Mambots → Site Mambots → System - RokBox
- J! 1.5: Extensions → Plugin Manager → System - RokBox
As from the screenshot you can see that basic plugin parameters are really few. Let's explain them.
Preset Themes: From here you can choose which theme you want to use. Coming with RokBox you have Light and Dark themes, but RokBox allows you to create your own Custom theme (explained below) and in this case you've to select Custom from the dropdown and write your theme name in the Custom Theme editbox.
Custom Theme: Here goes the name of your custom theme. To make RokBox loading this theme, make sure that you've selected "Custom" from Preset Themes.
Use Legacy Parameters (Use Following Parameters, in Joomla! 1.0): Themes not only allow you to customize styles and design of RokBox, but allow you to also specify custom parameters to pass to RokBox via js, if you want, like the animation to use, the overlay color, the duration of the effect and much more. This is what Legacy Parameters does, it allows you to decide which RokBox configuration load, the one provided by the theme (No option), if it exists, or the Legacy Parameters you specify (Yes option).
Legacy Parameters: 
RokBox Default Width/Height: When you don't specify a size for your links, RokBox will open with these default sizes.
Transition of RokBox Effect:: The transition type, provided by MooTools, to use when openin/close RokBox.
Duration of RokBox Effect: How long, in milliseconds, the opening of RokBox should take.
Chase: The chasing, in pixels, for the Growl effect only.
Type of Animation: The type of animation to use when opening RokBox. You can choose between Fade, QuickSilver, Growl and Explode.
Border width: If you're going to make your own custom theme and adding some extra borders, you may want to specify the width of borders in pixel. Light and Dark themes, for example, have this option set to 20, infact RokBox adds an extra 20px for each side.
Content Padding: The inner padding, in pixels, to use where media content appear, could be useful in some circumstances. Light and Dark themes have this option set to 0.
Arrows Height:: When navigation arrow appear because of an album set, RokBox adds an extra height based on this option setting, useful for having RokBox global height fitting well with arrows also. Light and Dark themes have this option set to 35.
Show Captions:: Wheter or not RokBox should show the links captions. If enabled, and a link doesn't have the caption in it, caption won't appear also.
Captions Delay:: How long caption should take before appearing.
Follow when Scrolling:: This option allow RokBox to follow your page even when scrolling. If disabled, RokBox will stay fixed at it place when you scroll up or down.
Enable Keys:: Enable or disable 3 keys shortcut. Esc, Left and Right. Which respectively Close RokBox, Go to previous album and Go to next album.
Overlay Background:: Background color for Overlay. Must be a hexadecimal value with a prepending hash '#'.
Overlay Opacity: Opacity for the Overlay that goes from 0 to 1 with floating point allowed. Note that having Overlay set to 0 will not let you close RokBox by clicking on it, because 0 means invisible. To have it transparent but clickable also, set Overlay Opacity to 0.1
Overlay Duration: How long the Overlay animation should take in milliseconds.
Transition of Overlay Effect: The transition type, provided by MooTools, to use when openin/close the Overlay.
AutoPlay: Whether or not play automatically movies from QuickTime and WindowsMedia Player
YouTube AutoPlay: Whether or not play automatically YouTube movies.
YouTube High Quality (HD): Whether or not enable the HD functionality of YouTube. If a HD video isn't supported, the default Quality would be played. You cannot enable or disable the HD functionality for specified videos. All or none.
Controller: Wheter or not show QuickTime and WindowsMedia Player controllers.
Background Color: Sets the background color for those movie types that supports it (as for QuickTime). It must be a color in hexadecimal format with a prepending hash '#'.
Vimeo Color/Portrait/Title/Fullscreen/Byline: Enable or disable Vimeo Options. The color must be in hexadecimal format without any prepending hash '#'.
Content - RokBox
This plugin let you use a custom syntax from your content to prepare links to be used with RokBox.
The syntax looks like {rokbox...}link{/rokbox}.
RokBox syntax itself allows few parameters that let you customize the outputting link, it allows to specify size, title, caption, album and module. Also it allows you to specify a thumb or a text to wrap your link.
Note that thumb and text parameters could not work together, if so, text parameter has priority over the thumb.
Here is an example of syntax using all possible parameters.
Let's split it and explain step by step every parameter.
size=|int int|: Size let RokBox knows how big the RokBox window should open. the values must be 2 integer and represents pixels. Example: size=|100 50|
It can also represent 2 percentages values, relative to the browser window. Example size=|50% 30%|
And it can also be 1 string: fullscreen, which will take all the browser window size. Example size=|fullscreen|
You can avoid the size parameter as it will be determined by RokBox itself with predefined sizes. This worth for all Video Sharing Services, Generic Video files, LOCAL and LOCAL only images.
Generic Videos [320 x 240], Video Sharing Services (YouTube [425 x 344], DailyMotion [420 x 339], Metacafe [400 x 345], Google Video [400 x 325], Vimeo [400 x 225]), Audio [320 x 45] and original size for images (LOCAL ONLY)
text=|some text string|: Text represent the link text (i.e. my text. If this parameter is not specified, the title would become the text.
thumb=|path/image.ext|: If you have a link that you want to appear as a linked image, you need thumb. Thumb must be a path relative to the root, without prepending slash and ending with an existant image. Example: thumb=|images/stories/fruit/cherry.jpg|
Note that if you've text parameter specified in your syntax, thumb get ignored
If you're linking a local image to RokBox, omitting the thumb parameter will let RokBox to try generating automatically a thumb from the linked image at its same path location with a postpending "_thumb" to its name. Make sure you've write permission on that folder and GD libraries installed at your server.
title=|string for header :: string for title|: The title is what it's going to become the caption. If you want a title caption to appear, you need to separate it from description by a " :: " Space-colon-colon-space.Example: title=|My Title :: My Description| or title=|My Description|
module=|element_id|: The module allows you to load inside RokBox an element from the page. Supposing we have a div which id is "login", we can load the entire login div into rokbox by simply writing the syntax: {rokbox module=|login| text=|Module Example|}{/rokbox}.
You can still use text, thumb, title and size in conjunction with module. What it isn't needed and would be ignored is the link between {rokbox} and {/rokbox}
Thanks to Dennis Pleiter (test12)'s contribute, wildcards can now be used for reading a whole directory of images from a local path, in just one line of code!
Thumbs will be auto generated and, in conjunction with wildcards, you can also use thumbcount=|number| parameter, that will let you decide how many thumbs show from the specified folder.
Be sure to always specify a album when using wildcards, or you won't be able to see all the images
Standalone Version
To use RokBox in any non-Joomla! environment, there are few steps to follow. First of all you need to consider that RokBox requires mootools to work. You can either use the RokBox Standalone version from download section which comes along with mootools in it, or download it from the official home page.
Once you've unzipped RokBox Standalone in your root home page, every page that you want RokBox to work must contain in its :
src and href in the above example are for example purpose, you may want to change those paths to fit your site structure.
Lines 3 and 4 show the light theme in use, to change it to dark or any other custom theme, change light with "dark" or your own custom theme folder name.
Line 4 at the above code, shows the loading of "rokbox-config.js". Every theme can have that file in their folder and you can use that way to initialize RokBox. However, you can also drop line 4 to add your own custom initialization, in this case the
Now that your RokBox gets loaded, you need only one last step which is assigning to every links you want to work with RokBox a specified syntax.
Suppose we have a link pointing to rocketwerx.com:
To make it working with RokBox we just need to add a rel tag to it and, in case we want captions, a title tag.
So, if we want the link to popup RokBox in a window of 900 x 600, to make it part of "demo" album and having a caption with title "Example" and description "RocketWerx Official Home Page", we'd turn the above link syntax into:
rel value, as you can see, must start with rokbox. The square brackets stand for the width and height of RokBox content, while the round brackets for the album name. Titles works the same as mootools Tips, you need to separate title from description by a " :: " (space-colon-colon-space), this way RokBox knows that "Example" is the caption title and "RocketWerx Official Home" is the caption description.
Both square and round brackets can be omitted. If square brackets (for sizes) aren't specified, RokBox will open as much as option defaultSize says. If round brackets aren't specified, the link won't be part of any album.
No comments:
Post a Comment