• Registered: 2013-09-17
  • Posts: 3

Topic: Resizing problem with galleries in separate tabs

Hi,
I'm having trouble with embedding galleries in the tabs of a page. I'm fairly new to JuiceBox and html5/javascript so I apologize if I'm missing something simple.
I've created 4 galleries and put them each on a separate tab within the same page.
The first tab loads correctly, but if you click on another tab the image and thumbs will only be 100px wide. If you resize the browser window it will snap to the correct width.

If you dig down into the HTML you'll see that on tabs other than the one which was initially active the "jb-panel-detail jb-classifier-detail-area jb-classifier-layer" and "jb-panel-index jb-classifier-thumb-area" both have widths of 100px, the correct tab(the initially active tab) shows a larger number, also in px (930px for example).

It happens with FF, Safari and Chrome (only tried on mac).

You can see the problem here(a work in progress):
http://swidesigns.com/newsite/Portfolio.html

I'm using version 1.3.2 which I believe is the latest.
thanks,
steve

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

Re: Resizing problem with galleries in separate tabs

When each tab is selected, try redefining the dimensions of each gallery using the setGallerySize() Juicebox-Pro API method.

Otherwise, rather than loading all the galleries at once when the page is initially loaded, you might light to try loading the galleries on demand using a technique such as the following. This should be fairly easy to implement as the tabs on your page are used solely to select which gallery to display.

Here is a basic example.
First, create two galleries (named 'gallery1' and 'gallery2') and keep the galleries in their individual folders.
Now use the following code as an HTML page and place it in the same directory as the two gallery folders.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Multiple Galleries</title>
    <script src="gallery1/jbcore/juicebox.js"></script>
    <script>
        function loadGallery(base) {
            new juicebox({
                containerId : 'juicebox-container',
                baseUrl : base,
                galleryWidth: "600",
                galleryHeight: "400",
                backgroundColor: "rgba(255,255,255,1)"
            });
        }
        $(document).ready(function() {
            loadGallery('gallery1/');
        });
    </script>
</head>
<body>
    <div id="juicebox-container"></div>
    <div id="links">
        <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a><br />
        <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
    </div>
</body>
</html>

When the user clicks on a link, the loadGallery() JavaScript function will fire and the selected gallery will be displayed in the 'juicebox-container' div on the page.
The only parameter in the loadGallery() function (e.g. the 'gallery1/' in loadGallery('gallery1/');) is the baseUrl of the selected gallery.
I hope this example helps. It should be fairly straightforward to follow and adapt to your own needs.

  • Registered: 2013-09-17
  • Posts: 3

Re: Resizing problem with galleries in separate tabs

Thanks, I'll give this a try tonight!

  • Registered: 2013-09-17
  • Posts: 3

Re: Resizing problem with galleries in separate tabs

That worked great, I'm impressed with the quick and detailed support. Thanks so much!

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

Re: Resizing problem with galleries in separate tabs

I'm glad it worked for you.
Thank you for posting back to let me know.