在 Fotorama Player 底部添加播放器控制栏 DIv答案

【问题标题】：Add a player control bar DIv to the bottom of Fotorama Player在 Fotorama Player 底部添加播放器控制栏 DIv
【发布时间】：2014-03-25 21:26:25
【问题描述】：

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

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

很遗憾，我找不到修改当前主题或布局的方法，因此如果有人能提出有关如何更改默认主题以在播放器底部添加额外栏的想法，我将不胜感激。

我需要的只是让播放器保持 100% 的宽度而不是 100% 的高度（因为这个播放器将嵌入到其他页面中）我需要在底部放置一个小的水平 div（比如说 40px）添加控制栏。这是一个显示我要添加的控制栏 DIV 的示例。

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

任何想法如何进行？

【问题讨论】：

标签： jquery fotorama

【解决方案1】：

将您的控制栏放在照片下方：

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

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

初始化 fotorama 并在 .fotorama__nav 之后附加 .fotorama-control：

$('.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/

【讨论】：