We have had our own share of difficulty with the uber-stylish RocketTheme RokBox plugin. If you are having trouble getting RokBox to work, see if our notes below help you out. You can download RokBok here: http://www.rockettheme.com/extensions-joomla/rokbox
The RokBox plugin for joomla automatically creates links for thumbnail images, but it SHOULD display the larger image in a pretty little pink pop-up box with lace trim and unicorns. Here is how:
first, the easy part:
Create an empty ‘div’ element somewhere near to where th image thumbs are located.
Make the div = ‘RokBoxBox’ like:
-
<div id=’RokBoxBox’></div>
Once the following is done, that’s all you need to make it work….
style the id so that is it display: none – here is my css:
-
#RokBoxBox {
-
display: none;
-
position: absolute;
-
left: 275px;
-
background-color: white;
-
padding: 10px;
-
border: 1px gray groove;
-
z-index: 100;
-
}
insert this javascript in the page header, or in the header of the joomla template – better yet, copy and save it to imgBox.js and put an external link, e.g.
-
<script language="javascript" type="text/javascript" src="/scripts/imgBox.js"></script>
here is the actual js code:
-
function show_hideImgBox(anchor,targetDivId ) {
-
if(!document.getElementById(targetDivId)) {
-
return true;
-
}
-
var link = anchor.href;
-
var targetElement = document.getElementById(targetDivId);
-
-
if(targetElement.style.display == ‘block’) {
-
targetElement.style.display = ‘none’;
-
} else {
-
targetElement.
innerHTML = “<a href=’#’ onclick=\”show_hideImgBox
(this,’” + targetDivId + “‘
);\” style=’cursor: pointer;’>Click to
Close
-
<img src=’” + link + “‘ /></a>”;
-
targetElement.style.display = ‘block’;
-
}
-
return false;
-
}
now, the slightly scary-for-non-php-programmers bit:
From your joomla root directory, open the file
/plugins/content/rokbox.php
around line 208, find the code:
there are several lines with this. Right before the “if” block “if (!strlen($thethumb) …) etc,
place the following php code:
-
-
$targetDiv = $botParams->targetDiv;
-
if($targetDiv == ”)
-
$targetDiv="RokBoxBox";
-
$jsLoadBox = " onclick=\"return show_hideImgBox(this,’$targetDiv’ );\" ";
VERY IMPORTANT: add this code snip right after the “<a ” in each line with the href code (insert spaces)
‘.$jsLoadBox.’
so that each line looks like:
-
if (!strlen($thethumb) && !strlen($thetype) && strlen($thetext) > 0) {
-
if (strlen($themodule)) $text = $text . ‘<a’.$jsLoadBox.‘href="’ . $link . ‘" rel="’ . $compatibility . $thesize . $thealbum . $displaythumb . $themodule .‘" title="’ . $thetitle . ‘">’.$thetext.‘</a>’;
-
else $text = $text . ‘<a ‘.$jsLoadBox.‘href="’ . $link . ‘" rel="’ . $compatibility . $thesize . $thealbum . $displaythumb . ‘" title="’ . $thetitle . ‘">’.$thetext.‘</a>’;
if you want to be able to change the name of the target ‘div’ element, insert the following in rokbox.xml into the <params> section:
-
<param type = "text" label="target Div (optional)" name="targetDiv" default="RokBoxBox" description="DIV element in which to load enlarged image" />
