Flexslider с динамическим контентом. например, изображения и / или видео

Question

Flexslider с динамическим контентом. например, изображения и / или видео

0

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

Основной код из их демо:

    // Vimeo API nonsense
    var player = document.getElementById('player_1');
    $f(player).addEvent('ready', ready);

    function addEvent(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false)
        } else {
            element.attachEvent(eventName, callback, false);
        }
    }

    function ready(player_id) {
        var froogaloop = $f(player_id);
        froogaloop.addEvent('play', function(data) {
            $('.flexslider').flexslider("pause");
        });
        froogaloop.addEvent('pause', function(data) {
            $('.flexslider').flexslider("play");
        });
    }
    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.

$(".flexslider")
    .fitVids()
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

а также

<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

Victor 13 нояб. 2013, в 18:44

Источник

0

Код из чьей-то демонстрации не поможет нам отладить ваш код (если он не совпадает).
Jasper 13 нояб. 2013, в 17:04
0

да это то же самое. Я как бы спрашиваю, возможно ли это на самом деле. Не могу найти какую-либо документацию на сайте Flexslider.
Victor 13 нояб. 2013, в 17:25
0

Вы уверены, что все необходимые скрипты загружаются в правильном порядке? Вы можете проверить вашу консоль JS или вкладку Network ваших инструментов разработчика.
Jasper 13 нояб. 2013, в 17:28
0

Проверено и все хорошо. Как я уже сказал, он отлично работает как слайдер с изображениями и видео вместе, но как только я удаляю <li>, который содержит iframe. Это останавливается. Даже не загружается.
Victor 13 нояб. 2013, в 17:31

Показать ещё 2 комментария

Теги:

jquery

carousel

flexslider

1 ответ

Ещё вопросы

Код из чьей-то демонстрации не поможет нам отладить ваш код (если он не совпадает).
да это то же самое. Я как бы спрашиваю, возможно ли это на самом деле. Не могу найти какую-либо документацию на сайте Flexslider.
Вы уверены, что все необходимые скрипты загружаются в правильном порядке? Вы можете проверить вашу консоль JS или вкладку Network ваших инструментов разработчика.
Проверено и все хорошо. Как я уже сказал, он отлично работает как слайдер с изображениями и видео вместе, но как только я удаляю <li>, который содержит iframe. Это останавливается. Даже не загружается.

Victor · Accepted Answer · 2013-11-18T12-41-00.000Z

Я понял, что следующее:

before: function(slider){
        $f(player).api('pause');
      }

вызывал конфликт, когда видео не было, поэтому я создал двух игроков, которые будут принимать видео и изображения (это исходный код) и второй игрок только для изображений. С помощью:

$(".flexslider-img").flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true
  });

Затем, когда я использую wordpress, я использовал форматы сообщений для вывода соответствующего кода. например, если сообщение содержит видео, пользователь будет выбирать "Видео" в качестве формата сообщения, для которого используется соответствующий код:

// Vimeo API nonsense
    var player = document.getElementById('player_1');
    $f(player).addEvent('ready', ready);

    function addEvent(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false)
        } else {
            element.attachEvent(eventName, callback, false);
        }
    }

    function ready(player_id) {
        var froogaloop = $f(player_id);
        froogaloop.addEvent('play', function(data) {
            $('.flexslider').flexslider("pause");
        });
        froogaloop.addEvent('pause', function(data) {
            $('.flexslider').flexslider("play");
        });
    }
    // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.

$(".flexslider-video")
    .fitVids()
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

Без сомнения, лучший способ сделать это, но это сработало для меня.