How to get thumbnail navigation working for Flexslider in WP theme?

Question

I have integrated Flexslider into a WP theme using a tutorial. I have activated Thumbnail navigation control, however, all of the thumbnail links are broken.

I have tried inserting the following code into the <li data-thumb=""> part, but I think I may be missing something in my Slider.php or Functions file.

The code I have tried inserting to create thumbnails is:

<li data-thumb="<?php echo ( wp_get_attachment_url( $single_gallery_attachment->ID, 'thumbnail' )); ?>">

Can anyone help me or point me in the right direction?

Answer 1

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');

<img src="<?php echo $thumbnail[0]; ?>" width="" height="" />

Answer 2

your problem will be solved if u use

$thumbnail=wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');

and use this variable by passing it into image source e.g

Answer 3

<ul>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post();

        $attachments = get_posts( array(
            'post_type'   => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        ) );

        if ( $attachments ) {
            foreach ( $attachments as $attachment ) {


$thumbnail = wp_get_attachment_image_src($attachment->ID, 'thumbnail');

$img = wp_get_attachment_image($attachment->ID, 'large');
?>

<li data-thumb='<?php echo $thumbnail[0];?>'><?php echo $img;?></li>

           <?php
            }
        }
    endwhile; endif; ?>
</ul>

Don't forget to enqueue the scripts jquery.flexslider-min.js and flexslider.css