Showing Galleria in a Colorbox

This howto describes how to get a Galleria image gallery going in a colorbox.

It assumes you have a theme 'mytheme' with a template.php and that you have installed Galleria in the theme so that the paths

'/sites/all/themes/mytheme/js/galleria-1.2.5/themes/classic/galleria.classic.min.js'
and
'/sites/all/themes/mytheme/js/galleria-1.2.5/galleria-1.2.5.min.js'
exist.

BIG HINT when uploading Galleria, ensure that the permissions are right, the defaults in the zip are awful ;-( ymmv.

Galleria can be obtained from here

Colorbox will need to be installed and 'Enable Colorbox load' set in admin config.

Put the following in your theme's template.php mytheme_preprocess_page() function, again adjust paths to suit.

  if (isset($_GET['template'])) {
    if ($_GET['template'] == 'colorboxgalleria') {
      $vars['template_files'][]  = 'page--colorboxgalleria';
      $vars['content'] = $vars['node']->body;
      drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/galleria-1.2.5/galleria-1.2.5.min.js', 'theme');
    }
  }

Next you will need to create a template file:
page--colorboxgalleria.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<!-- page colorboxgalleria.tpl -->
<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
<style>
#page-title {
  color: #ffffff;
}
</style>
</head>
<body>
<?php if ($title): ?><h1 id="page-title"><?php print $title; ?></h1><?php endif; ?>
<?php print $content; ?>
</body>
<!-- /page colorboxgalleria.tpl -->
</html>

Create a page node, adjusting paths/sizes to suit your needs, you will need 'Full html' rights.
Give it whatever title is appropriate.
The body:

<div id="gallery">
<img src="/my/path/to/images/pic1.jpg">
<img src="/my/path/to/images/pic2.jpg">
<img src="/my/path/to/images/pic3.jpg">
<img src="/my/path/to/images/pic4.jpg">
<img src="/my/path/to/images/pic5.jpg">
<img src="/my/path/to/images/pic6.jpg">
<img src="/my/path/to/images/pic7.jpg">
<img src="/my/path/to/images/pic8.jpg">
<img src="/my/path/to/images/pic9.jpg">
</div>
<script>
(function($) {
  Galleria.loadTheme('/sites/all/themes/mytheme/js/galleria-1.2.5/themes/classic/galleria.classic.min.js');
  $("#gallery").galleria({
    width: 900,
    height: 600,
    transition: 'fade',
    showInfo: false,
    autoplay: 7000
  });
})(jQuery);
</script>

Next build a link somewhere. eg in a block
'xxx' is the node id of the node you created above.
adjust sizes, titles etc to suit.

<a class="colorbox-load" href="/node/xxx?width=920&amp;height=660&amp;iframe=true&amp;template=colorboxgalleria" title="My Photogallery">
Click here
</a>

That's it! Remember to flush the cache before testing.