Как присвоить класс/удалить класс при показе определенного слайде в Fotorama?

Question

[msatmb]

Добрый день.
Имеется следующая структура. В качестве слайдера используется скрипт Fotorama

<header> текст </header>
  <div class="fotorama">
     <div data-img="images/bg1.jpg"></div>
     <div data-img="images/bg2.jpg"></div>
  </div>
<script type="text/javascript">
				$(function () {
					$('.fotorama').fotorama({
					  width: '100%',
					  maxwidth: '100%',
					  height: '100%',
					  nav: 'false',
					  loop: 'true',
					  autoplay: 'true',
					  fit: 'cover'
					});
				});
			</script>

Необходимо чтобы когда показывается слайд bg2.jpg, в тег header добавлялся класс, а когда показывается слайд bg1.jpg класс удалялся из header
Подскажите как это сделать? Пытался понять API - но что-то не получается.

Answer 1

[Big_person]

Вероятнее всего отслеживать параметр img на activeFrame и вешать обработчик fotorama.io/customize/api/#fotorama.activeFrame

Comments

[msatmb]

Антон, а можете подсказать поподробнее? тяжело дается js )))

Answer 2

[msatmb]

Антон, вы правы. все дело в activeFrame.

$(function () {
                    $('.fotorama').on(
                      'fotorama:show', function (e, fotorama) {
                        //console.log(fotorama.activeFrame.i);
                        if (fotorama.activeFrame.i > 1) {
                          $( "header" ).addClass( "white-header" );
                        } else {
                          $( "header" ).removeClass( "white-header" );
                        }
                      }
                    );
				});