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/