1 Topic by ryanharries (edited by ryanharries 2017-12-16 10:01:05)

  • Registered: 2017-12-16
  • Posts: 3

Topic: Multiple Galleries issue [SOLVED]

Hi, I'm attempting to use the baseUrl method to have 4 galleries in different tabs on a page for a friends business website.
The first gallery seems to function as intended, but the other three tabs don't show anything at all. Any idea why this does not function?

http://www.perthwroughtiron.com.au/gallery2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Perth Wrought Iron</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Hand-crafted wrought iron and stainless steel servicing the Perth metropolitan area.">
  <meta name="author" content="Perth Wrought Iron">

    <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
    <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
    <!--script src="js/less-1.3.3.min.js"></script-->
    <!--append ‘#!watch’ to the browser URL, then refresh the page. -->
    
    <link href="css/custom-lightbox.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap-social.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/justified-nav.css" rel="stylesheet">-->
    <link href="css/custom.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons 
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png"> -->
  <link rel="shortcut icon" href="img/favicon.png">
  
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript" src="js/custom-lightbox.js"></script>
</head>

<body>
    <div class="container">
        <div class="brand">
            <img style="display: block; margin: 0 auto; text-align: center; max-height: 200px;" src="img/vectorizedPWILogo_lqBlk.png" alt="Perth Wrought Iron" class="img-rounded logo-custom">
        </div>
    </div>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="masthead">
                    <nav>
                          <ul class="nav nav-justified">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="products.html">Products</a></li>
                            <li class="active"><a href="gallery.html">Gallery</a></li>
                            <li><a href="contact.php">Contact</a></li>
                           </ul>
                    </nav>
                  </div>
            </div>
        </div>
    </div>
    <hr class="featurette-divider">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p class="text-center lead">
                    Wrought iron is the perfect choice for a large range of domestic and commercial applications including gates, fences, grilles, balustrades and furniture items. Robust and natural, our iron products seamlessly integrate with any décor, supporting both modern and traditional architectural design while providing security for your home.
                    </ br>
                    Take a look at some of the fantastic work we have completed over the last 33 years. We are sure our superior level of craftsmanship and fantastic service will amaze you. We always strive to exceed expectations and you will find our prices the most competitive in the industry.
                </p>
            </div>
        </div>
        <hr class="featurette-divider">
        <div class="row clearfix">


