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
Syntax
<a data-rokbox href="/extensions/images/rokbox2/planes_1.jpg">Local Image from Text</a>
Image - Remote image
Syntax
<a data-rokbox href="http://www.rockettheme.com/templates/rt_rockettheme2/images/logo-astroguy.png">RocketTheme Logo</a>
Image - Not Existing
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
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
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
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
- 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:-- Installation: Guide on how to install the extension
- Documentation: Learn how to configure and use the extension
- Changelog: Check the changelog to see all fixes, additions and changes
- Forums: Interact with the forum community