Embed a Juicebox-Pro Gallery in a Dreamweaver fluid layout (thanks to Steven Speirs)...

The Idea:
To embed an introductory slideshow in a fully responsive web page.

The Context:
A fully responsive layout (adjusts automatically to any browser window size, from smartphone to tablet to large desktop monitor) that includes an autoplay slideshow as part of the page. The page includes a header and footer, text boxes, navigation areas, etc. The slideshow extends full-width across the page, beneath the header and a navigation bar.

The Solution, with thanks to Steven Speirs:
The original page is created as a fluid layout using standard Dreamweaver CS6 tools. Dreamweaver’s default widths for smartphone, tablet, and monitor screens are used; this means a maximum width (on a monitor) of 1232 pixels. The original page includes a large (full-width) image. The following instructions replace that image with the Juicebox-Pro slideshow.

The original image code (for a single photo beneath the navigation bar):

<div id="photo"><img src="images/anyphoto.jpg"></div>

The Juicebox-Pro gallery is created without any captions, titles, or buttons, etc. -- nothing but the gallery’s photos themselves, with auto play enabled on load, looping enabled, image click mode set to “none.” The photos are 1232 pixels wide so they will occupy the full width of the Dreamweaver page.

The gallery folder (“Slides”) is placed inside the site folder; the gallery’s index page is renamed “slideshow.html”

In place of the original image code (above), the following HTML code is substituted:

<script src="Slides/jbcore/juicebox.js"></script>
<script>
    function doLayout() {
        var elements = document.getElementsByClassName("gridContainer");
        var galleryWidth = $(elements[0]).width();
        var galleryHeight = parseInt(galleryWidth / 2);
        $('#photo').width(galleryWidth);
        $('#photo').height(galleryHeight);
    }
    $(document).ready(function () {
        doLayout();
        $(window).on('resize', doLayout);
        new juicebox({
            baseUrl: 'Slides/',
            containerId: 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '100%',
            backgroundColor: 'rgba(255,255,255,0)'
        });
    });
</script>
<div id="photo">
<div id="juicebox-container"></div>
</div>

In this example the background color is white and the photos measure 1232 x 616 pixels, with an aspect ratio of 2:1, corresponding to the (gallery width / 2). A different ratio can be specified, of course.

The Result:
A fluid layout that is responsive for any size of browser window. The pages are always centered in the window and all elements retain their proportionate relationships to one another as the browser window is made larger or smaller both horizontally and vertically.

To see a live example, go to http://www.dgiphotography.com