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.

To the demo.

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

• The basic C(R)UD
• Multiple select lists with jQuery and JSON
• Shortening multiple URLs with jQuery, PHP, picolisp and bit.ly
• JQuery Joomla chat, adding online/offline and friendlist
• Facebook style chat with jQuery and Joomla