caroufredsel image thumbnail pagination in wordpress

Question

I would like a carousel that shows images and image thumbnails from the media gallery in a wordpress post.

I can get it to query the db, but I do not know how to use caroufredsel to return the array of thumbnails.

What I have now just returns the first thumbnail, which makes sense, because the function return variable is set to $src[0]. I need the .pager-wrapper class to receive all images that are found in the php loop.

As an example, I would like the return to be:

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

How do I get caroufredsel to return the array of thumbnails to the selected container class?

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

I was going about this all wrong. You have to setup 2 carousels. Here is the link to the tutorial which helped: http://favbulous.com/post/628/create-and-style-an-image-slider-with-thumbnail-carousel

This is what I had to do...

First add a new loop in a new div where you want the thumbs to go.

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

You can reduce this to a single db query to save some speed if you want.

Second is to add the 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'
    });

I hope this is a help to someone else, as I did not find a lot of documentation on making an image thumbnail listing using fredSel.