Unfortunately, on android smart phones it changes to a large splash page...
Please see the Screen Modes support section for details on how Juicebox adapts to different devices and screen sizes.
With Juicebox-Pro, you would have the ability to force a certain Screen Mode to always be used via the screenMode configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).
... and cuts off the "View Gallery" button partially.
The 'VIEW GALLERY' text should be at the bottom of the Splash Page (and there are no configuration options to change its position).
It looks like its position has been changed by some custom CSS on your web page conflicting with the gallery's own CSS.
Your 'homecss.css' file has a lot of CSS type selectors which apply rules to all instances of certain HTML elements (rather than targeting specific elements via id or class selectors).
For example, you have CSS which is being applied to all <img> tags, all heading tags (<h1> through <h6>) and all <a> tags on your web page. Such code will affect all of these tags on your web page, including those used in the gallery. There is no way to isolate the gallery from such CSS and the gallery has no option but to inherit these CSS rules.
It looks like the problem with the 'VIEW GALLERY' text is being caused by the following code in your 'homecss.css' file:
#wrapper #subgallerymain table {
width: auto;
height: 40px;
}If you have a table on your web page which requires these CSS rules, then assign the table an id (or class) and apply the rules to the id (or class) rather than all <table> tags within '#wrapper #subgallerymain'.
I also noticed buttons used to switch between galleries in the same html page don't have cursors or indicators that it's been clicked.
You can set up a certain style under a CSS class (using whatever CSS properties you like) for the selected link and then add or remove the class for the links as appropriate using JavaScript in your loadGallery() function (when a specific gallery has been selected).
Here's an example which switches between two galleries on the same page.
To see the example in action, create a couple of sample galleries with JuiceboxBuilder-Lite and name the gallery folders 'gallery1' and 'gallery2'.
Now, use the following code to create a new HTML file, put the file in the same directory as your gallery folders and open the HTML file in a browser.
The cursor will change to a pointer when the user hovers over a gallery link and the link corresponding to the selected gallery will be underlined.
The example is basic but demonstrates the required functionality which I hope you can incorporate into your own web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
/* Add pointer cursor to all gallery links */
.gallery {
cursor: pointer;
}
/* Create style for selected gallery link */
.gallery.selected {
text-decoration: underline;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery(base) {
new juicebox({
baseUrl: base + "/",
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
$('.gallery').removeClass('selected'); // Remove 'selected' class from all gallery links
$('#' + base).addClass('selected'); // Add 'selected' class to only the selected gallery link
}
$(document).ready(function() {
$('.gallery').click(function() {
var base = $(this).attr('id');
loadGallery(base);
});
loadGallery('gallery1');
});
</script>
<title>Test</title>
</head>
<body>
<div id="links">
<span id="gallery1" class="gallery">Gallery 1</span>
<span> </span>
<span id="gallery2" class="gallery">Gallery 2</span>
</div>
<div id="juicebox-container"></div>
</body>
</html>I hope these notes help you to resolve your problems.