<!-- Tabbed Gallery --> 
            <div>
            
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#aluminium" aria-controls="aluminium" role="tab" data-toggle="tab">Aluminium</a></li>
                <li role="presentation"><a href="#glass" aria-controls="glass" role="tab" data-toggle="tab">Glass</a></li>
                <li role="presentation"><a href="#stainless" aria-controls="stainless" role="tab" data-toggle="tab">Stainless Steel</a></li>
                <li role="presentation"><a href="#etc" aria-controls="etc" role="tab" data-toggle="tab">Wrought Iron & More</a></li>
              </ul>
            
              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="aluminium">
                    <!-- Gallery Set -->  

                    <!--START JUICEBOX EMBED-->
                    <script src="aluminium/jbcore/juicebox.js"></script>
                    <script>
                    new juicebox({
                    baseUrl : "aluminium/",
                    containerId: "juicebox-container",
                    galleryWidth: "100%",
                    galleryHeight: "100%",
                    backgroundColor: "rgba(34,34,34,0)"
                    });
                    </script>
                    <div id="juicebox-container">
                    <!-- Image gallery content for non-javascript devices -->
                    <noscript>
                    <h1></h1>
                    <p></p>
                    <p><img src="aluminium/images/23283346_10154962703089149_2074428884_n.jpg" title="23283346_10154962703089149_2074428884_n" alt="" /><br>23283346_10154962703089149_2074428884_n </p>
                    <p><img src="aluminium/images/23314057_10154962702704149_1907410849_o.jpg" title="23314057_10154962702704149_1907410849_o" alt="" /><br>23314057_10154962702704149_1907410849_o </p>
                    <p><img src="aluminium/images/23314133_10154962702914149_1539702675_o.jpg" title="23314133_10154962702914149_1539702675_o" alt="" /><br>23314133_10154962702914149_1539702675_o </p>
                    <p><img src="aluminium/images/23314333_10154962703424149_1448671859_o.jpg" title="23314333_10154962703424149_1448671859_o" alt="" /><br>23314333_10154962703424149_1448671859_o </p>
                    <p><img src="aluminium/images/23314454_10154962702989149_415272990_o.jpg" title="23314454_10154962702989149_415272990_o" alt="" /><br>23314454_10154962702989149_415272990_o </p>
                    <p><img src="aluminium/images/23314504_10154962703459149_1782720445_o.jpg" title="23314504_10154962703459149_1782720445_o" alt="" /><br>23314504_10154962703459149_1782720445_o </p>
                    <p><img src="aluminium/images/23316179_10154962702704149_1907410849_n.jpg" title="23316179_10154962702704149_1907410849_n" alt="" /><br>23316179_10154962702704149_1907410849_n </p>
                    <p><img src="aluminium/images/23316221_10154962702989149_415272990_n.jpg" title="23316221_10154962702989149_415272990_n" alt="" /><br>23316221_10154962702989149_415272990_n </p>
                    <p><img src="aluminium/images/23318486_10154962702914149_1539702675_n.jpg" title="23318486_10154962702914149_1539702675_n" alt="" /><br>23318486_10154962702914149_1539702675_n </p>
                    <p><img src="aluminium/images/23318716_10154962703044149_1644401102_n.jpg" title="23318716_10154962703044149_1644401102_n" alt="" /><br>23318716_10154962703044149_1644401102_n </p>
                    <p><img src="aluminium/images/23335581_10154962703584149_536217415_o.jpg" title="23335581_10154962703584149_536217415_o" alt="" /><br>23335581_10154962703584149_536217415_o </p>
                    <p><img src="aluminium/images/23335624_10154962703229149_1801791169_o.jpg" title="23335624_10154962703229149_1801791169_o" alt="" /><br>23335624_10154962703229149_1801791169_o </p>
                    <p><img src="aluminium/images/23335676_10154962703494149_1670110834_o.jpg" title="23335676_10154962703494149_1670110834_o" alt="" /><br>23335676_10154962703494149_1670110834_o </p>
                    <p><img src="aluminium/images/23335684_10154962702904149_1934258327_o.jpg" title="23335684_10154962702904149_1934258327_o" alt="" /><br>23335684_10154962702904149_1934258327_o </p>
                    <p><img src="aluminium/images/23336318_10154962703259149_299690032_o.jpg" title="23336318_10154962703259149_299690032_o" alt="" /><br>23336318_10154962703259149_299690032_o </p>
                    <p><img src="aluminium/images/23336339_10154962702479149_1989523791_o.jpg" title="23336339_10154962702479149_1989523791_o" alt="" /><br>23336339_10154962702479149_1989523791_o </p>
                    <p><img src="aluminium/images/23360800_10154962703229149_1801791169_n.jpg" title="23360800_10154962703229149_1801791169_n" alt="" /><br>23360800_10154962703229149_1801791169_n </p>
                    <p><img src="aluminium/images/23360861_10154962702789149_240981891_n.jpg" title="23360861_10154962702789149_240981891_n" alt="" /><br>23360861_10154962702789149_240981891_n </p>
                    <p><img src="aluminium/images/23361237_10154962703259149_299690032_n.jpg" title="23361237_10154962703259149_299690032_n" alt="" /><br>23361237_10154962703259149_299690032_n </p>
                    <p><img src="aluminium/images/23376899_10154962702789149_240981891_o.jpg" title="23376899_10154962702789149_240981891_o" alt="" /><br>23376899_10154962702789149_240981891_o </p>
                    <p><img src="aluminium/images/23376906_10154962703044149_1644401102_o.jpg" title="23376906_10154962703044149_1644401102_o" alt="" /><br>23376906_10154962703044149_1644401102_o </p>
                    <p><img src="aluminium/images/23376942_10154962703089149_2074428884_o.jpg" title="23376942_10154962703089149_2074428884_o" alt="" /><br>23376942_10154962703089149_2074428884_o </p>
                    <p><img src="aluminium/images/23379694_10154962703084149_105446076_o.jpg" title="23379694_10154962703084149_105446076_o" alt="" /><br>23379694_10154962703084149_105446076_o </p>
                    <p><img src="aluminium/images/23414449_10154962703084149_105446076_n.jpg" title="23414449_10154962703084149_105446076_n" alt="" /><br>23414449_10154962703084149_105446076_n </p>
                    <p><img src="aluminium/images/23415882_10154962702479149_1989523791_n.jpg" title="23415882_10154962702479149_1989523791_n" alt="" /><br>23415882_10154962702479149_1989523791_n </p>
                    </noscript>
                    </div>
                    <!--END JUICEBOX EMBED-->
                    <!-- END Gallery Set -->
 
                </div>
                <div role="tabpanel" class="tab-pane fade" id="glass">
                    <!-- Gallery Set -->  
                    <!--START JUICEBOX EMBED-->
                    <script src="glass/jbcore/juicebox.js"></script>
                    <script>
                    new juicebox({
                    baseUrl : "glass/",
                    containerId: "juicebox-container",
                    galleryWidth: "100%",
                    galleryHeight: "100%",
                    backgroundColor: "rgba(34,34,34,0)"
                    });
                    </script>
                    <div id="juicebox-container">
                    <!-- Image gallery content for non-javascript devices -->
                    <noscript>
                    <h1></h1>
                    <p></p>
                    <p><img src="glass/images/23314119_10154962702379149_1048003024_o.jpg" title="23314119_10154962702379149_1048003024_o" alt="" /><br>23314119_10154962702379149_1048003024_o </p>
                    <p><img src="glass/images/23314458_10154962702384149_2078274972_o.jpg" title="23314458_10154962702384149_2078274972_o" alt="" /><br>23314458_10154962702384149_2078274972_o </p>
                    <p><img src="glass/images/23314460_10154962702364149_1596899137_o.jpg" title="23314460_10154962702364149_1596899137_o" alt="" /><br>23314460_10154962702364149_1596899137_o </p>
                    <p><img src="glass/images/23335565_10154962701944149_708044809_o.jpg" title="23335565_10154962701944149_708044809_o" alt="" /><br>23335565_10154962701944149_708044809_o </p>
                    <p><img src="glass/images/23379422_10154962701804149_319633588_o.jpg" title="23379422_10154962701804149_319633588_o" alt="" /><br>23379422_10154962701804149_319633588_o </p>
                    <p><img src="glass/images/23414176_10154962702904149_1934258327_n.jpg" title="23414176_10154962702904149_1934258327_n" alt="" /><br>23414176_10154962702904149_1934258327_n </p>
                    <p><img src="glass/images/23314096_10154962701909149_937437378_o.jpg" title="23314096_10154962701909149_937437378_o" alt="" /><br>23314096_10154962701909149_937437378_o </p>
                    </noscript>
                    </div>
                    <!--END JUICEBOX EMBED-->
                    <!-- END Gallery Set -->
 
                </div>
                <div role="tabpanel" class="tab-pane fade" id="stainless">
                    <!-- Gallery Set -->  
                    <!--START JUICEBOX EMBED-->
                    <script src="stainless/jbcore/juicebox.js"></script>
                    <script>
                    new juicebox({
                    baseUrl : "stainless/",                    
                    containerId: "juicebox-container",
                    galleryWidth: "100%",
                    galleryHeight: "100%",
                    backgroundColor: "rgba(34,34,34,0)"
                    });
                    </script>
                    <div id="juicebox-container">
                    <!-- Image gallery content for non-javascript devices -->
                    <noscript>
                    <h1></h1>
                    <p></p>
                    <p><img src="stainless/images/23335531_10154962700299149_1023840792_o.jpg" title="23335531_10154962700299149_1023840792_o" alt="" /><br>23335531_10154962700299149_1023840792_o </p>
                    <p><img src="stainless/images/23335682_10154962700364149_794877037_o.jpg" title="23335682_10154962700364149_794877037_o" alt="" /><br>23335682_10154962700364149_794877037_o </p>
                    <p><img src="stainless/images/23335773_10154962701209149_1203184563_o.jpg" title="23335773_10154962701209149_1203184563_o" alt="" /><br>23335773_10154962701209149_1203184563_o </p>
                    <p><img src="stainless/images/23335996_10154962701509149_2004788140_o.jpg" title="23335996_10154962701509149_2004788140_o" alt="" /><br>23335996_10154962701509149_2004788140_o </p>
                    <p><img src="stainless/images/23336118_10154962700444149_1273189193_o.jpg" title="23336118_10154962700444149_1273189193_o" alt="" /><br>23336118_10154962700444149_1273189193_o </p>
                    <p><img src="stainless/images/23336601_10154962701749149_1846498104_o.jpg" title="23336601_10154962701749149_1846498104_o" alt="" /><br>23336601_10154962701749149_1846498104_o </p>
                    <p><img src="stainless/images/23361180_10154962701674149_1256518857_n.jpg" title="23361180_10154962701674149_1256518857_n" alt="" /><br>23361180_10154962701674149_1256518857_n </p>
                    <p><img src="stainless/images/23377006_10154962700409149_1409324063_o.jpg" title="23377006_10154962700409149_1409324063_o" alt="" /><br>23377006_10154962700409149_1409324063_o </p>
                    <p><img src="stainless/images/23379751_10154962701504149_301628501_o.jpg" title="23379751_10154962701504149_301628501_o" alt="" /><br>23379751_10154962701504149_301628501_o </p>
                    <p><img src="stainless/images/23283426_10154962701369149_2047103631_n.jpg" title="23283426_10154962701369149_2047103631_n" alt="" /><br>23283426_10154962701369149_2047103631_n </p>
                    <p><img src="stainless/images/23313411_10154962701719149_1871423735_o.jpg" title="23313411_10154962701719149_1871423735_o" alt="" /><br>23313411_10154962701719149_1871423735_o </p>
                    <p><img src="stainless/images/23314076_10154962701604149_1577550253_o.jpg" title="23314076_10154962701604149_1577550253_o" alt="" /><br>23314076_10154962701604149_1577550253_o </p>
                    <p><img src="stainless/images/23314306_10154962700389149_398531020_o.jpg" title="23314306_10154962700389149_398531020_o" alt="" /><br>23314306_10154962700389149_398531020_o </p>
                    <p><img src="stainless/images/23314348_10154962700304149_1043128092_o.jpg" title="23314348_10154962700304149_1043128092_o" alt="" /><br>23314348_10154962700304149_1043128092_o </p>
                    <p><img src="stainless/images/23314392_10154962701369149_2047103631_o.jpg" title="23314392_10154962701369149_2047103631_o" alt="" /><br>23314392_10154962701369149_2047103631_o </p>
                    <p><img src="stainless/images/23314469_10154962701654149_1383755606_o.jpg" title="23314469_10154962701654149_1383755606_o" alt="" /><br>23314469_10154962701654149_1383755606_o </p>
                    <p><img src="stainless/images/23314484_10154962701644149_1027852380_o.jpg" title="23314484_10154962701644149_1027852380_o" alt="" /><br>23314484_10154962701644149_1027852380_o </p>
                    <p><img src="stainless/images/23314526_10154962701609149_652204838_o.jpg" title="23314526_10154962701609149_652204838_o" alt="" /><br>23314526_10154962701609149_652204838_o </p>
                    <p><img src="stainless/images/23315922_10154962701219149_1501691684_n.jpg" title="23315922_10154962701219149_1501691684_n" alt="" /><br>23315922_10154962701219149_1501691684_n </p>
                    <p><img src="stainless/images/23318751_10154962700374149_1938723520_n.jpg" title="23318751_10154962700374149_1938723520_n" alt="" /><br>23318751_10154962700374149_1938723520_n </p>
                    </noscript>
                    </div>
                    <!--END JUICEBOX EMBED-->
                    <!-- END Gallery Set -->
 
                </div>
                <div role="tabpanel" class="tab-pane fade" id="etc">
                    <!-- Gallery Set -->  
                    <!--START JUICEBOX EMBED-->
                    <script src="etc/jbcore/juicebox.js"></script>
                    <script>
                    new juicebox({
                    baseUrl : "etc/",
                    containerId: "juicebox-container",
                    galleryWidth: "100%",
                    galleryHeight: "100%",
                    backgroundColor: "rgba(34,34,34,0)"
                    });
                    </script>
                    <div id="juicebox-container">
                    <!-- Image gallery content for non-javascript devices -->
                    <noscript>
                    <h1></h1>
                    <p></p>
                    <p><img src="etc/images/g3.jpg" title="g3" alt="" /><br>g3 </p>
                    <p><img src="etc/images/g4.jpg" title="g4" alt="" /><br>g4 </p>
                    <p><img src="etc/images/g5.jpg" title="g5" alt="" /><br>g5 </p>
                    <p><img src="etc/images/g6.jpg" title="g6" alt="" /><br>g6 </p>
                    <p><img src="etc/images/g7.jpg" title="g7" alt="" /><br>g7 </p>
                    <p><img src="etc/images/h1.jpg" title="h1" alt="" /><br>h1 </p>
                    <p><img src="etc/images/h2.jpg" title="h2" alt="" /><br>h2 </p>
                    <p><img src="etc/images/h3.jpg" title="h3" alt="" /><br>h3 </p>
                    <p><img src="etc/images/h4.jpg" title="h4" alt="" /><br>h4 </p>
                    <p><img src="etc/images/h5.jpg" title="h5" alt="" /><br>h5 </p>
                    <p><img src="etc/images/h6.jpg" title="h6" alt="" /><br>h6 </p>
                    <p><img src="etc/images/h7.jpg" title="h7" alt="" /><br>h7 </p>
                    <p><img src="etc/images/23314278_10154962705859149_1845432106_o.jpg" title="23314278_10154962705859149_1845432106_o" alt="" /><br>23314278_10154962705859149_1845432106_o </p>
                    <p><img src="etc/images/23314480_10154962705769149_1943900431_o.jpg" title="23314480_10154962705769149_1943900431_o" alt="" /><br>23314480_10154962705769149_1943900431_o </p>
                    <p><img src="etc/images/23314500_10154962705809149_1871242195_o.jpg" title="23314500_10154962705809149_1871242195_o" alt="" /><br>23314500_10154962705809149_1871242195_o </p>
                    <p><img src="etc/images/23335837_10154962705824149_1580279595_o.jpg" title="23335837_10154962705824149_1580279595_o" alt="" /><br>23335837_10154962705824149_1580279595_o </p>
                    <p><img src="etc/images/23336241_10154962705849149_697255315_o.jpg" title="23336241_10154962705849149_697255315_o" alt="" /><br>23336241_10154962705849149_697255315_o </p>
                    <p><img src="etc/images/23423657_10154962705869149_317595516_o.jpg" title="23423657_10154962705869149_317595516_o" alt="" /><br>23423657_10154962705869149_317595516_o </p>
                    <p><img src="etc/images/b1.jpg" title="b1" alt="" /><br>b1 </p>
                    <p><img src="etc/images/b2.jpg" title="b2" alt="" /><br>b2 </p>
                    <p><img src="etc/images/b3.jpg" title="b3" alt="" /><br>b3 </p>
                    <p><img src="etc/images/b4.jpg" title="b4" alt="" /><br>b4 </p>
                    <p><img src="etc/images/b5.jpg" title="b5" alt="" /><br>b5 </p>
                    <p><img src="etc/images/b6.jpg" title="b6" alt="" /><br>b6 </p>
                    <p><img src="etc/images/b7.jpg" title="b7" alt="" /><br>b7 </p>
                    <p><img src="etc/images/f1.jpg" title="f1" alt="" /><br>f1 </p>
                    <p><img src="etc/images/f2.jpg" title="f2" alt="" /><br>f2 </p>
                    <p><img src="etc/images/f3.jpg" title="f3" alt="" /><br>f3 </p>
                    <p><img src="etc/images/f4.jpg" title="f4" alt="" /><br>f4 </p>
                    <p><img src="etc/images/f5.jpg" title="f5" alt="" /><br>f5 </p>
                    <p><img src="etc/images/f6.jpg" title="f6" alt="" /><br>f6 </p>
                    <p><img src="etc/images/f7.jpg" title="f7" alt="" /><br>f7 </p>
                    <p><img src="etc/images/g1.jpg" title="g1" alt="" /><br>g1 </p>
                    <p><img src="etc/images/g2.jpg" title="g2" alt="" /><br>g2 </p>
                    </noscript>
                    </div>
                    <!--END JUICEBOX EMBED-->
                    <!-- END Gallery Set -->
 
                </div>
              </div>
            
            </div>
