RokBox 2

Overview

RokBox2 is a fully responsive modal plug-in for Joomla and the successor of the very popular but quite dated 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.

Image - Link from Text

Local Image from Text

Syntax

<a data-rokbox href="/extensions/images/rokbox2/planes_1.jpg">Local Image from Text</a>

Image - Remote image

RocketTheme Logo

Syntax

<a data-rokbox href="http://www.rockettheme.com/templates/rt_rockettheme2/images/logo-astroguy.png">RocketTheme Logo</a>

Image - Not Existing

Image Does Not Exist

Syntax

<a data-rokbox href="/extensions/images/rokbox2/this_image_doesnt_exist.jpg">Image Does Not Exist</a>

Image - Manual Thumbnail

Syntax

<a data-rokbox data-rokbox-caption="Manual Thumbnail and <span style="font-size:25px;color:yellow;text-decoration:underline;">HTML caption</span>" href="/extensions/images/rokbox2/planes_1.jpg">
   <img src="/extensions/images/rokbox2/planes_1_thumb.jpg" />
</a>

Image - Fixed Size (non responsive)

Syntax

<a data-rokbox data-rokbox-caption="Fixed size of 210 x 313 px" data-rokbox-size="210 313" href="/extensions/images/rokbox2/planes_1.jpg"><img src="/extensions/images/rokbox2/planes_1_thumb.jpg" /></a>

Image - Autogenerated Thumbnail

Syntax

<a data-rokbox data-rokbox-caption="Autogenarated Thumbnail" data-rokbox-generate-thumbnail href="/extensions/images/rokbox2/planes_2.jpg"></a>

Image - Album

Syntax

<a data-rokbox href="/extensions/images/rokbox2/planes_3.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 1" data-rokbox-generate-thumbnail></a>

<a data-rokbox href="/extensions/images/rokbox2/planes_4.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 2" data-rokbox-generate-thumbnail></a>

<a data-rokbox href="/extensions/images/rokbox2/planes_5.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 3" data-rokbox-generate-thumbnail></a>

<a data-rokbox href="/extensions/images/rokbox2/planes_6.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 4" data-rokbox-generate-thumbnail></a>

Image - Album / 1 Thumb only showing

Syntax

<a data-rokbox href="/extensions/images/rokbox2/planes_3.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 1" data-rokbox-generate-thumbnail></a>
	
<div style="display: none;">
	<a data-rokbox href="/extensions/images/rokbox2/planes_4.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 2"></a>
	<a data-rokbox href="/extensions/images/rokbox2/planes_5.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 3"></a>
	<a data-rokbox href="/extensions/images/rokbox2/planes_6.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 4"></a>
</div>

YouTube Video

YouTube

Syntax

<a data-rokbox href="http://www.youtube.com/watch?v=bssstn218EA&feature=player_embedded" data-rokbox-caption="Disney Pixar Planes - Preview">YouTube</a>

Spotify

Spotify

Syntax

<a data-rokbox href="http://open.spotify.com/user/w00fz/playlist/2OCzUYQMB93T19UAq8hGSK">Spotify</a>

DOM Element

DOM Element - DOM Element Not Found

Syntax

<a data-rokbox href="#" data-rokbox-element="#header ul.menu">DOM Element</a>
-
<a data-rokbox href="#" data-rokbox-element=".this > #element[does=not] .exist">DOM Element Not Found</a>

Google Maps

Google Maps

Syntax

<a data-rokbox href="https://maps.google.com/maps?q=statue+of+liberty&hl=en&ll=40.689543,-74.044437&spn=0.001591,0.002317&sll=45.543408,-122.654422&sspn=0.265939,0.593262&t=h&hq=statue+of+liberty&z=19" data-rokbox-caption="Statue Of Liberty">Google Maps</a>

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
    • Instagram
    • 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), f Fitscreen/Unfitscreen, esc Close

More Information

For more details on the extensions, please visit the following:-