Build a Custom Photo Gallery in Business Catalyst with jQuery and XML
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 Shadowbox which is a pretty cool lightbox.
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!
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 Shadowbox here or use the version I’ve included with the source files. You can put the Shadowbox folder anywhere you want, you just have to make sure you keep all of the Shadowbox files within that folder.
Now let’s include jQuery and the Shadowbox files in our document head along with the JavaScript file we’ll be using for the gallery… I’ve just called it ‘gallery.js’.
1 2 3 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="shadowbox/shadowbox.js"></script> <script src="js/gallery.js"></script> |
And we’ll add the code to initialize Shadowbox at the bottom, just before the closing ‘body’ tag.
1 2 3 | <script> Shadowbox.init(); </script> |
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.
1 | <ul id="gallery-ul"> <!-- The Photo Gallery will be loaded into here --></ul> |
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’.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function () { $.ajax({ type: "GET", url: "img/demo-gallery/PhotoGallery.xml", // location of your gallery's xml file dataType: "xml", success: function(xml) { $(xml).find('img').each(function() { var location = 'img/demo-gallery/'; // relative path to the directory that holds your images var url = $(this).attr('src'); var alt = $(this).attr('alt'); $(' ').html('<a class="wpGallery mceItem" title="gallery" rel="shadowbox<img src=" href=" mce_src="></a>"><img class="thumb" title="'+alt+'" src="'+location+''+url+'" alt="'+alt+'" />').appendTo('#gallery-ul'); }); $('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery'); } }); }); |
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.
1 2 3 4 5 | #photo-gallery { width: 100%; position: relative; overflow: hidden; margin: 10px auto; } #gallery-ul { list-style: none; position: relative; width: 515px; margin: 0 auto; } #gallery-ul li { display: block; height: 81px; width: 81px; float: left; margin: 10px; position: relative; border:1px solid #C0C0C0; background:#F2F2F2; overflow: hidden; } #gallery-ul li a { display: block; height: 75px; width: 75px; position: absolute; top:3px; left: 3px; z-index:5; } img.thumb { width: 100%; height: 100%; position: relative; } |
So there you have it. A custom photo gallery in Adobe Business Catalyst!
About the author
Related Posts
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
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
By Jen White August 11, 2010 - 6:26 pm
Thank you Wil, I have been struggling with the photo gallery in BC and have been clipping my images with CSS. Not ideas especially if you have creative clients that notice those types of things.
By Wil Helser August 11, 2010 - 7:45 pm
No problem, I’m glad it was useful! Let me know if you need any help with it.
By Christian Wick November 28, 2010 - 3:30 am
Hi Wil,
Nice tutorial. If it’s ok with you, I would like to use this in a Learning BC Video Series. You wil get credit for it
By Wil Helser November 29, 2010 - 5:41 pm
Thanks Christian! Sure, that’s fine with me. I’m about to make a small change, probably this week. There seems to be some weird issues with Shadowbox and IE7. I’m going to change the tutorial to use a different lightbox. I’ll probably post the updated one some time this week.
By jason January 13, 2011 - 6:34 am
This doesn’t seem to be working in IE7. Any ideas for fixing this?
By Wil January 13, 2011 - 1:11 pm
Yeah Jason, it seems to be a problem with Shadowbox, IE7 and AJAX. I don’t use Shadowbox anymore, for that reason. I’m now using Pretty Photo, I just haven’t updated the tutorial yet. I have the source code for the updated gallery on Github though and you can grab it here- https://github.com/wilhelser/Adobe-Business-Catalyst-Photo-Gallery. Let me know if you have any questions about it.