WordPress中的caroufredsel图像缩略图分页

Question

我想要一个轮播，在 wordpress 帖子中显示来自媒体库的图像和图像缩略图。

我可以用它来查询数据库，但我不知道如何使用 caroufredsel 返回缩略图数组。

我现在只返回第一个缩略图，这是有道理的，因为函数返回变量设置为 $src[0]。我需要 .pager-wrapper 类来接收在 php 循环中找到的所有图像。

例如，我希望返回为：

<img src=image1.jpg />
<img src=image2.jpg />
<img src=image3.jpg />

如何让 caroufredsel 将缩略图数组返回给选定的容器类？

projectCarousel = $("#project-carousel").carouFredSel({
    pagination  : {
    container       : ".pager-wrapper",
    anchorBuilder   : function( nr ) {
        //var src = $(this).attr( "src" );
        //src = src.replace( "/large/", "/small/" );
        <?php 

        $meta = get_post_meta( get_the_ID(  ), 'icrave_project_media_gallery', false );
                if ( !is_array( $meta ) )
                    $meta = ( array ) $meta;

                if ( !empty( $meta ) ):
                    $meta = implode( ',', $meta );
                    $images = $wpdb->get_col( "
                        SELECT ID FROM $wpdb->posts
                        WHERE post_type = 'attachment'
                        AND ID IN ( $meta )
                        ORDER BY menu_order ASC
                    " );
                    foreach ( $images as $att ):
                        // Get image's source based on size, can be 'thumbnail', 'medium', 'large', 'full' or registed post thumbnails sizes
                        $src = wp_get_attachment_image_src( $att, 'thumbnail' );
                        $src = $src[0];
                        ?>


        return '<img src="' + '<?php echo $src ?>' + '" />';

        <?php endforeach ?>
                    <?php endif ?>

        }
    }
});

Answer 1

我做错了。您必须设置 2 个轮播。这是帮助的教程的链接： http://favbulous.com/post/628/create-and-style-an-image-slider-with-thumbnail-carousel

这是我必须做的……

首先在您希望拇指移动的新 div 中添加一个新循环。

    <div id="thumbs">
                    <?php global $wpdb, $post;

                    $meta = get_post_meta( get_the_ID(  ), 'icrave_project_media_gallery', false );
                    if ( !is_array( $meta ) )
                        $meta = ( array ) $meta;

                    if ( !empty( $meta ) ) {
                        $meta = implode( ',', $meta );
                        $images = $wpdb->get_col( "
                            SELECT ID FROM $wpdb->posts
                            WHERE post_type = 'attachment'
                            AND ID IN ( $meta )
                            ORDER BY menu_order ASC
                        " );
                        foreach ( $images as $att ) {
                            // Get image's source based on size, can be 'thumbnail', 'medium', 'large', 'full' or registed post thumbnails sizes
                            $src = wp_get_attachment_image_src( $att, 'thumbnails' );
                            $src = $src[0];

                            // Show image
                            echo "<div class='thumb'>
                                              <a href='#'>
                                              <img src='{$src}' alt='Thumbnail Title' width='72' height='38' /></a></div>";
                        }
                    } 
                    ?>

                </div>

如果需要，您可以将其减少为单个数据库查询以节省一些速度。

二是添加jquery：

$(function(){
    /* Attached an unique class name to each thumbnail image */
    $('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {
            $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            return false;
        });
    }); 

    /* Highlight the first item on first load */
    $('#thumbs a.itm0').addClass( 'selected' );


 projectCarousel = $("#project-carousel").carouFredSel({
        responsive:true,
        circular:true,
        infinite:true,
        width:983,
        height:550,
        scroll: {
            fx: 'crossfade',
            onBefore: function() {
                /* Everytime the main slideshow changes, it check to 
                    make sure thumbnail and page are displayed correctly */
                /* Get the current position */
                var pos = $(this).triggerHandler( 'currentPosition' );

                /* Reset and select the current thumbnail item */
                $('#thumbs a').removeClass( 'selected' );
                $('#thumbs a.itm'+pos).addClass( 'selected' );
                /* Move the thumbnail to the right page */
                var page = Math.floor( pos / 3 );
                $('#thumbs').trigger( 'slideToPage', page );
            }
        },
        auto: {
          play:true
        },
        items:{
            height:winHeight,
            visible:1,
            width:1000
        },
        prev:$("#left"),
        next:$("#right"),
    });

    /* Carousel for the thumbnails */
    $('#thumbs').carouFredSel({
        direction: 'left',
        circular: true,
        infinite: false,
        align: false,
        auto: false,
        prev: '#prev',
        next: '#next'
    });

我希望这对其他人有帮助，因为我没有找到很多关于使用 fredSel 制作图像缩略图列表的文档。