Integrating Galleria with WordPress

This is a simple way to get this working, but in all my googling I didn’t come across a write-up. Here is how I got the beautiful jQuery Galleria to replace the default WordPress gallery. This is my ideal solution, and I am actively using it as a Photography CMS for a client’s portfolio.

Download Galleria and upload it to your server, under your theme’s directory.

Call jQuery and then Galleria into your theme’s header.php (order matters, and if you already have a plugin calling jQuery you may need to do some tweaking, check your firebug console if things break):

<script src="/galleria/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/galleria/galleria-1.2.3.min.js" type="text/javascript"></script>


When putting a gallery into your post or page, flip to the HTML editor and change the shortcode to:



For more on the WordPress Gallery, see the codex.

Now in the footer, just before </body>:

<script type="text/javascript">
if (Galleria.IE6 != true) {
// If they're running ie6, don't even both. Otherwise, load theme
Galleria.loadTheme('<?php bloginfo('theme_url'); ?>/galleria/themes/classic/galleria.classic.js');
$('.gallery').galleria({ //These options are personal preference, see Galleria documentation
image_crop: 'height',
transition: 'fade',
thumb_crop: false,
transition_speed: 500,
data_config: function(img) {
// will extract and return image captions from the wordpress gallery source:
return  {
title: $(img).parent().next('strong').html(),
description: $(img).parent().parent().next('p').html()
};
}
});
}

</script>