• Registered: 2013-08-08
  • Posts: 3

Topic: Multiple galleries - first image does not display

I am trying to embed multiple galleries on a single page. I have created each gallery individually and it works fine. I have tried to embed them on the same page using JavaScript and also jQuery with s selection menu on top and seem to have the same issue- when the first gallery (default) loads the first image is displayed, but when I select any of the other galleries the first Mage is not displayed. All thumbnails and overlays are present and visible. Any ideas?

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

Re: Multiple galleries - first image does not display

First of all, please check that you are using the most recent version of Juicebox-Pro (v1.3.2) to ensure that any bugs that were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, please see the Upgrading Juicebox page for details.

Also, you can check the validity of your web page's code with the W3C Markup Validation Service and fix any HTML errors reported.

Do the first images in the galleries display if you select different images in the gallery and then go back?
If not, then double-check the paths to the first images in each gallery and make sure that the images themselves have been uploaded to the correct locations on your web server.

If the suggestions above do not help, please post the URL to your web page so that I can take a look.

  • Registered: 2013-08-08
  • Posts: 3

Re: Multiple galleries - first image does not display

Hi Steven,

Thanks for your reply.

I am using V1.3.2 which I recently re-installed on a fresh windows 7 install. Also checked the webpage on the W3C tool and it "passed".

To answer your question, yes, once you click on any thumbnail the image will appear and then the last image selected will be shown as you move away and back from that gallery.

The URL is: http://shiloz.photobookcreations.com.au … ample.html

Please note that the 2nd gallery has "autoplay" enabled so it sort of bypasses the issue but it's not what I am trying to do.

I am suspecting and it's something small and stupid that I have done but I cannot see it for the life of me.

Thanks for your help in advance.

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

Re: Multiple galleries - first image does not display

Loading each gallery when each new tab is selected should work fine.
Try the following as your 'sample.html' file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Tabs - Default functionality</title>
    <link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css" />
    <link rel="stylesheet" href="css/peracon_main.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="preceremony/jbcore/juicebox.js"></script>
    <script>
        $(function() {
            /* $("#tabs").tabs(); */
            $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        });
        function loadGallery(container, base) {
            new juicebox({
                containerId : container,
                baseUrl : base,
                galleryWidth: "760",
                galleryHeight: "380",
                backgroundColor: "rgba(255,255,255,1)"
            });
        }
        $(document).ready(function() {
            loadGallery('juicebox-container1', 'preceremony/');
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" onclick="javascript: loadGallery('juicebox-container1', 'preceremony/'); return true;">Preceremony</a></li>
            <li><a href="#tabs-2" onclick="javascript: loadGallery('juicebox-container2', 'ceremony/'); return true;">Ceremony</a></li>
            <li><a href="#tabs-3" onclick="javascript: loadGallery('juicebox-container3', 'locations/'); return true;">Locations</a></li>
            <li><a href="#tabs-4" onclick="javascript: loadGallery('juicebox-container4', 'reception/'); return true;">Reception</a></li>
        </ul>
        <div id="tabs-1">
            <br />
            <div id="juicebox-container1"></div>
        </div>
        <div id="tabs-2">
            <br />
            <div id="juicebox-container2"></div>
        </div>
        <div id="tabs-3">
            <br />
            <div id="juicebox-container3"></div>
        </div>
        <div id="tabs-4">
            <br />
            <div id="juicebox-container4"></div>
        </div>
    </div>
</body>
</html>
  • Registered: 2013-08-08
  • Posts: 3

Re: Multiple galleries - first image does not display

Thank you so much - I tried it and it's all good!