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.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by ryanharries
Pages 1
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.
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?
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;">
© 2015 Perth Wrought Iron, Inc. · ABN: 62 009 231 592 · Phone: 08 9272 7166 · Fax: 08 9272 1790 · Email: perthwroughtiron@hotmail.com · Address: 33 Bassendean Rd, Bayswater WA 6053
</p>
</footer>
</div>
</body>
</html>Pages 1
Juicebox Support Forum → Posts by ryanharries
Powered by PunBB, supported by Informer Technologies, Inc.