I'm moving my gallery over from Flash running in an iFrame and would like to have similar resizing of an html embedded gallery where the stage is resized too.  Many years ago an excellent gent on the JAlbum forum helped me with the iFrame resizing code, but I have no idea how to adapt it for an embedded gallery.

Here is how my original Flash site works : http://www.grantsymon.com/e/ritz.html 

As you can see it works incredibly well.  Resizing is awesomely fast and also takes into account both landscape and portrait images, no matter which is active when resizing is performed.  This would appear to be a bug in Juicebox, because it doesn't work correctly.  You have to reload the page for the gallery to then fit correctly otherwise part of an image is cut off.

Here is the same gallery using Juicebox inside the iFrame.
http://www.qr-presse.eu/e/ritz-iframe.html
As you can see the Juicebox resizing doesn't work properly.

Here is the same gallery again, this time embedded in html as recommended by JuiceBox.
http://www.qr-presse.eu/e/ritz-html-embed.html
As you can see the gallery doesn't resize at all.

Here is the code that makes the iFrame resize.   Can it be adapted to work with an html embedded Juicebox gallery? :

# <script language="JavaScript" type="text/JavaScript">
# window.onload = frameLoad;
# window.onresize = frameResize;
#
# var albumPath = "http://www.grantsymon.com/JBx/Ritz/";
# var albumID = "JBox";
# var heightPadding = 110;
# var widthPadding = 200;
#
# function frameLoad(){
#   getSizes();
#   windowHeight = windowHeight-heightPadding;
#   windowWidth = windowWidth-widthPadding;
#   var albumFrame = document.getElementById(albumID);
#   albumFrame.height = windowHeight + "px";
#   albumFrame.width = windowWidth + "px";
#   albumFrame.src = albumPath;
# }
#
# function frameResize(){
#   getSizes();
#   windowHeight = windowHeight-heightPadding;
#   windowWidth = windowWidth-widthPadding;
#   var albumFrame = document.getElementById(albumID);
#   albumFrame.height = windowHeight + "px";
#   albumFrame.width = windowWidth + "px";
# }
#
# function getSizes(){
#   var totalHeight;
#   if (self.innerHeight)
#     windowHeight = self.innerHeight;
#   else if (document.documentElement && document.documentElement.clientHeight)
#     windowHeight = document.documentElement.clientHeight;
#   else if (document.body)
#     windowHeight = document.body.clientHeight;
#   var totalWidth;
#   if (self.innerWidth)
#     windowWidth = self.innerWidth;
#   else if (document.documentElement && document.documentElement.clientWidth)
#     windowWidth = document.documentElement.clientWidth;
#   else if (document.body)
#     windowWidth = document.body.clientWidth;
# }
# </script>