• Registered: 2013-04-07
  • Posts: 3

Topic: Multiple galleries in same page...same div?

Hello - first off, I'm a web design novice, but have figured out how to created galleries using Juicebox on Lightroom 4.  I can even add them to my webpage using Dreamweaver CS6.  But, when I add a gallery and a have link to it, the gallery opens in a new page.  What I want to do is have the gallery open on the same page (I have seen and read the instructions for using BaseUrl or iFrame), BUT, here's the part I really want...I want multiple galleries to open on the same page (not one under the other, but when someone clicks a menu link, it opens the 2nd gallery in place of the first one). 

To make sure I explained it correctly, let's say I have a webpage with a menu on the left side that lists three links for galleries: animals, buildings and travel.  When 'animals' is clicked, I want the animal gallery to show on the right side of the web page (and still have the menu on the left) and then when 'buildings' is clicked, I want the buildings gallery to open in the same the spot the 'animals' gallery was.  Then when 'travel' is clicked, the travel gallery opens on that same page, in place of the 'buildings' gallery.

I hope that makes sense.  I really like Juicebox and hope I can get it to fit my needs (using Lite for now to test it out).

Thanks!!

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Multiple galleries in same page...same div?

This is certainly possible.
Take a look at the View Resizable Gallery with Top Menu Example in the Embedding Multiple Galleries section of the Embedding Guide.
If you view the source of the web page in your browser, you should hopefully see how the example works.
You can then copy and modify the code to suit your needs.

An automated solution would be to create a multiple-gallery album using jAlbum and the Juicebox skin.
When using jAlbum and the Juicebox skin, you can drag and drop a complete folder structure into jAlbum's main window and click 'Make Album'.
The resulting album will have a separate Juicebox gallery for each and every folder/subfolder in your input structure and all the galleries will be linked together via a JavaScript navigation tree (displayed on the left of the screen). On clicking a link for a gallery, the current gallery is replaced with the newly selected one.
Here is a sample album created by jAlbum and the Juicebox Skin.

  • Registered: 2013-04-07
  • Posts: 3

Re: Multiple galleries in same page...same div?

Thanks, Steven!  Well, I've spent some time working on this and am almost there.  But, I've run into a couple more problems:

1) the gallery is cut off at the bottom (the bottom of the thumbnails are cutoff, even if I physically resize the browser).  What I'm ultimately trying to achieve is the Resizeable Gallery with Side Menu (like the example on the Juicebox embedding guide), but add a header and footer to the page. Here's what I've got so far.  There are only 2 working galleries on it right now: http://www.bryanballewphoto.com/photos/ … rtest.html

2) the 'hide thumbnails, 'open image in new window' and 'expand gallery' icons are missing (but the black box appears on the upper right of the image and if I hover the mouse it, the name appears and they function...just the icons are missing).

Thanks again for any advice you can provide.

-Bryan

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Multiple galleries in same page...same div?

(1) Try the following as your 'index.html' file. It uses a fixed height header and footer (which both span the entire width of the page) and a fixed width menu. The dimensions of these elements can all be changed in the CSS on the page. The gallery will always take up the remainder of the space on the page no matter what the size of the user's browser window is.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            body, html {
                height: 100%;
                overflow: hidden;
            }
            #header {
                height: 50px;
                width: 100%;
                background-color: #222222;
            }
            #footer {
                height: 50px;
                width: 100%;
                background-color: #222222;
            }
            #wrap {
                width: 100%;
            }
            #menu {
                height: 100%;
                width: 100px;
                background-color: #222222;
                float: left;
            }
            #gallery {
                height: 100%;
                float: right;
            }
        </style>
        <script src="jbcore/juicebox.js"></script>
        <script>
        function doLayout() {
            var winHeight, winWidth, headerWidth;
            winHeight = window.innerHeight ? window.innerHeight : $(window).height();
            winWidth = window.innerWidth ? window.innerWidth : $(window).width();
            headerHeight = $('#header').outerHeight();
            footerHeight = $('#footer').outerHeight();
            menuWidth = $('#menu').outerWidth();
            $('#wrap').height(parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight));
            $('#gallery').width(parseInt(winWidth) - parseInt(menuWidth));    
        }
        $(document).ready(function () {
            doLayout();
            $(window).bind('resize', doLayout);
            new juicebox({
                containerid : 'juicebox-container',
                galleryWidth: '100%',
                galleryHeight: '100%'
            });
        });        
        </script>
    </head>
    <body>
        <div id="header"></div>
        <div id="wrap">
            <div id="menu"></div>
            <div id="gallery">
                <div id="juicebox-container"></div>
            </div>
        </div>
        <div id="footer"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

(2) Try using the code above (inserting your own header, footer and menu content) and upgrade your gallery from Juicebox-Pro v1.2.0 to the latest version (v1.3.1) by following the instructions here to see if this fixes the problem.

  • Registered: 2013-04-07
  • Posts: 3

Re: Multiple galleries in same page...same div?

Thanks again, Steven!!  I appreciate you talking the time to explain things to me.  I've now gotten my website/Juicebox to work as I hoped it would.  It's a great gallery system and I'll certainly refer it to everybody that I can.

Thanks for the awesome customer support.

-Bryan