Добавьте панель управления проигрывателем DIv в нижнюю часть Fotorama Player.

Для одного из моих проектов я переключаюсь с Galleria на Fotorama.io, чтобы показать презентацию. В основном я показываю слайды, экспортированные из программного обеспечения для презентаций.

Пока что Fotorama выглядит великолепно, и миниатюры предлагают хороший способ навигации по различным слайдам, но я пытаюсь добавить дополнительную панель навигации/управления с полезными кнопками для перехода к первому изображению, предыдущему, следующему и последнему изображению, а также отображение индикатора выполнения и номера слайда.

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

Что мне нужно, так это просто сохранить плеер со 100% шириной, но вместо 100% высоты (потому что этот плеер будет встроен в другие страницы) мне нужно поместить небольшой горизонтальный div внизу (скажем, 40 пикселей), чтобы добавить элемент управления бар. Вот пример, показывающий панель управления DIV, которую я хочу добавить.

введите здесь описание изображения

Глядя на сгенерированный исходный код, у меня сложилось впечатление, что его следует добавить ниже div fotorama__nav-wrap.

Любые идеи, как действовать?


jquery fotorama
person julianm    schedule 25.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поместите панель управления под фоторамой:

<div class="fotorama" data-auto="false">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

<div class="fotorama-control"></div>


Инициализируйте fotorama и добавьте .fotorama-control после .fotorama__nav:

$('.fotorama')
  // Initialize
  .fotorama()
  .each(function () {
    // Append the .fotorama-control to the fotorama
    $('.fotorama__nav', this).after(
      $(this)
        .next('.fotorama-control')
        .show()
    );
  });


Добавить стили:

.fotorama__nav {
  /* Lie to the fotorama about nav height to reserve space for your controls */
  /* thumbheight + thumbmargin * 2 + controlheight = 64 + 2 * 2 + 40 = 108 */
  height: 108px;
}
.fotorama__nav:after,
.fotorama__nav:before {
  /* Restore shadows height */
  /* controlheight */
  bottom: 40px;
}
.fotorama-control {
  /* controlheight */
  height: 40px;
  /* -controlheight */
  margin-top: -40px;
  position: relative;
  z-index: 10;
  display: none;
  background-color: red; /* just for debugging */
}


Скрипт: http://jsfiddle.net/MkH4S/2/embedded/result,html,css,js/

person Art    schedule 26.03.2014