Topic: Linking together multiple galleries

With Juicebox, you are able to create as many individual galleries as you like but if you want to link them together, you would normally need to do so manually following the online examples in the Embedding Multiple Galleries support section.

Otherwise, for an automated solution, you could use Showkase (a PHP web application) to create a complete portfolio website online, integrating as many Juicebox galleries as you like (all indexed on gallery index pages) without the need for any manual coding at all.

However, for a quick and easy way to link together a few Juicebox galleries, you might like to try this method.

(1) Create your Juicebox galleries as normal (with JuiceboxBuilder, for example) and name the gallery folders 'gallery1', 'gallery2', etc. (This naming convention is important for this method to work.)
(2) Use the code below to create an HTML file, put the file in the same directory as the gallery folders and open the HTML file in a browser.

That's it. The file will initially load the first gallery ('gallery1') and will provide links to all Juicebox galleries.
You can edit the HTML code (to change the page header, colors, etc.) in a plain text editor if you like.

This is not intended to be anything like a replacement for Showkase (which is a fully-featured website creation tool with full support for creating Juicebox-Pro galleries within its interface).
It is just a quick and easy way to display a few already-made Juicebox galleries.

I hope it helps someone!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #page {
                font-size: 30px;
            }
            #menu {
                padding: 10px 40px 0px 40px;
            }
            #footer {
                background-color: #222222;
                bottom: 0px;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                left: 0px;
                position: relative;
                text-align: center;
                width: 100%;
            }
            #wrap {
                margin: 0 auto;
                width: 80%;
            }
            .gallery {
                cursor: pointer;
            }
            .gallery.selected {
                text-decoration: underline;
            }
            span.gallery:hover {
                color: #888888;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <title></title>
    </head>
    <body>
        <div id="header">
            <div id="page"></div>
            <div id="menu"></div>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
        <div id="footer">
            <div id="description"></div>
        </div>
        <script type="text/javascript">

            // Enter Page Title here
            var page = "Multiple Galleries";

            // Initialize Juicebox object variable name
            var jb;

            // Function to process all galleries
            function doProcess(counter, gallery) {
                $.get('gallery' + counter + '/config.xml', function(data) {

                    // Build gallery folder name
                    var base = 'gallery' + counter;

                    // Create space between links
                    if (counter > 1) {
                        $('#menu').append($('<span />').html('&nbsp;&nbsp;&nbsp;'));
                    }

                    // Fetch Gallery Title from gallery XML file
                    var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';

                    // Fetch Gallery Description from gallery XML file
                    var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';

                    // Add link to Document Object Model
                    $('#menu').append($('<span />').attr('id', base).addClass('gallery').data('description', description).html(title));

                    // Initially load gallery
                    if (counter === gallery) {
                        loadGallery(base, description);
                    }
                }).done(function() {

                    // Process next gallery
                    doProcess(++counter, gallery);
                }).fail(function() {

                    // Show header and footer when all galleries have been processed
                    $('#header, #footer').css('visibility', 'visible');

                    // Layout page and resize gallery
                    doLayout();
                });
            }

            // Function to layout page and resize gallery
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
                var headerHeight = parseInt($('#header').outerHeight(true), 10);
                var footerHeight = parseInt($('#footer').outerHeight(true), 10);
                var galleryHeight = windowHeight - headerHeight - footerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
                    window.setTimeout(function() {
                        jb.setGallerySize(galleryWidth, galleryHeight);
                    }, 500);
                }
            }

            // Function to load gallery, underline selected link and display Gallery Description in page footer
            function loadGallery(base, description) {

                // Load gallery
                jb = new juicebox({
                    backgroundColor: "#222222",
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "100%",
                    galleryWidth: "100%"
                });

                // Style selected link
                $('.gallery').removeClass('selected');
                $('#' + base).addClass('selected');

                // Display Gallery Description in page footer
                $('#description').css('padding', description ? '10px 40px' : '0px').html(description);
            }

            // Display Page Title in browser tab
            document.title = page;

            // Check if jQuery is loaded
            if (typeof jQuery === 'undefined') {

                // Display Page Title in page header
                document.getElementById('page').innerHTML = page;

                // Display message if no galleries found
                document.getElementById('menu').innerHTML = '<span>No galleries found.</span>';
            } else {

                // Run following when Document Object Model is complete
                $(document).ready(function() {

                    // Register resize handler to run doLayout function when browser window is resized
                    $(window).resize(doLayout);

                    // Register click handler to run loadGallery and doLayout functions when link is clicked
                    $('#menu').on('click', '.gallery', function() {
                        var base = $(this).attr('id');
                        var description = $(this).data('description');
                        loadGallery(base, description);
                        doLayout();
                    });

                    // Display Page Title in page header
                    $('#page').html(page);

                    // Hide header and footer until all galleries have been processed
                    $('#header, #footer').css('visibility', 'hidden');

                    // Fetch gallery id from query string
                    var gallery = 1;
                    var term = 'gallery';
                    if (window.location.search) {
                        var queryArray = {};
                        var queryComponent;
                        var queryString = unescape(window.location.search);
                        var re = new RegExp('([^?=&]+)(?:=([^&]*))?', 'g');
                        while (queryComponent = re.exec(queryString)) {
                            queryArray[queryComponent[1]] = queryComponent[2];
                        }
                        var queryInteger = parseInt(queryArray[term], 10);
                        if (!isNaN(queryInteger)) {
                            gallery = Math.abs(queryInteger);
                        }
                    }

                    // Process all galleries
                    doProcess(1, gallery);
                });
            }
        </script>
    </body>
</html>