Image - Link from Text
Syntax
<a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.jpg">Local Image from Text</a>
Image - Remote image
Syntax
<a data-rokbox href="https://sanaathemes.com/images/templates/joomla/kallos-small.png">SanaaThemes Logo</a>
Image - Not Existing
Syntax
<a data-rokbox href="/live/joomla-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="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.jpg"> <img src="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1-manual-thumbnail.jpg" /> </a>
Image - Fixed Size (non responsive)
Syntax
<a data-rokbox data-rokbox-caption="Fixed size of 500 x 276 px" data-rokbox-size="500 276" href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.jpg"><img src="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1-manual-thumbnail.jpg" /></a>
Image - Autogenerated Thumbnail
Syntax
<a data-rokbox data-rokbox-caption="Autogenerated Thumbnail" data-rokbox-generate-thumbnail href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.jpg"></a>
Image - Album
Syntax
<a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 1" data-rokbox-generate-thumbnail></a> <a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-2.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 2" data-rokbox-generate-thumbnail></a> <a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-3.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 3" data-rokbox-generate-thumbnail></a> <a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-4.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="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-1.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="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-2.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 2"></a> <a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-3.jpg" data-rokbox-album="RokBox2 Album" data-rokbox-caption="Album Image 3"></a> <a data-rokbox href="/joomla/3.x/kallos/images/kallos-demo-data/pages/rokbox/rokbox-item-4.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=TEHWDA_6e3M&feature=player_embedded" data-rokbox-caption="Disney Pixar Brave - 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="#rt-footer .rokbox">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>