1 Reply by aaostars

(3 replies, posted in Juicebox-Pro Support)

I just tried moving the index html code into the new page I've created and it seems like it doesn't want to load any images.

http://albertaoverheadcrane.com/gallery1.html

Go to forum: Juicebox-Pro Support

2 Topic by aaostars

(3 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support