Plugin Js em conflito com galeria wordpress

Boa noite,

Estou tentando fazer uma pagina com efeito de galeria masonry semelhante a esta: http://bensasso.com/

Tenho um plugin de desenvolvido em jquery que estou tentando usar com a galeria do Wordpress, o link do plugin é: http://yourjavascript.com/4620774411/picwall.js

Basicamente a estrutura para o Plugin funcionar é:

<div id="mainGalleryArea" >
    <div class="singleImageWrap" data-fullsize="imagem1" ><img src="imagem1"  /></div>
    <div class="singleImageWrap" data-fullsize="imagem2" ><img src="imagem2"  /></div>
    <div class="singleImageWrap" data-fullsize="imagem3" ><img src="imagem3"  />
</div>

Aqui o css do plugin:

/* START -- Gallery pages
----------------------------------------------*/
#galleryNavigation {
    float: left;
    height: 100%;
    border-right: double 5px darkcyan;
}

#galleryNavigation ul {
    list-style-type: none;
    padding: 0px 0px 0px 20px;
}

#galleryNavigation li {
    line-height: 1.5em;
}

#galleryNavigation a {
    color: #888;
    text-decoration: none;
}

#mainGalleryArea {
    float: left;
    position: relative;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1.2s;
    transition-delay: .1s;
}


#mainGalleryArea img, #fullImageArea img {
    max-width: 100%;
    overflow: hidden;
}

.singleImageWrap {
    position: absolute;
    transition-property: top, left;
    transition-duration: 1s, 1s;
    transition-delay: 0s, 0s;
    transition-timing-function: ease, ease;
}

#fullImageArea {
    position: relative;
}

#fullImage {
    position: absolute;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1.2s;
    transition-delay: .1s;
}

#shiftLeft:hover {
    background-color: #333;
    opacity: .5;
    cursor: pointer;
    background-image: url("../images/3arrowback.png");
    background-repeat: no-repeat;
    background-position: center;
    transition-property: background-color, opacity;
    transition-duration: 1s, 1s;
    transition-delay: 0s, 0s;
}

#shiftRight:hover {
    background-color: #333;
    opacity: .5;
    cursor: pointer;
    background-image: url("../images/3arrow.png");
    background-repeat: no-repeat;
    background-position: center;
    transition-property: background-color, opacity;
    transition-duration: 1s, 1s;
    transition-delay: 0s, 0s;
}

Se eu inserir esse codigo no template do meu tema, ou mesmo se inserir direto no content da página funciona normal, mas o usuário quer subir as imagens pela galeria do wp, então para limpar toda estilização da galeria do wp e inserir a minha estou usando o seguinte codigo no functions.php

<?php
add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
    global $post;

    if (isset($attr['orderby'])) {
        $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
        if (!$attr['orderby'])
            unset($attr['orderby']);
    }

    extract(shortcode_atts(array(
        'order' => 'ASC',
        'orderby' => 'menu_order ID',
        'id' => $post->ID,
        'itemtag' => 'dl',
        'icontag' => 'dt',
        'captiontag' => 'dd',
        'columns' => 3,
        'size' => 'thumbnail',
        'include' => '',
        'exclude' => ''
    ), $attr));

    $id = intval($id);
    if ('RAND' == $order) $orderby = 'none';

    if (!empty($include)) {
        $include = preg_replace('/[^0-9,]+/', '', $include);
        $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

        $attachments = array();
        foreach ($_attachments as $key => $val) {
            $attachments[$val->ID] = $_attachments[$key];
        }   
    }

    if (empty($attachments)) return '';

    // Here's your actual output, you may customize it to your need

    $output = "<div id=\"mainGalleryArea\" >\n";    

    // Now you loop through each attachment
    foreach ($attachments as $id => $attachment) {
        // Fetch the thumbnail (or full image, it's up to you)
   //   $img = wp_get_attachment_image_src($id, 'medium');
  //    $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
        $img = wp_get_attachment_image_src($id, 'full');

        $output .= "<div class=\"singleImageWrap\" data-fullsize=\"{$img[0]}\"  >\n";
        $output .= "<img src=\"{$img[0]}\" />\n";
        $output .= "</div>\n";
    }

    $output .= "</div>\n";

    return $output;
}
?>

Acontece que quando eu uso desta forma o plugin chega até a carregar nas imagens, mas ele agrupa todas elas trepadas, tipo numa pilha só.