Image - Link from Text

Local Image 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

SanaaThemes Logo

Syntax

<a data-rokbox href="https://sanaathemes.com/images/templates/joomla/kallos-small.png">SanaaThemes Logo</a>

Image - Not Existing

Image Does Not Exist

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

YouTube

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

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

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>