My suggestion is possibly the easiest solution to your problem and it would be worth persevering to get it to work within your web page.
It relies on listening for a change in the browser window size and then assigning new width and height dimensions to the gallery, based on the current width of the browser window.
You want your gallery's width to always fill the width of its parent container so you can set the gallery's width to 100% in the embedding code (and you do not need to worry about the gallery's width in the dynamic resizing code).
You need to be able to change the gallery's height when the user changes the browser window's width so do the following:
(1) Give the table into which you embed your gallery an id="wrap" (so that you can change its dimensions using JavaScript).
(2) Your images have an aspect ratio of approximately 2.6:1 (and there are no other elements within your gallery) so use this factor when working out the gallery's height in relation to its width.
Try using the following as your 'index.html' page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/page.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Home - Regional Development Australia Great Southern</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
background-color: #fafafc;
background-image: url(image/bg.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link href="CSS/Level2_Verdana_Text.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
<!--
a:link {
color: #327027;
font-weight: 400;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #B1C444;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var galleryWidth = $('#wrap').width();
var galleryHeight = parseInt(galleryWidth / 2.6);
$('#wrap').height(galleryHeight);
}
$(document).ready(function() {
doLayout();
$(window).on('resize', doLayout);
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
backgroundColor: 'rgba(255,255,255,1)'
});
});
</script>
</head>
<body onload="MM_preloadImages('image/menu/home-over.jpg','image/menu/reports-over.jpg','image/menu/current-over.jpg','image/menu/pub-over.jpg','image/menu/contact-over.jpg','image/menu/news-over.jpg','image/menu/region-over.jpg','image/menu/grants-over.jpg','image/menu/about-rda-over.jpg','image/menu/r-plan-over.jpg')">
<table width="82%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="box1">
<tr>
<td height="42" align="center" valign="top" bgcolor="#FFFFFF"><table width="100%%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!-- InstanceBeginEditable name="EditRegion5" -->
<table id="wrap" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--START JUICEBOX EMBED-->
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</td>
</tr>
</table>
<!-- InstanceEndEditable --></td>
</tr>
<tr>
<td height="36" background="image/menu/menu-bg.jpg"><table width="100%%" height="34" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="14%" align="center" valign="middle" background="image/menu/menu-bg.jpg"><a href="index.html"><img src="image/menu/home.jpg" alt="Home" name="home" width="135" height="34" border="0" id="home" onmouseover="MM_swapImage('home','','image/menu/home-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </td>
<td width="14%" align="center" valign="middle" background="image/menu/menu-bg.jpg"> <a href="reports_research.html"><img src="image/menu/reports.jpg" alt="Reports & Research" name="rep" width="283" height="34" border="0" id="rep" onmouseover="MM_swapImage('rep','','image/menu/reports-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </td>
<td width="14%" align="center" valign="middle" background="image/menu/menu-bg.jpg"> <a href="current_projects.html"><img src="image/menu/current.jpg" alt="Current Projects" name="current" width="256" height="34" border="0" id="current" onmouseover="MM_swapImage('current','','image/menu/current-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </td>
<td width="14%" align="center" valign="middle" background="image/menu/menu-bg.jpg"> <a href="publications.html"><img src="image/menu/pub.jpg" alt="Publications" name="pub" width="213" height="34" border="0" id="pub" onmouseover="MM_swapImage('pub','','image/menu/pub-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </td>
<td width="14%" align="center" valign="middle" background="image/menu/menu-bg.jpg"><a href="contact.html"><img src="image/menu/contact.jpg" alt="Contact" name="con" width="159" height="34" border="0" id="con" onmouseover="MM_swapImage('con','','image/menu/contact-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="95%" border="0" align="center" cellpadding="0" cellspacing="7">
<tr>
<td align="left" valign="top"><!-- InstanceBeginEditable name="EditRegion4" --><span class="big">Regional Development Australia Great Southern WA Inc</span><!-- InstanceEndEditable --><br />
<!-- InstanceBeginEditable name="EditRegion3" -->
<p class="bodystyle">Regional Development Australia (RDA) is an initiative of the Australian Government that aims to enhance the growth and development of regional areas by bringing together and working with the three levels of government to provide a strategic and targeted response to issues in regional areas. The Network is led by the Hon Warren Truss MP as the Minister for Infrastructure and Regional Development.</p>
<table width="100%%" border="0" cellspacing="9" cellpadding="0">
<tr>
<td width="25%" align="center" valign="middle"><a href="news.html"><img src="image/menu/news.jpg" alt="News" name="n" width="265" height="269" border="0" id="n" onmouseover="MM_swapImage('n','','image/menu/news-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="25%" align="center" valign="middle"><a href="our_region.html"><img src="image/menu/region.jpg" alt="Our Region" name="r" width="260" height="269" border="0" id="r" onmouseover="MM_swapImage('r','','image/menu/region-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="25%" align="center" valign="middle"><a href="grants_funding.html"><img src="image/menu/grants.jpg" alt="Grants & Funding" name="g" width="263" height="269" border="0" id="g" onmouseover="MM_swapImage('g','','image/menu/grants-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="15%" rowspan="2"><iframe class="tkf-em-cal" scrolling="no" width="300" height="518px" frameborder="0" style="border-width:0;background-color:transparent" src="https://tockify.com/em/rdags"><a href="https://tockify.com/rdags">RDA Great Southern Events Calendar</a></iframe></td>
</tr>
<tr align="center" valign="middle">
<td width="25%"><a href="about-rdags.html"><img src="image/menu/about-rda.jpg" alt="About RDA Great Southern" name="a" width="264" height="266" border="0" id="a" onmouseover="MM_swapImage('a','','image/menu/about-rda-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="25%"><a href="regional_plan.html"><img src="image/menu/r-plan.jpg" alt="Regional Plan 2013-2018" name="rp" width="260" height="266" border="0" id="rp" onmouseover="MM_swapImage('rp','','image/menu/r-plan-over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="25%"><img src="image/menu/growing.jpg" alt="RDA Great Southern" name="rdags" width="263" height="266" id="rdags" /></td>
</tr>
</table>
<p class="bodystyle"> </p>
<p> </p>
<!-- InstanceEndEditable --></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="84"><img src="image/bottom.png" width="100%" height="84" /></td>
</tr>
</table></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
Please note that I have not checked your web page for any HTML errors. You can do this with the W3C Markup Validation Service. All I have done is copy and paste your code and add/modify what is required to get the Juicebox sizing working (by inserting the <script> section at the end of the <head> section and changing the contents of the <table> into which you embed your gallery and giving it an 'id').
I have tested it and it seems to work OK.
