WordPress Image Gallerys的自定义HTML只输出一半的功能

Question

I took the following code from an example and adjusted it so a standard gallery in wordpress would output as a Flexslider and Carousel. I can output one of them just fine, but I added additional *outputs for a Carousel as well, and now only the Carousel prints out. Any help on how I can get the whole thing to output would be appreciated

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 class=\"wordpress-gallery\">
";
$output = "<div id=\"sliding\" class=\"flexslider flexslider--post-content\">
";
//$output .= "<div class=\"preloader\"></div>
";
$output .= "<ul class=\"slides flexslider__slides\">
";

// 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');
//        $imgThumbnail = wp_get_attachment_image_src($id, 'thumbnail');
        $img = wp_get_attachment_image_src($id, 'full');

    $output .= "<li class=\"slide flexslider__slide cover\">
";
    $output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />
";
    $output .= "</li>
";
}
$output .= "</ul>
";
$output .= "</div>
";
$output = "<div id=\"carousel\" class=\"flexslider flexslider--post-content-carousel\">
";
$output .= "<ul class=\"slides flexslider__slides\">
";
foreach ($attachments as $id => $attachment) {
    $imgThumbnail = wp_get_attachment_image_src($id, 'thumbnail');

    $output .= "<li >
";
    $output .= "<img src=\"{$imgThumbnail[0]}\" alt=\"\" />
";
    $output .= "</li>
";
}
$output .= "</ul>
";
$output .= "</div>
";
$output .= "</div>
";



return $output;

}

the html that gets outputed so far (it doesn't output the #sliding div, only the #carousel):

<div id="carousel" class="flexslider flexslider--post-content-carousel">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides flexslider__slides" style="width: 1400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="flex-active-slide" style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-1-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-2-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-3-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-4-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-5-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-6-300x300.jpg" alt="" draggable="false">
            </li>
        </ul>
    </div>
    <ul class="flex-direction-nav">
        <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
        <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
    </ul>
</div>

Answer 1

You have a few errors, that I can see.

// Here's your actual output, you may customize it to your need
$output = "<div class=\"wordpress-gallery\">
";
$output = "<div id=\"sliding\" class=\"flexslider flexslider--post-content\">
";

If you wish to append data, you need to put a period . before your equals = like this .= on the second $output assignment. Anytime you are appending but not putting .= after the variable name, you are basically reassigning it a new value instead of adding to it.

Also change this line:

$output = "<div id=\"carousel\" class=\"flexslider flexslider--post-content-carousel\"> ";

to:

$output .= "<div id=\"carousel\" class=\"flexslider flexslider--post-content-carousel\"> ";

The problem lies in the fact that you were basically resetting the variable with a new output instead of appending the data to it.

Hope this helps you.

Be sure to go through your code and double check variable assignments to make sure you are appending rather than resetting.