I'm not sure if I should create a new page with a new gallery for each room
This would certainly be the easiest approach and would be the only solution which could be achieved with WP-Juicebox (the Juicebox plugin for WordPress).
(You could still use Flickr tags for each gallery.)
or if I can create one gallery and use some javascript in the links to have the gallery reload showing only certain photos with those tags
This would certainly be possible but might be difficult to achieve in a WordPress environment (and it would not be possible with WP-Juicebox).
Here is an example of how it could be achieved using a sample gallery's 'index.html' file as a template. (The loadGallery function's parameter is the actual Flickr tag you would like to use for each gallery.)
You could manually upload your gallery files to your web server and copy and paste the relevant code from below into a WordPress page or post (modifying it as required to suit your needs).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery(tags) {
new juicebox({
galleryWidth: '800',
galleryHeight: '600',
containerId: 'juicebox-container',
useFlickr: 'true',
flickrUserName: 'your_flickr_user_name',
flickrTags: tags
});
}
$(document).ready(function() {
loadGallery('tag1');
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
<div id="links">
<a href="#" onclick="javascript: loadGallery('tag1'); return false;">Tag 1</a>
<a href="#" onclick="javascript: loadGallery('tag2'); return false;">Tag 2</a>
<a href="#" onclick="javascript: loadGallery('tag3'); return false;">Tag 3</a>
</div>
</body>
</html>