将播放器控制栏DIv添加到Fotorama Player的底部

Question

对于我的一个项目，我将从Galleria切换到Fotorama.io以显示演示文稿。基本上我会显示从演示文稿软件导出的幻灯片。

到目前为止，Fotorama看起来很棒，缩略图提供了一种在不同幻灯片中导航的好方法，但我试图添加一个带有用按钮的附加导航/控制栏，以移动到第一个图像，上一个，下一个和最后一个图像以及显示进度条和幻灯片编号。

不幸的是我无法找到修改当前主题或布局的方法，所以如果有人可以就如何更改默认主题以在播放器底部添加额外的栏目提出建议，我将不胜感激。

我需要的是让玩家保持100％的宽度而不是100％的高度（因为这个玩家将嵌入其他页面）我需要在底部放一个小的水平div（让我们来看看）说40px）添加控制栏。这是一个显示我想要添加的控制栏DIV的示例。

查看生成的源代码我的印象是它应该添加到fotorama__nav-wrap div下面。

任何想法如何进行？

Answer 1

将控制栏放在照片下：

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

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

初始化照片并在.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/