Hello
Following on from 2013-11-05 19:44:40 Multiple Galleries On One Page With Header (that's where the code comes from)
I'm trying to put together a resizable gallery such as in http://www.juicebox.net/demos/support/r … index.html
I can do this, but instead of Gallery 1, Gallery 2 etc. I'd like something like Sue's garden, Neil and Fiona's garden. Is this allowed to have different names for the galleries? Is the apostrophe a problem? I've spent some time (understatement) trying to do the things that are described and not having much skill.
In the code below I've put in capitals some questions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
background-color: #222222;
}
#menu {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
float: left;
text-align: center;
padding-left: 15px;
padding-top: 20px;
height: 100%;
width: 100px;
}
#menu a {
color #666666;
text-decoration: none;
}
#wrap {
float: right;
height: 100%;
}
</style>
<script src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var menuWidth = $('#menu').outerWidth();
var galleryHeight = parseInt(windowHeight);
var galleryWidth = parseInt(windowWidth) - parseInt(menuWidth);
$('#wrap').height(galleryHeight);
$('#wrap').width(galleryWidth); }
function loadGallery(base) {
new juicebox({
containerId: 'juicebox-container',
baseUrl: base
});
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
loadGallery('gallery1/'); REPLACE gallery1 with sue'sgarden (all lower case one word)
});
</script>
<title>Test</title>
</head>
<body>
<div id="menu">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a> REPLACE gallery1 with sue'sgarden (all lower case one word) and replace Gallery 1 with Sue's garden
<br />
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a> REPLACE gallery1 with neilandfiona'sgarden (all lower case one word) and replace Gallery 1 with Neil and Fiona's garden
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
When I'm generating the galleries, I name a new folder Sue's garden which is in the same directory as the html page. I also do another folder Neil and Fiona's garden, again in the same directory. Is this correct please?
The html page is index by default. Do I change this to the HTML page where the gallery sits eg juiceboxprac.html or keep it at index.html?
Many thanks