1

ワードプレスの投稿でメディア ギャラリーの画像と画像のサムネイルを表示するカルーセルが欲しいです。

データベースにクエリを実行することはできますが、caroufredsel を使用してサムネイルの配列を返す方法がわかりません。

関数の戻り変数が $src[0] に設定されているため、これは理にかなっています。PHPループで見つかったすべての画像を受け取るには、.pager-wrapperクラスが必要です。

例として、リターンを次のようにしたいと思います。

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

        }
    }
});
4

1 に答える 1

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>

必要に応じて、これを単一の db クエリに減らして速度を節約できます。

2 つ目は、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 を使用して画像のサムネイル一覧を作成する方法に関するドキュメントがあまり見つからなかったので、これが他の人の助けになることを願っています。

于 2013-01-07T21:41:09.583 に答える