Add a player control bar DIv to the bottom of Fotorama Player

Question

For one of my projects I am switching from Galleria to Fotorama.io in order to display a presentation. Basically I show slides that are exported from a presentation software.

Fotorama looks great so far, and the thumbnails offer a good way to navigate across the different slides but I am trying to add an additional navigation/control bar with useful buttons to move to the first image, previous, next and last image as well as displaying a progress bar and slide number.

Unfortunately I could not find a way to modify the current theme or layout, so I will appreciate if someone can suggest ideas on how to change the default theme to add an additional bar to the bottom of the player.

What I need is just to keep the player with 100% width but instead of 100% height (because this player will be embedded in other pages) I need to put a small horizontal div at the bottom (let's say 40px) to add the control bar. Here is an example showing the control bar DIV I want to add.

Looking the generated source code I am under the impression that it should be added below fotorama__nav-wrap div.

Any ideas how to proceed?

Answer 1

Put your control bar under the fotorama:

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

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

Initialize fotorama and append .fotorama-control after .fotorama__nav:

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

Add styles:

.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 */
}

Fiddle: http://jsfiddle.net/MkH4S/2/embedded/result,html,css,js/