Edit in JSFiddle

<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://fotorama.s3.amazonaws.com/i/nyc/">
    
<!-- Fotorama -->
<div class="fotorama"
     data-auto="false"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%"
     data-allowfullscreen="true"
     data-nav="thumbs">
    <img src="streetlook.jpg" />
    <img src="acapella.jpg" />
    <img src="freakout.jpg" />
    <img src="eyes.jpg" />
    <img src="lift-dude.jpg" />
</div>
    
<div class="fotorama-control"></div>

<!-- © -->    
<p>Photos <a href="http://alexeilebedev.com/">by Alexei Lebedev</a></p>

body {
    margin: 10px;
}

.fotorama__nav {
    /* thumbheight + thumbmargin * 2 + controlheight = 64 + 2 * 2 + 40 = 108 */
    height: 108px;
}
.fotorama__nav:after,
.fotorama__nav:before {
    bottom: 40px;
}
.fotorama-control {
    height: 40px;
    margin-top: -40px;
    position: relative;
    z-index: 10;
    display: none;
    background-color: red; /* just for debugging */
}

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