Орбитальная ошибка Zurb Foundation?

не знаю, что происходит с моим ползунком изображения в разделе вкладки «Поддержка», он не отображается правильно, отрезает половину и выглядит странно. Слайдер основного изображения хорош. Но когда вы проверяете элемент, ползунок орбитального изображения «поддержка» внезапно выглядит нормально. Это с каркасом фундамента.

вот ссылка, чтобы увидеть ошибку: http://www.omegadesignla.com/virtual/

и немного html:

<div class="content" id="panel6">
   <div class="row">
       <div class="large-4 columns">
           <h3> OFLVS Contact Info:</h3>

<ul>
   <li>Student Support</li>

    <li>Parent Support</li>

    <li>Support links and resources</li>
</ul>

       </div>
       <div class="large-8 columns">
          <ul class="example-orbit" data-orbit>
              <li>
                <img src="imgs/flash3.jpg" alt="slide 1" />
                <div class="orbit-caption">
                  Caption One.
                </div>
              </li>
              <li>
                <img src="imgs/flash12.jpg" alt="slide 2" />
                <div class="orbit-caption">
                  Caption Two.
                </div>
              </li>
              <li>
                <img src="imgs/flash9.jpg" alt="slide 3" />
                <div class="orbit-caption">
                  Caption Three.
                </div>
              </li>
        </ul>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>

JavaScript:

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('reflow');
      }
    },

  orbit: {
      pause_on_hover: false,
      timer_speed: 6000
  }

});

orbit zurb-foundation-5
person Jarg7    schedule 17.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что ваша ошибка связана с тем, что ползунок орбиты находится в разделе содержимого вкладок. У меня была аналогичная ошибка с ползунком диапазона в разделе вкладок.

Попробуйте переформатировать javascript в файле JS с помощью обратного вызова вкладки вот так:

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('orbit', 'reflow');
      }
    }
  });

РЕДАКТИРОВАТЬ: я исправил свой ответ и добавил рабочую скрипку.

person Pixelsmith    schedule 17.03.2015
comment
спасибо, не уверен, что это правильно, но это не сработало, когда я добавил это в свой JS. Позвольте мне отредактировать основной контент и показать вам js, который у меня есть. - person Jarg7; 18.03.2015
comment
Я провел некоторое расследование, и я был близок к исходному ответу, но не идеален. Я обновил свой ответ и добавил рабочую скрипку. Посмотрите, работает ли вышеперечисленное для вас. Если нет посмотрю еще. - person Pixelsmith; 18.03.2015
comment
Замечательно слышать! Рад, что смог тебе помочь. - person Pixelsmith; 18.03.2015