fotorama resize issue

fotorama resize issue

I've set up a responsive Fotorama page with several different Fotorama divs. Idealy i would like the Fotorama pane to display a different size for iPads portrait / landscape modes and for desktop I'd like it to scale according to the users browser window size.

Using the responsive data-width, data-height styles as shown below works more or less perfectly:
<div id="fotos1" class="fotorama"
    data-width="100%"
    data-ratio="1000/640">
<img src="img/sA1a.jpg">
<img src="img/sA1b.jpg">
<img src="img/sA1c.jpg">
<img src="img/sA1d.jpg">
 </div>

<div id="fotosB1" class="fotorama"
data-width="100%"
data-ratio="1000/640">
<img src="img/sB1a.jpg">
<img src="img/sB1b.jpg">
 </div>

I will eventually have several more divs (#fotos2, #fotos3, #fotos4, etc...up to 50 more ) all will be exactly the same size.

but before proceeding I need to figure why when (using a jquery button div) I click to hide one div (#fotos1) and show the next div (#fotosB1) it comes up as a small square NOT scaled up to the data-size). Only if I resize(drag) my browser window does it snap to rescale to the full size. Do I need to somehow add the data-width/height function on each button that opens the new fotorama div? And if so how?

I have additional css for the divs that looks like this:
#fotos1, #fotosB1 {
position: fixed;
width: 75%;
top: 137px;
left: 21%;
border-radius: 4px;
}

I also have a script up top that maybe is helping or maybe causing issues:
    $(document).ready(function() {
       $(window).bind("load resize", function(){
       _winHeight = $(window).height();
        $('.fotorama').css({'height':_winHeight * 1});%
  });

I can show you the page I've set up but would have to explain how to get to the correct divs to click on to see results.

any suggestions as to what to change/rewrite? Something to do with fotorama.resize();  maybe?