• Registered: 2014-08-11
  • Posts: 2

Topic: Can Juicebox-lite handle multiple galleries switch using Javascript?

Hello;

I tried all day to make a multiple gallery on one website using Javascript switch - like on this example page: http://juicebox.net/demos/support/multi … witch.html Unfortunately I can't do it, only the first gallery is active and the switch is not working. Do I make something wrong or is this sollution possible only with PRO version?

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

Re: Can Juicebox-lite handle multiple galleries switch using Javascript?

This solution works equally well with both Juicebox-Lite (the free version and Juicebox-Pro).
Try the following:
(1) Create two galleries and save them in folders named 'gallery1' and 'gallery2'.
(2) Upload the two complete gallery folders (not just the contents) to the root directory of your web space (usually into a directory named 'public_html' or 'htdocs').
(3) Create an HTML web page using the following code, upload it to any location on your web server and open it in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <script type="text/javascript" src="/gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function loadGallery(base) {
                new juicebox({
                    baseUrl: base,
                    containerId: "juicebox-container",
                    galleryHeight: "400",
                    galleryWidth: "600"
                });
            }
            $(document).ready(function() {
                $('.gallery').click(function() {
                    var base = '/' + jQuery(this).attr('id') + '/';
                    loadGallery(base);
                });
                loadGallery('/gallery1/');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="links">
            <input id="gallery1" class="gallery" type="button" value="Gallery 1" />
            <span>&nbsp;</span>
            <input id="gallery2" class="gallery" type="button" value="Gallery 2" />
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

I've tried to keep the code as basic as possible so that you can see what is going on.
You can change the HTML buttons for text or images if you like, as long as you give each link a class="gallery" attribute and and id with the name of the corresponding gallery folder.
For each additional gallery, all you would do is upload a new gallery folder to the root of your web space and add a line of code such as:

<input id="gallery_folder_name" class="gallery" type="button" value="text_for_button" />
  • Registered: 2014-08-11
  • Posts: 2

Re: Can Juicebox-lite handle multiple galleries switch using Javascript?

Thank you very much for your answer, Steven! I was so tired trying that i've allready used multiple html pages with one gallery each, but i will try to use your sollution. Thanks!