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