Joomla Extensions
RokBox2Latest Versions: J2.5 / J3.0 2.0.3
The Ultimate Javascript Powered Multimedia Box RokBox2 is a fully responsive modal plug-in for Joomla and the successor of RokBox1. Rewritten from the ground up it can display many different media formats such as images, videos, music, embedded widgets, Ajax content and Joomla modules and takes advantage of the new technologies such as HTML5 and CSS3.
{rokbox} or <a rel="rokbox" .., you can enable the Backward Compatibility from both the System and Content plug-in. You will also have to enable Backward Compatibility if you are using the Login or Module Popup Feature in any of our templates prior to Alerion. Those templates will be updated over time to be compatible with RokBox2 over time.Be aware that the Backward compatibility can dramatically slow down the loading of your site. It is highly suggested to convert the old syntax into the new one.
Key Features
- HTML5 and CSS3
- Fully Responsive
- Auto thumbnails generator
- Captions supporting HTML syntax
- Ajax Content listener
- Multiple media types supported:
- Images: base64 encoded, jpg, gif, png, bmp, webp
- HTML5 Video and Audio
- TwitPic
- YouTube
- Vimeo
- Telly (ex TwitVid)
- Metacafe
- Dailymotion
- Spotify
- Google Maps
- Fit/Unfit Screen: If an image is too big it gets shrunk to fit the view-port but you can always click the Fit Screen icon to expand it and scroll.
- Albums to group related images
- Key Bindings for easy navigation:
⇠(Previous),⇢(Next),fFitscreen/Unfitscreen,escClose
Installation
Installing RokBox2 is just a matter of few minutes. Firstly download the latest version of RokBox2. The package you will download is a bundle containing all the required plugins to get RokBox2 up and running and it is compatible with both Joomla 2.5.x and Joomla 3.0.x. It does not need to be uncompressed.
Once downloaded the package, go into the Joomla Administrator and:
- Select from the top menu:
Extend -> Extension Manager -> Install - Click on Upload Package File Choose File button
- Select the
rokbox-2.0.0.zipthat you just downloaded from your local drive. - Click the Upload & Install button.
If everything worked properly you will get a success message notification. You can customize both plugins accessing from: Extend -> Plug-in Manager, where they are listed as Content - RokBox and System - RokBox.
Introduction
The essence of RokBox2 is an <a> link with some data-sets that let RokBox identify the link in the page. Exactly as any <a> link, a RokBox2 link can be placed just about anywhere in a page.
The most basic and simple example of a RokBox2 snippet to get it up and running is:
As can be noticed, it is a regular <a> link. The only extraneous bit is that data-set data-rokbox. Being just a normal link, it implies that you can have any type of content you want. In this case we used This is a RokBox 2 Link as simple text, but it could have been an image and worked exactly the same.
Data-sets
Data-sets are introduced with HTML5 and allow to attach data to HTML elements. They are extremely useful for JavaScript. In the past, developers were relying on the class attribute and different class names where added for referencing settings.
Moving away from class names in favor of data-sets allows not only to keep the HTML cleaner but also to avoid possible conflicts with the class names.
RokBox2 has different data-sets, each with a specific meaning and all optional with the exception of data-rokbox which is what triggers RokBox2 to identify a link. If the data-rokbox is not specified, the link will be skipped and will just function as a regular plain link.
Below is a summary of implemented data-sets for RokBox2.
| data-set | Description |
|---|---|
data-rokbox |
Triggers RokBox2 to identify an element as a RokBox2 link versus a regular link. |
data-rokbox-caption |
Defines the caption of the link. It allows HTML syntax but needs to be converted to HTML entities (more info) |
data-rokbox-album |
Associates the link to an album. Many links with the same album will trigger navigation (more info) |
data-rokbox-size |
Allows to specify fixed sizes (width and height) for the modal that opens (more info) |
data-rokbox-element |
Specifies the element in the DOM, through CSS-style selectors (more info) |
data-rokbox-generate-thumbnail |
Triggers RokBox2 to auto-generate a thumbnail, if the link is to a local image (more info) |
data-rokbox-caption
The caption is an optional data-set and will be shown on the popup when the specified link gets triggered.
If desired, a caption can also be written using HTML syntax, but it has to be converted into HTML entities in order to work.
It is suggested not to abuse the HTML syntax in a caption, to prevent potential layout issues. Tendentially the preferred HTML syntax one would use are inline tags, such as <strong>, <a>, <em>, etc.
Here are a couple of examples of a RokBox2 link with caption, both plain caption and HTML caption.
If you don't know how to convert to HTML entities, you can find many, online, tools, to do it for you. You could also use the Editor Button which does convert automatically your caption into HTML entities.
data-rokbox-album
Assigning the same album value to different RokBox2 links will trigger the navigation on the popup. You can see the album as a way of grouping certain media into the same context. You can navigate forward or backward either by clicking on the arrows or through the left and right arrows keys (⇠ / ⇢).
Imagine having 3 pictures of a product that you want the user to navigate through. This is how you would achieve it:
As can be noticed, all three links share the same album name. The album name is just an identifier string and won't be visible anywhere. For this very reason it is adviced to keep the album name as simple as possible. Try avoiding using unicode characters or any special characters as they might cause issues during interpretation from RokBox2.
data-rokbox-size
Sometime you might find yourself needing to have RokBox opening at a specific size and here is where data-rokbox-size dataset can come in handy.
Because RokBox is meant to be responsive and detached as much as possible from fixed sizes, whenever you use this dataset, the opening modal won't be responsive.
The value of data-rokbox-size is a width and a height, divided by a space: data-rokbox-size="800 600"
Below an example on how to use this dataset
data-rokbox-size dataset can be very useful but it goes against the responsive rules. Use it wisely.data-rokbox-element
RokBox2 allows you to open in a popup elements that have been already rendered on the document (DOM). The elements must be referenced through the CSS-Style syntax.
For instance, if you wanted to open in RokBox2 an element with the id #my-element structured in such way:
The equivalent RokBox2 syntax for loading that element will be:
RokBox2 will find the element #my-element in the DOM, clone it and open the popup with the cloned element in it.
It is important to note that an element deep in the DOM might have specific styles coming from the template that could potentially get lost once the cloned element gets inserted in the popup at a different level. However, you can style the element in the rokbox popup by targeting it. For example:
Below is a screenshot of a real world example of data-rokbox-element usage. We are creating a RokBox2 link that opens the search form right into RokBox2.
And this is the syntax used to achieve it:
href when using data-rokbox-element. Because it's not a true link pointing anywhere, you can use the hash href="#"data-rokbox-generate-thumbnail
RokBox2 comes with a built-in thumbnail generator, for local images, that can be configured from the Content Plugin Extensions -> Plug-in Manager -> Content - RokBox -> Core Options.
In these settings you can set the max width, max height and quality of a thumbnail. All thumbnails are saved as JPEG.
When you have a RokBox2 link pointing to a local image, setting the data-rokbox-generate-thumbnail will trigger RokBox2 to create a thumbnail for you, at the same location where your local image resides and with the _thumb suffix appended to the name. It will also load it for you automatically, as if you were manually specifying the thumbnail to render.
As can be noticed in the example above, we left the content of the <a> tag empty. Even if there was text written there, it would have been removed and replaced by RokBox2 with the auto-generated thumbnail.
The above example generates a thumbnail images/planes_thumb.jpg sized 150 x 100 and will automatically get rendered on the page like in the screenshot below.
Editor Button Plugin
RokBox has a built-in editor button that integrates with the Joomla Content and can be used to easily generate RokBox snippets.
The Editor Button popup is meant to be as user-friendly as possible and as can be noticed from the screenshot above, it is very self explainatory.
Link
The link is the only required field and needs to be filled. It could be a local image, a YouTube video, a remote URL or anything that RokBox 2 supports.
The link field also provides an image picker. On the right side of the input field you can click the icon to pick an image from the Joomla Media Manager.
images/. This can be changed from Content -> Media Manager -> OptionsDOM Element
The DOM Element field takes a CSS-Style syntax value that needs to be targeting an Element in the page. Whenever you start filling this field, the Link will get disabled and auto-populated with an hash #.
This is because a DOM Element type link is not a true link and doesn't point to any actual link.
More details on how DOM Element works and how to use it can be found here.
Album
The album field can be any string and allows a set of RokBox2 links to be grouped, so that the user can navigate through them. Whenever you decide to create an album, ensure that you use the same album name across the links you want to be grouped.
More details on how Album works and how to use it can be found here.
Caption
The caption associated to the link that RokBox2 will show. This field takes simple text as well as HTML syntax. When inserting the Snippet, any HTML syntax will get automatically converted into HTML entities.
More details on how Album works and how to use it can be found here.
Content
The content is what will be wrapped by the RokBox2 <a> link. It could be either text or an image.
If you decide to have text as content, you can either have it being plain text or HTML syntax. Differently from the caption, the HTML syntax written in the Content will be kept intact.
If you decide to have an image as content, you can either have it being auto-generated or like for the Link field, you can use the picker to choose a local image.
Changelog
This is a changelog for RokBox, beta,release candidate and final versions.
