Responsive Photo Gallery

Question

Hi guys, first time posting here. BC Support recommended I come to the forums to get some help!
I'm working on an existing site and turning it into a responsive site.
I've done a majority of the pages, except for the photo gallery page. The BC photo gallery module displays all photos as a table. Is there any way of changing the table into a series of divs?
Currently the photo gallery displays:
<table cellspacing="0" class="photogalleryTable">
  <tbody>
    <tr>
      <td class="photogalleryItem">
                <a onclick="myLightbox.start(this);return false;" rel="lightbox[9216]" href="/gallery/1nirebo-motel-front.jpg" title="">
                  <img src="/gallery/1nirebo-motel-front.jpg?Action=thumbnail&amp;Width=200&amp;Height=130&amp;A lgorithm=proportional&amp;USM=1" alt="" border="0">
        </a>
      </td>
    </tr>
  </tbody>
</table>
But I want to be able to do:
<div class="some_Container">
     <a href="#"><img src="blah"></a>
</div>
I've looked everywhere but can't find any relevant information to suit my problem! Maybe BC should enable this sort of feature in the photo gallery module tag if this feature isn't in there already.
Any help would be greatly appreciated!
Akira Dawson - Kapow Interactive

Answer 1

I figured it out! This may help you guys! I used some jquery and AJAX to achieve the result! I used fancybox as my plugin. I created a photo gallery as per normal, generated an XML file and used the following:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/fancybox/source/jquery.fancybox.pack.js"></script>
<link type="text/css" rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" />
<script type="text/javascript">
j$ = jQuery.noConflict();
          j$(document).ready(function() {
                    j$.ajax({
                      type: "GET",
                      url: "/gallery/PhotoGallery.xml",
                      dataType: "xml",
                      success: function(xml) {
                              j$(xml).find('album').each(function(){
                                var i = 1;
                                var path = jQuery(this).attr('lgpath');
                                j$(this).find('img').each(function(){
                                        var src = jQuery(this).attr('src');
                                        var alt = jQuery(this).attr('alt');
                                        if(i == 1) {
                                                  var active = ' class="active"';
                                                  i++;
                                        } else var active ='';
                                        j$('<div class="gallery"><a href="' + path + src +'" class="fancybox"><img src="' + path + src + '" alt="' + alt + '" title="' + alt + '" /></a></div>').appendTo('#photoGallery');
                              j$(".fancybox").fancybox();
</script>
In my html, I have:
<div id="photoGallery">
</div>
now you can go into your CSS and style it as you wish, I hope this helps some people!