<!-- END Tabbed Gallery -->          
<!-- Lightbox Code -->               
            <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
                    <div class="modal-content">
                        <div class="modal-body">
                            <img src="" alt="" />
                        </div>
                    </div>
                </div>
            </div>    
<!-- END Lightbox Code -->  

       </div>
        <hr class="featurette-divider">
        <footer>
            <p style="text-align: center;">
                &copy; 2015 Perth Wrought Iron, Inc. &middot; ABN: 62 009 231 592 &middot; Phone: 08 9272 7166 &middot; Fax: 08 9272 1790 &middot; Email: perthwroughtiron@hotmail.com &middot; Address: 33 Bassendean Rd, Bayswater WA 6053    
            </p>
        </footer>
    </div>
</body>
</html>
  • Registered: 2012-04-24
  • Posts: 5,916

Re: Multiple Galleries issue [SOLVED]

First of all, when embedding multiple galleries into a single web page, there are a couple of things to note:

(1) The 'juicebox.js' file should be loaded only once per web page (from within one of your gallery folders), rather than once per gallery.

(2) Each gallery should be embedded into a container with a unique name. At the moment, all of your galleries are embedded into containers with a 'containerId' and <div> 'id' of "juicebox-container". There should be no duplicate 'is' on a web page.

The cause of your problem is likely to be #2 above.
It is possible that when the second tab on your page is selected (for example), the corresponding gallery is embedded into the first <div id="juicebox-container"> that the browser finds on the page (which is in the first tab and is now hidden from view).
Hopefully embedding your galleries into containers with unique names will help.

