Question

晚上好，

我正在尝试像这个网站上的on on那样做一个砌筑画廊：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;} ?>

但是当我使用它时，插件会在同一个地方制作一堆图片，我不知道这里发生了哪种冲突，请帮忙！

Answer 1

您确定脚本可以正常工作吗？由于您已声明<ul class="nav nav-tabs" role="tablist" id="descriptionTab"> <li class="active"> <a href="#introduction" role="tab" data-toggle="tab">introduction</a> </li> <li> <a href="#access" role="tab" data-toggle="tab">access</a> </li> <li> <a href="#times" role="tab" data-toggle="tab">times</a> </li> </ul>  <div class="tab-content" style="position:relative;"> <div class="tab-pane fade active in EmptyFind" id="introduction"> <h2>some text here</h2> </div> <div class="tab-pane fade EmptyFind" id="access"> <h2>some text here</h2> </div> <div class="tab-pane fade EmptyFind" id="times"> <h2>  </h2> </div> </div>绝对定位，如果脚本无法重新定位，它们将相互堆叠。

Masonry插件不适用于WordPress库

1 个答案: