I purchased the pro version in the hopes that it would help me display a gallery inside of a template page.

The sample page is here:  http://mobiletest.swell-sites.com/gallery-test.html

It looks fine on a computer screen but on my iPhone the gallery doesn't function IN the page, you have to expand to the full page version.   I would really like something to work like the current version: http://www.uglydeck.com/ where you still can see the rest of the page on a mobile device around the image gallery....   Any help is greatly appreciated.  I'm going to keep playing around with it to see if I can get it figured out.

(much tinkering later)

Now I feel like I just can't get the spacing right.   What I want, on all displays, is for the picture to appear as wide as the screen / or div container, and for the thumbnails to be immediately underneath it.    I think that on a phone and an ipad I'd like the container to be 50% of the height of the total screen, and for width and height to both be 100% on a computer.

Can I plug in responsive commands to the javascript? 

for example, right now I have:

<script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container',
                galleryWidth: '100%',
                galleryHeight: '100%',
                backgroundColor: '#222222'
            });
        </script>

Could I add a line of code to change the rules based on the width of the screen and or device? 

Thanks in advance for any help.