砌體插件不WordPress的畫廊

-1

我試圖做一個磚石畫廊喜歡上這個網站：http://bensasso.com/

我有一個插件已經是這個鏈接上發展起來的：http://yourjavascript.com/4620774411/picwall.js

若要結構是：

<div id="mainGalleryArea" > 
<div class="singleImageWrap" data-fullsize="image1" ><img src="image1" /></div> 
<div class="singleImageWrap" data-fullsize="image2" ><img src="image2" /></div> 
<div class="singleImageWrap" data-fullsize="image3" ><img src="image3" />

這裏css.min：

#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; 
}

如果我，甚至在頁面內容是否工作正常插入我的模板的代碼，但用戶想要使用WordPress的畫廊，然後，我使用在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;} ?>

但是當我用它的插件，使在同一地點的照片一堆，我不知道是什麼樣的衝突發生在這裏，請任何幫助！

來源

2017-02-14 Vinícius Maia Silveira