Active class for my flexslider in WordPress

Question

I'm calling images with a wordpress loop to display in a flexslider on the home page.

However, the active class for the thumbnails of the slider aren't working in tandem with the slideshow -- I can't click on thumbnails to view the corresponding larger slideshow image. Instead when I click on the thumbnails all the images in the slider disappear.

I believe it has something to do with setting the active class on the thumbnails - and since it isn't hard coded, I'm trying to modify the flexslider jquery to add the active class to the thumbnails

test site

jQuery(document).ready(function() {

// Default FlexSlider parameters
if (typeof fs_params == 'undefined') {
    fs_params = {animation: 'fade', controlNav: true, directionNav: true, slideshow: false, pauseOnAction: true, pauseOnHover: false, animationSpeed: 600, slideshowSpeed: 7000};
}

// Homepage FlexSlider parameters
if (typeof fs_params_homepage == 'undefined') {
    fs_params_homepage = {animation: 'fade', controlNav: true, directionNav: true, slideshow: true, pauseOnAction: false, pauseOnHover: true, animationSpeed: 600, slideshowSpeed: 7000};
}

// Note: fs_params / fs_params_homepage can be overwritten by setting its value in an html file


// *** FLEXSLIDER INITIALIZATION
$('.flexslider').each(function() {
    var $this = $(this);

    if ($this.is('#home-slider')) {

        // Callback function: fires asynchronously with each slider animation
        fs_params_homepage.before = function(slider){
            var next_index = slider.animatingTo + 1,
                current_index = slider.currentSlide + 1,
                $next_caption = $('.slider-caption div[id=caption'+next_index+']'),
                $current_caption = $('.slider-caption div[id=caption'+current_index+']');

            $('.slider-menu li').removeClass('active').siblings().find('a')
                    .filter(function () {
                        return $(this).attr('href') == '#slide'+next_index;
                    }).parent().addClass('active');

            if ($('html').hasClass('ie8')) { // IE8 hack
                $current_caption.hide();
            }
            $current_caption.fadeOut(400, 'swing', function() {
                if ($('html').hasClass('ie8')) { // IE8 hack
                    $next_caption.show();
                } else {
                    $next_caption.fadeIn(300, 'swing');
                }
                setCaptionHeight($next_caption);
            });
        };

        // Callback function: fires after each slider animation completes
        fs_params_homepage.after = function(slider){

        };

        // Init homepage slider:

        // full-width slider with center-aligned image
        if ($this.parent().parent().parent().parent().hasClass('full-width-image')) {
            if ($this.attr('data-slideshow') == 'yes') { fs_params_homepage.slideshow = true; }
            if ($this.attr('data-slideshow') == 'no') { fs_params_homepage.slideshow = false; }
            if ($this.attr('data-animation') == 'fade') { fs_params_homepage.animation = 'fade'; }
            if ($this.attr('data-animation') == 'slide') { fs_params_homepage.animation = 'slide'; }
            if ($this.attr('data-control-nav') == 'yes') { fs_params_homepage.controlNav = true; }
            if ($this.attr('data-control-nav') == 'no') { fs_params_homepage.controlNav = false; }
            if ($this.attr('data-direction-nav') == 'yes') { fs_params_homepage.directionNav = true; }
            if ($this.attr('data-direction-nav') == 'no') { fs_params_homepage.directionNav = false; }
            if ($this.attr('data-pause-on-action') == 'yes') { fs_params_homepage.pauseOnAction = true; }
            if ($this.attr('data-pause-on-action') == 'no') { fs_params_homepage.pauseOnAction = false; }
        }

        // slider with right-aligned image
        else {
            fs_params_homepage.animation = 'fade';
        }

        if ($this.attr('data-slideshow-speed') > 0) { fs_params_homepage.slideshowSpeed = $this.attr('data-slideshow-speed'); }
        $this.flexslider(fs_params_homepage);
    }

    else {
        // Init default slider
        var params = $.extend({}, fs_params);
        if ($this.attr('data-slideshow') == 'yes') { params.slideshow = true; }
        if ($this.attr('data-slideshow') == 'no') { params.slideshow = false; }
        if ($this.attr('data-slideshow-speed') > 0) { params.slideshowSpeed = $this.attr('data-slideshow-speed'); }
        if ($this.attr('data-animation') == 'fade') { params.animation = 'fade'; }
        if ($this.attr('data-animation') == 'slide') { params.animation = 'slide'; }
        if ($this.attr('data-control-nav') == 'yes') { params.controlNav = true; }
        if ($this.attr('data-control-nav') == 'no') { params.controlNav = false; }
        if ($this.attr('data-direction-nav') == 'yes') { params.directionNav = true; }
        if ($this.attr('data-direction-nav') == 'no') { params.directionNav = false; }
        if ($this.attr('data-pause-on-action') == 'yes') { params.pauseOnAction = true; }
        if ($this.attr('data-pause-on-action') == 'no') { params.pauseOnAction = false; }
        $this.flexslider(params);
    }

});


// *** HOMEPAGE SLIDER
$homeSlider = $('#home-slider').data('flexslider');

// Slider menu
$('.slider-menu li').on('click', function(e) {
    e.preventDefault();
    var slide_index = $('a', this).attr('href').substr(6) - 1;
    $homeSlider.flexslider(slide_index);
    return false; // IE9 hack
});

// Position the right side navigation ("right-side-nav" class)
function positionRightSideNav() {
    if ($(window).width() >= 768) {
        var homeHero_x = 0.5 * ($(window).width() - $('#home-hero').width()),
            heroImage_marginLeft = parseInt($('#home-hero .hero-image').css('margin-left')),
            col_marginLeft = parseInt($('#home-hero-content .columns').css('margin-left')),
            rightSideNav_width = $('#home-slider.right-side-nav .flex-direction-nav a').width(),
            navLeft = $(window).width() - (homeHero_x + col_marginLeft + heroImage_marginLeft) - rightSideNav_width;
        $('#home-slider.right-side-nav .flex-direction-nav a').css('left', navLeft + 'px');
    } else {
        $('#home-slider.right-side-nav .flex-direction-nav a').css('left', '');
    }
}

wp-query for large slideshow images:

<div class="hero-image">
                    <div id="home-slider" class="flexslider right-side-nav">
                        <ul class="slides">

<?php    

$attachments = get_children(array('post_parent' => 107, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_status' => 'inherit', 'posts_per_page' => 7, 'order' => 'DESC' ));

if ($attachments) {

    foreach ( $attachments as $attachment_id => $attachment ) {

        echo '<li id="slide'.$attachment_id.'" >';
        echo wp_get_attachment_image($attachment_id, 'home-slider');
        echo '</li>';
    }

} // end see if images

 wp_reset_postdata();

  ?>
                        </ul>
                    </div>
                </div>

and then wp-query for thumbs:

<?php    

$thumbs = get_children(array('post_parent' => 107, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_status' => 'inherit', 'posts_per_page' => 7, 'order' => 'DESC' ));

if ($thumbs) { // if there are images attached to posting, start the flexslider markup

    foreach ( $thumbs as $attachment_id => $thumb ) { // create the list items for images with captions

        echo '<li>';
        echo '<a href="#slide'.$attachment_id.'" >';
        echo wp_get_attachment_image($attachment_id, 'home-slider-thumb');
        echo '</a>';
        echo '</li>';
    }

} // end see if images

wp_reset_postdata();

?>

Answer 1

This code here is the problem-

$('.slider-menu li').on('click', function(e) {
    e.preventDefault();
    var slide_index = $('a', this).attr('href').substr(6) - 1;
    $homeSlider.flexslider(slide_index);
    return false; // IE9 hack
});

In your html, you're setting your IDs to slide plus the attachment ID, then telling flexslider to animate to that slide. Except flexslider is expecting a slide position (1st slide, 2nd slide, etc.), not an element ID. You should instead use the index of the clicked li-

$('.slider-menu li').on('click', function(e) {
    e.preventDefault();
    $homeSlider.flexslider( $(this).index() );
    return false; // IE9 hack
});

Also note that flexslider can do all this stuff for you automagically if you create a carousel for the thumbs, and set the carousel asNavFor for the slider.

Answer 2

.active class of flexslider is not specific to WordPress, so off-topic here. BTW, a simple WP_Query(), get_posts(), get_children() etc. never affects the flexslider performance. What you have to follow is the syntax provided by the flexslider. Please note:

<div class="flexslider">
  <ul class="slides">
    //loop starts
       <li>
         <img src="slide1.jpg" />
       </li>
    //loop ends
  </ul>
</div>

The ul.slides is important.

And the active class is absent because somehow the JS is not triggered correctly. So to debug JS issue (if any) you can use the browser's developer console. A simple jQuery worked for me in many of my projects:

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});

Please check:

• A noConflict wrapper is necessary or not
• jQuery is enqueued before the flexslider.min.js
• Your custom JS code enqueued properly and loads after loading the DOM
• And, flexslider.css is also enqueued in the <head> - sometime it's important

HEY! .flex-active is the class that loads in the thumbnail image (<img>), NOT in the <li> (check here)

And wp_reset_postdata() is not necessary for get_children() query. :)