Topic: Embedding issue from an external page
Hello, I've recently purchased juicebox pro and so far It's been a nightmare to setup since I'm a newby at html stuff.
I've got the individual galleries to work just fine, however, I would like to add both galleries to one single page to load individually.
Here's the link to the gallery page that I've been trying to setup
http://albertaoverheadcrane.com/gallery/gallery.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<h2>URSG</h2>
<!--1st Gallery Embed-->
<script src="gallery/URSG/jbcore/juicebox.js"></script>
<script type="text/javascript">
new juicebox({
containerId:'jb-container1',
baseURL: 'gallery/URSG/',
galleryWidth:'800',
galleryHeight:'400',
backgroundColor: 'rgba(255,0,0,.7)'
});
</script>
<div id="jb-container1"></div>
<!-- END 1st Gallery Embed -->
<h2>TRSG</h2>
<!--2nd Gallery Embed-->
<script type="text/javascript">
new juicebox({
containerId:'jb-container2',
baseURL: 'gallery/TRSG/',
galleryWidth:'800',
galleryHeight:'400',
backgroundColor: 'rgba(0,255,0,.7)'
});
</script>
<div id="jb-container2"></div>
<!-- END 2nd Gallery Embed -->
</div>
<body>
</body>
</html>And here are individual galleries that have been working just fine
http://albertaoverheadcrane.com/gallery/URSG/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>URSG Cranes</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="URSG Cranes" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<!-- END OPEN GRAPH TAGS-->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'jb-container1',
galleryWidth: '70%',
galleryHeight: '40%',
backgroundColor: '#222222'
});
</script>
<div id="jb-container1">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>URSG Cranes</h1>
<p></p>
<p><img src="images/1.jpg" title="1" alt="" /><br>1 </p>
<p><img src="images/2.jpg" title="2" alt="" /><br>2 </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>and
http://albertaoverheadcrane.com/gallery/TRSG/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>TRSG</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="TRSG" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<!-- END OPEN GRAPH TAGS-->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'jb-container2',
galleryWidth: '70%',
galleryHeight: '40%',
backgroundColor: '#222222'
});
</script>
<div id="jb-container2">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>TRSG</h1>
<p></p>
<p><img src="images/1.jpg" title="1" alt="" /><br>1 </p>
<p><img src="images/2.jpg" title="2" alt="" /><br>2 </p>
<p><img src="images/3.jpg" title="3" alt="" /><br>3 </p>
<p><img src="images/4.jpg" title="4" alt="" /><br>4 </p>
<p><img src="images/5.jpg" title="5" alt="" /><br>5 </p>
<p><img src="images/6.jpg" title="6" alt="" /><br>6 </p>
<p><img src="images/7.jpg" title="7" alt="" /><br>7 </p>
<p><img src="images/8.jpg" title="8" alt="" /><br>8 </p>
<p><img src="images/9.jpg" title="9" alt="" /><br>9 </p>
<p><img src="images/10.jpg" title="10" alt="" /><br>10 </p>
<p><img src="images/11.jpg" title="11" alt="" /><br>11 </p>
<p><img src="images/12.jpg" title="12" alt="" /><br>12 </p>
<p><img src="images/13.jpg" title="13" alt="" /><br>13 </p>
<p><img src="images/14.jpg" title="14" alt="" /><br>14 </p>
<p><img src="images/15.jpg" title="15" alt="" /><br>15 </p>
<p><img src="images/16.jpg" title="16" alt="" /><br>16 </p>
<p><img src="images/17.jpg" title="17" alt="" /><br>17 </p>
<p><img src="images/18.jpg" title="18" alt="" /><br>18 </p>
<p><img src="images/19.jpg" title="19" alt="" /><br>19 </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>For some reason the gallery.html page would not load scripts from the /URSG/ nor /TRSG/ folders. I wonder what would be the issue here.
Any sort of help I would greatly appreciate.