Another possible cause for your problem is that all your galleries are loaded as soon as your web page is loaded but, when the web page is loaded, only the first tab is visible and has dimensions. The other tabs are initially hidden and essentially have zero dimensions. The galleries on the other tabs have galleryWidth and galleryHeight of 100% so, when the web page is loaded, Juicebox calculates their dimensions to be 100 % of zero (which is zero, resulting in a non-visible gallery).

Here are a couple of things to try.

(1) Give your galleries fixed pixel dimensions rather than percentage dimensions (at least for testing purposes), to see if this helps.

(2) Alternatively, if you want to keep the gallery dimensions at 100% (for the galleries to be responsive), then you'll need to load them only after the selected tab is visible and has been given dimensions on your web page.
Put the gallery embedding code into a JavaScript function (with parameters for the baseUrl and containerId) and load the function (to load a specific gallery into the correct container) when a tab is selected.
For example, you could use something like the following (outside the tabs on your web page, perhaps in the <head> section):

<script src="aluminium/jbcore/juicebox.js"></script>
<script>
function loadGallery(base, container) {
    new juicebox({
        baseUrl : base,
        containerId: container,
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(34,34,34,0)"
    });
}
</script>

Now, inside the first tab (where you currently have each gallery's embedding code), use something like:

<div id="juicebox-container-1"></div>
<script>
    loadGallery('aluminium/', 'juicebox-container-1');
</script>

... and inside the second tab, use something like:

<div id="juicebox-container-2"></div>
<script>
    loadGallery('glass/', 'juicebox-container-2');
</script>

... etc.

(You can insert each gallery's SEO content code inside the corresponding <div> containers. I just left this out in my sample code above for clarity.)

I hope this helps and points you in the right direction.

3 Reply by ryanharries (edited by ryanharries 2017-12-17 07:35:23)

  • Registered: 2017-12-16
  • Posts: 3

Re: Multiple Galleries issue [SOLVED]

Thanks for the thorough and easy to follow reply.
I have modified the page as you suggested, but although the gallery and thumbs appear, the images themselves do not.
I'll play around and see if I can fix it myself in the mean time - thanks again for all your help.

EDIT: It seems like its only allowing one tab to have an image displayed at a time. Will I have to "unload" the galleries when the tab is changed or some such?

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

Re: Multiple Galleries issue [SOLVED]

Judging by the vertical nature of the Button Bar, it looks like a dimensional/timing problem (maybe the tab's dimensions are not fully set up when the gallery is loaded).
Additionally, if I resize the browser window (forcing the gallery to be redrawn with new dimensions), the main image and the Button Bar are both displayed correctly.

Thinking about my original suggestion, it looks like adding code such as:

<script>
    loadGallery('aluminium/', 'juicebox-container-1');
</script>

.. in each tab will still load all galleries as soon as the web page is loaded (so galleries 2, 3 and 4 may still be loaded within hidden tabs). It looks like tabs 2, 3 and 4 may not be visible when the web page is initially loaded but all the HTML and JavaScript code within the tabs will be parsed by the browser on load.

However, loading only one 'juicebox.js file per page, embedding each gallery into a unique container and using a loadGallery() function are still steps in the right direction so all your work so far has not been in vain.

Here's perhaps a better suggestion which should hopefully work (and load each gallery on demand only after the parent tab is visible, i.e. when a tab is clicked).
Create a click handler for your tab headers and run the loadGallery() function to load the gallery corresponding to the selected tab.
Remove the individual calls to the loadGallery() function (but leave the gallery container divs in place) and add the following code just below the loadGallery() function itself.

$(document).ready(function() {
    $("li[role='presentation'] a").click(function() {
        var gallery = $(this).attr('aria-controls');
        var base = gallery + '/';
        var container = 'juicebox-' + gallery;
        loadGallery(base, container);
    });
});

(The code above extracts the gallery name from your conveniently named 'aria-contols' attribute and uses it to form the baseUrl and containerId.)
If this does not work, then you might need to introduce a slight delay before loading the gallery (to ensure that the tab's dimensions are set up) so try this (which has a delay of 200ms before loading the gallery).

$(document).ready(function() {
    $("li[role='presentation'] a").click(function() {
        window.setTimeout(function() {
            var gallery = $(this).attr('aria-controls');
            var base = gallery + '/';
            var container = 'juicebox-' + gallery;
            loadGallery(base, container);
        }, 200);
    });
});

I hope this helps to resolve your problem.

  • Registered: 2017-12-16
  • Posts: 3

Re: Multiple Galleries issue [SOLVED]

Perfect!

I had to retain the call for the aluminium gallery to load, otherwise you had to click the tab to get it to open, but now it functions as intended.

Thanks so much for your help, you've gone above and beyond.

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

Re: Multiple Galleries issue [SOLVED]

You're welcome!
I'm glad it's working now. Thank you for letting me know.