Build a Custom Photo Gallery in Business Catalyst with jQuery, XML and Pirobox

If you’ve had the opportunity to work with Adobe Business Catalyst, you’ve no doubt found that it’s definitely got it’s pros and cons. One of the drawbacks I’ve come across pertains to the Photo Gallery module. I haven’t seen a way within the system to style the gallery so that all of the thumbnails are the same size. This may seem like a minor detail to some, but it can really throw off a design, especially if you’re working with a grid.

One great feature that BC has is the ability to create an XML feed from a photo gallery, and that’s what I’ll be utilizing to build my fully customizable Business Catalyst photo gallery. I’ll also be using jQuery which is hands-down my favorite JavaScript library, and Pirobox Extended which is, in my opinion, the best lightbox plugin.

This is my first tutorial so please bear with me. And if anyone knows of a better way of doing this, I’d love to hear it. I did a lot of Googling and couldn’t find anything, but I’m always up to learning better solutions!

View the Demo
Demo Source Files

Let’s start with the back-end stuff inside of BC. I’m going to assume that you already know how to create a photo gallery. After you’ve done so, generate an XML feed from that gallery and copy the URL of the XML file.

Now that we’ve gotten our feed, let’s start writing some markup. First, you’ll need to either download Pirobox here or use the version I’ve included with the source files.

Now let’s include jQuery and the Pirobox files in our document head along with the JavaScript file we’ll be using for the gallery… I’ve just called it ‘gallery.js’.

We’re going to load the photos as list-items into an unordered-list, so let’s add the unordered-list to our markup where we want the gallery to appear.

Here’s the fun part. We’re going to use jQuery to parse the XML feed and output each photo as a list item inside of our unordered-list. I put my JavaScript code inside a separate file called ‘gallery.js’.

Now let’s add some styles to make our photo gallery look good. Obviously, you can style the gallery however you want. Here’s the CSS I used for the demo.

So there you have it. A custom photo gallery in Adobe Business Catalyst!

Technorati Tags: adobe business catalyst, jQuery, photo gallery, pirobox

About the author

Dallas area SEO Consultant, Front-end Web Developer, student of all things 'web', proud Bradley dad, dog lover and all around geek!

Related Posts

05/15/2011

Add A Dynamic Nivo Slider to A Business Catalyst Site

Sliders are pretty popular these days. Almost every WordPress theme comes with some kind of slider that’s easy to manage in the back-end, but how do you add a slider to an Adobe Business Catalyst site and make it simple for your clients to update? Read on… Nivo Slider For this tutorial, we’re going to [...]

Read story

08/08/2010

How I Learned Web Development

Three years ago I was a TERRIBLE web developer! Check out my first site, built proudly with Microsoft Publisher!  (Yeah, that’s right… I’m not afraid to post my bad stuff! NOTE- This was done for a FRIEND. It was not a ‘professional’ job and I wasn’t paid.) I knew some HTML because I used to [...]

Read story