0

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();

?>

2 Answers 2

0

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.

1
  • Yes! I changed the jquery to use the index, works perfectly... I was not looking at this portion - and my js jquery isn't the best. Thank you so very much!
    – ccbar
    Mar 20, 2015 at 22:30
0

.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. :)

7
  • noConflict wrapper is needed
    – ccbar
    Mar 19, 2015 at 10:23
  • If you found the answer helpful, you are suggested to check to checkmark on the left to accept the answer. It'll help other identify helpful answer. Mar 19, 2015 at 15:03
  • thank you for taking a look at the issue. I couldn't finish my comment earlier - I intended to say that it wasn't about a noConflict wrapper. JQuery is enqueued first. All is working as it should, it's just that the active class was initially hard coded in html and now that I am using dynamic images, I can't modify the flexslider jquery properly to find the thumbnail li and place a class of active. That's all it needs I believe. But I appreciate you taking a look at all the code.
    – ccbar
    Mar 19, 2015 at 15:29
  • What about the simple jQuery code I gave you instead of yours? Did you try 'em? Mar 19, 2015 at 15:34
  • thanks for checking back. I did try the jquery code you gave me. It's just that this html template (that I've developed into a wordpress theme) has modified flexslider jquery to the point that I can't figure out how to rework the jquery to work in tandem with the WP construct. So I will likely modify the html and get a clean copy of flexslider jquery. (With this modified jquery a class of active is used to fire the thumbnails and since images are dynamically generated, I need a way to add active class, which I've tried in flexslider w no luck yet.)
    – ccbar
    Mar 20, 2015 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.