1 Topic by bronts (edited by bronts 2014-02-23 19:44:48)

  • From: Australia
  • Registered: 2014-02-23
  • Posts: 2

Topic: Help needed with tabbed multiple galleries

Hi,

I am new to html etc and have just recently bought the pro juicebox version.

I have been trying to embed 2 galleries with a top menu into a section of a website.
I need them to be similar to your demo version here: http://www.juicebox.net/demos/support/r … /gallery1/ but I can not have anything header/footer as I need to slot the gallery in between other sections within the site.

I have made 2 folders for each gallery, one called "1" and the other "2".

I have spent quite some time trying to figure this out.  I have copied and edited the code for the above demo and have read through this forum to see if there was an answer before posting this request.

May someone please advise of the correct code I need to place in the site - thank you.

Regards,

Brontè

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

Re: Help needed with tabbed multiple galleries

The Embedding Multiple Galleries examples rely on duplicating a template page for each gallery (and embedding a different gallery on each page).

An alternative solution would be to embed each gallery on demand within a single web page.
Try the following.
Create two galleries and name the gallery folders 'gallery1' and 'gallery2'.
Create a HTML file with the code below, put the file in the same directory as your two gallery folders and open it in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {            
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;        
                height: 50px;
                padding-top: 10px;
                text-align: center;
                width: 100%;
            }
            #header a {
                color: #666666;
                text-decoration: none;
            }
            #wrap {
                width: 100%;
            }    
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">

            // Function to resize gallery
            function doLayout() {
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                var headerHeight = $('#header').outerHeight();
                var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
                $('#wrap').height(galleryHeight);
            }

            // Function to load selected gallery on demand using baseUrl
            function loadGallery(base) {
                new juicebox({
                    containerId: 'juicebox-container',
                    baseUrl: base
                });
            }

            // Run following code when page is initially loaded
            $(document).ready(function () {

                 // Run function to resize gallery
                doLayout();

                // Ensure function to resize gallery is run when browser window size changes
                $(window).bind('resize', doLayout);

                // Run function to load Gallery #1
                loadGallery('gallery1/');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="header">
            <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
            <span>&nbsp;</span>
            <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

You could hopefully adapt the code above to work within your own scenario.
You could add as many galleries as you like and replace the header container with your own top menu.

  • From: Australia
  • Registered: 2014-02-23
  • Posts: 2

Re: Help needed with tabbed multiple galleries

Hi Steven,

Thank you for your prompt response. It is very much appreciated.

This is the site I am attempting to make/edit...
http://www.ttssecrets.com/Mochito/
If you go to the gallery section you will see where I need to place the juicebox galleries.

As I am not fully understanding what you have suggested, is what I am asking possible to do?

Thanks,
Brontè

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

Re: Help needed with tabbed multiple galleries

In the <head> section of your web page, add the following code:

<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">

    // Function to resize gallery
    function doLayout() {
        var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
        var headerHeight = $('#header').outerHeight();
        var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
        $('#wrap').height(galleryHeight);
    }

    // Function to load selected gallery on demand using baseUrl
    function loadGallery(base) {
        new juicebox({
            containerId: 'juicebox-container',
            baseUrl: base
        });
    }

    // Run following code when page is initially loaded
    $(document).ready(function () {

         // Run function to resize gallery
        doLayout();

        // Ensure function to resize gallery is run when browser window size changes
        $(window).bind('resize', doLayout);

        // Run function to load Gallery #1
        loadGallery('gallery1/');
    });
</script>

In your 'Gallery' container in the <body> section of your web page (where you want the Juicebox gallery to appear), add the following code:

<div id="juicebox-container"></div>

Now, each link to a gallery on your web page will look something like this (although you could change the text for an image or a button instead).

<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>