我用wordpress循环调用图像以显示在主页上的flexslider中。
然而，滑块缩略图的活动类并没有与幻灯片同步工作——我无法单击缩略图来查看相应的较大幻灯片图像。相反，当我单击缩略图时，滑块中的所有图像都会消失。
我相信这与在缩略图上设置活动类有关，而且由于它不是硬编码的，所以我正在尝试修改flexslider jquery以将活动类添加到缩略图中
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();
?>
