jQuery Galleria with MODx multi-lang snippet
The other day I wanted to try out jQuery Galleria, it didn’t work out of the box with jQuery 1.3.2. Galleria is using the old style @ syntax which doesn’t work anymore. You basically have to go through the whole plugin and replace lines like this:
var _thumb = $('.galleria img[@rel="'+_src+'"]');
So that they look like this:
var _thumb = $('.galleria img[rel="'+_src+'"]');
After that you should be fine using the first demo for guidance. There’s also a listing with my HTML and JavaScript at the bottom of this article.
The MODx stuff
The whole translate snippet now looks like this:
if(empty($article) && empty($GLOBALS['cur_articles'])){
function getArticle($alias){
foreach($GLOBALS['cur_articles'] as $a){
if($a['alias'] == $alias)
return $a;
}
}
function getField($alias, $field){
$article = getArticle($alias);
return $article[ $field ];
}
$GLOBALS['translation_depth'] = empty($depth) ? 3 : $depth;
$query = "SELECT * FROM " . $modx->getFullTableName('site_content') . "WHERE isfolder = 1";
$ar = $modx->db->makeArray( $modx->db->query($query) );
$cur_lang = array();
foreach(explode('/', $_SERVER['REQUEST_URI']) as $uri_part){
foreach($ar as $lang){
if($lang['pagetitle'] == $uri_part){
$cur_lang = $lang;
break;
}
}
}
$cur_level = $GLOBALS['cur_articles'] = $modx->getDocumentChildren($cur_lang['id'], 1, '0', 'id, pagetitle, description, alias, parent, content');
for($i = 0; $i <= $GLOBALS['translation_depth']; $i++){
foreach($cur_level as $a){
$cur_children = $modx->getDocumentChildren($a['id'], 1, '0', 'id, pagetitle, description, alias, parent, content');
$tmp = array();
foreach($cur_children as $cur_child){
$GLOBALS['cur_articles'][] = $cur_child;
$tmp[] = $cur_child;
}
}
$cur_level = $tmp;
}
}else{
if(empty($tpl)){
if(!empty($galleria)){
$ret = '';
$base_url = $modx->getConfig('base_url').'assets/images/designs/';
foreach(explode(',', $galleria) as $image)
$ret .= '<li><img src="'.$base_url.$image.'.jpg" alt="'.getField($image, 'pagetitle').'" title="'.getField($image, 'content').'"></li>';
return $ret;
}else
return getField($article, $field);
}else{
$chunk = $modx->getChunk($tpl);
$ca = getArticle($article);
if(!empty($ca)){
$query = "SELECT DISTINCT tv.name, cv.value FROM ".$modx->getFullTableName('site_tmplvar_contentvalues')." cv, ".
$modx->getFullTableName('site_tmplvars')." tv WHERE cv.contentid = {$ca['id']} AND cv.tmplvarid = tv.id";
foreach($modx->db->makeArray( $modx->db->query($query) ) as $tplvar)
$ca[ $tplvar['name'] ] = $tplvar['value'];
foreach($ca as $key => $value){
$patterns[] = "/\[-$key-\]/";
$replacements[] = $value;
}
return preg_replace($patterns, $replacements, $chunk);
}else
return '';
}
}
Note this part:
...
if(!empty($galleria)){
$ret = '';
$base_url = $modx->getConfig('base_url').'assets/images/designs/';
foreach(explode(',', $galleria) as $image)
$ret .= '<li><img src="'.$base_url.$image.'.jpg" alt="'.getField($image, 'pagetitle').'" title="'.getField($image, 'content').'"></li>';
return $ret;
}else
...
A little bit ugly to hard code the path there but you’ve been warned.
My gallery chunk looks like this:
<link href="[(base_url)]assets/js/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="[(base_url)]assets/js/galleria.js"></script>
<script type="text/javascript">
$('.gallery_unstyled').addClass('galleria');
$('ul.galleria').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(500);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
[[translate?]]
<ul class="gallery_unstyled">
[[translate? &galleria=`admedia,cocktails,computershop,dating,horoscope,ingsila,jwmarriott,kinderkrebs,lanta1,lanta2,muangsamui1,muangsamui2,namesite,pharmacy2,wdpatongbay`]]
</ul>
<div id="main_image"></div>
Note the call to translate? &galleria there, that’s exactly what we’re doing, we’re translating all the text being used into the current language.
The reason I did this was to avoid a lot of repetitive HTML in the chunk, we’re now letting the PHP above deal with that crap 🙂
And this can all be seen on the site itself, if you browse to the Design Gallery section. The German and Thai sections are still under construction.
As a reference I’ve uploaded a screen shot of my folder structure.
Related Posts
Tags: galleria, Javascript, jquery, MODx, PHP