Intereting Posts

Активный класс для моего flexslider в WordPress

Я вызываю изображения с помощью цикла wordpress для отображения в flexslider на домашней странице.

Однако активный класс для эскизов слайдера не работает в тандеме со слайд-шоу – я не могу нажимать на миниатюры, чтобы просмотреть соответствующее изображение большего слайд-шоу. Вместо этого, когда я нажимаю на миниатюры, все изображения в ползунке исчезают.

Я считаю, что это связано с настройкой активного класса на миниатюрах – и поскольку он не является жестко закодированным, я пытаюсь изменить jquery flexslider, чтобы добавить активный класс в миниатюры

тестовый сайт

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-запрос для больших изображений слайд-шоу:

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

а затем wp-запрос для больших пальцев:

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

Этот код здесь является проблемой-

 $('.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 }); 

В вашем html вы устанавливаете свои идентификаторы для slide плюс идентификатор вложения, а затем сообщают flexslider о анимации этого слайда. Кроме того, flexslider ожидает позицию слайда (первый слайд, второй слайд и т. Д.), А не идентификатор элемента. Вместо этого вы должны использовать индекс щелчка li-

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

Также обратите внимание, что flexslider может сделать все это для вас автоматически, если вы создадите карусель для больших пальцев, и установите карусель asNavFor для слайдера.

.active класс flexslider не определен для WordPress, поэтому вне темы здесь. BTW, простые WP_Query() , get_posts() , get_children() и т. Д. Никогда не влияют на производительность flexslider. То, что вам нужно, это синтаксис, предоставляемый flexslider. Пожалуйста, обратите внимание:

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

Большое ul.slides имеет ul.slides .

И active класс отсутствует, так как JS не запускается правильно. Поэтому для отладки проблемы JS (если есть) вы можете использовать консоль разработчика браузера. Простой jQuery работал для меня во многих моих проектах:

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

Пожалуйста, проверьте:

  • Необходима оболочка noConflict или нет.
  • jQuery flexslider.min.js очередь перед flexslider.min.js
  • Ваш пользовательский JS-код установлен правильно и загружается после загрузки DOM
  • И flexslider.css также находится в flexslider.css в <head> – когда-то это важно

ПРИВЕТ! .flex-active – это класс, который загружается в миниатюрное изображение ( <img> ), а не в <li> ( здесь )

И wp_reset_postdata() не требуется для get_children() . 🙂