In obsolete versions of Internet Explorer (IE6, IE7) there can be problem with displaying centered thumbnails if RTL language is used on the site. Obsolete versions of IE don't know using 50% 50% code for centering the thumbnails, so the code needs to be customized.
components/com_phocagallery/views/category/view.html.php:
Find the following code:
$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';
and replace it with:
$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') 100% '.$h.'px no-repeat;';
components/com_phocagallery/assets/phocagalleryieall.css
Find the following code:
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:-50%;
padding-top:3px;
}and replace it with:
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:0;
padding-top:3px;
padding-right:9px;
padding-left:1%;
}
If you are using more languages on your site (e.g. with help of Joom!fish component) and you have one language RTL (right to left) and second language LTR (left to right), you need to do following modifications. Copy (ftp) phocagalleryieall.css from:
components/com_phocagallery/assets/phocagalleryieall.css
to your PC. Rename it to phocagalleryieallrtl.css. Find the following code:
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:-50%;
padding-top:3px;
}and replace it with:
.phocagallery-box-file-third {
position: relative;
top: -50%;
left:0;
padding-top:3px;
padding-right:9px;
padding-left:1%;
}Copy (ftp) this modified file (phocagalleryieallrtl.css) to:
components/com_phocagallery/assets/ folder (on your server)
Go to:
components/com_phocagallery/views/category/view.html.php:
Find the following code:
$document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""
.JURI::base(true)
."/components/com_phocagallery/assets/phocagalleryieallrtl.css\" type=\"text/css\" />\n<![endif]-->");and replace it with:
if ($document->direction == 'ltr') {
$document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""
.JURI::base(true)
."/components/com_phocagallery/assets/phocagalleryieall.css\" type=\"text/css\" />\n<![endif]-->");
} else {
$document->addCustomTag("<!--[if lt IE 8 ]>\n<link rel=\"stylesheet\" href=\""
.JURI::base(true)
."/components/com_phocagallery/assets/phocagalleryieallrtl.css\" type=\"text/css\" />\n<![endif]-->");
}Find this code:
$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';
and replace it with:
if ($document->direction == 'ltr') {
$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') '.$w.'px '.$h.'px no-repeat;';
} else {
$imageBgCSSIE = 'background: url(\''.JURI::base(true).'/components/com_phocagallery/assets/images/'.$tmpl['displayimageshadow'].'.'.$tmpl['formaticon'].'\') 100% '.$h.'px no-repeat;';
}
Now the images should be displayed correctly in RTL languages but in LTR languages too.
If you are using modal box as detail window and your modal box is not centered, try to add the following code into the phocagalleryieallrtl.css file:
* html #sbox-window,
#sbox-window
{
margin:30%;
}
If you have problem with "jumping" images while mouse over, try to disable (comment) the following CSS class:
.phocagallery-box-file:hover
in components/com_phocagallery/assets/phocagallery.css