Mauerwerk Plugin funktioniert nicht auf Wordpress Galerie

Question

Guter Abend,

Ich versuche, auf dieser Website eine Mauergalerie wie die auf zu tun: http://bensasso.com/

Ich habe ein Plugin bereits auf diesem Link entwickelt: http://yourjavascript.com/4620774411/picwall.js

die Struktur zu arbeiten, ist:

<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" /> 

Hier die 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; 
} 

Wenn ich diesen Code auf meiner Vorlage einfügen, oder auch in dem Seiteninhalt, wenn funktioniert gut, aber der Benutzer möchte die Galerie von Wordpress verwenden, dann verwende ich dieser Code auf den functions.php die Galerie Code und Einsatz Mine reinigen:

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

Aber wenn ich es verwende das Plugin einen Haufen der Bilder an der gleichen Stelle machen, ich weiß nicht, welche Art von Konflikt geschieht hier Bitte jede Hilfe!

Answer 1

Sind Sie sicher, dass das Skript funktioniert/lädt? Da Sie .singleImageWraps für absolut positioniert deklariert haben, werden sie aufeinander gestapelt, wenn das Skript sie nicht neu positionieren kann.