However, when I click on the first image, it doesn't expand automatically to full-screen, but kind of jumps all over the page.
If you have a gallery which exhibits this behavior, please post its URL so that I can take a look and investigate further. (Your '/personal/' gallery still uses a Splash Page.)
If there is any problem with conflicting CSS, then the easiest way to avoid this is to use the Splash Page and set expandInNewPage="TRUE" so that when the gallery is expanded, it is expanded on a new page of its own where it cannot be affected by any CSS on your embedding page.
Also, I notice that your gallery uses Juicebox v1.4.3.
The latest version is actually v1.4.3.2. We have released a couple of hotfix versions to address a couple of bugs relating to pages jumping to the top when scrolling or closing expanded gallerieson iOS 8 devices.
You might like to try upgrading your gallery to the latest version to see if this helps.
Instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page. (The latest zip file is named 'juicebox_pro_1.4.3.2.zip' and the version number is noted in the comments at the top of the 'jbcore/juicebox.js' file.)
Is there any way to set the thumbnails to expand to full-screen on first click when showSplashPage is set to "NEVER"?
Juicebox was not designed to allow the gallery to expand on a thumbnail click. You could try to achieve this using the available methods in the Juicebox-Pro API but you might run into difficulties.
To see an example of this in action, create a test gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "AUTO",
showExpandButton: "TRUE",
showSmallThumbsButton: "TRUE",
showSmallThumbsOnLoad: "TRUE",
showSplashPage: "NEVER"
});
if (jb.getScreenMode() === 'SMALL') {
var fullscreen = false;
var thumbs = true;
jb.onExpand = function(expanded) {
if (fullscreen && !thumbs) {
jb.toggleThumbs();
}
fullscreen = !fullscreen;
};
jb.onImageChange = function(e) {
if (!fullscreen) {
jb.toggleExpand();
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
}
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
This will expand the gallery each time a new image is selected (in Small Screen Mode only) whether from the thumbnail page or a main image page. There is no way to distinguish whether an image is being selected from a thumbnail page (via a tap) or from a main image page (via a swipe).
Also, in order to include this functionality within a WP-Juicebox page, you would need to:
(1) Set the required configuration options as normal (Lite Options in the interface and Pro Options in the 'Pro Options' text area).
(2) Add the following code (in 'Text' mode, not 'Visual') below the Juicebox shortcode in the body of your WordPress page or post.
<script type="text/javascript">
if (jb_4.getScreenMode() === 'SMALL') {
var fullscreen = false;
var thumbs = true;
jb_4.onExpand = function(expanded) {
if (fullscreen && !thumbs) {
jb_4.toggleThumbs();
}
fullscreen = !fullscreen;
};
jb_4.onImageChange = function(e) {
if (!fullscreen) {
jb_4.toggleExpand();
}
};
jb_4.onShowThumbs = function(showing) {
thumbs = showing;
};
}
</script>
In the above example, 'jb_4' is used as the variable name for the 'juicebox' object. The '4' is the gallery id.
If your gallery id is 25, then replace all the instances of 'jb_4' with 'jb_25'.
I hope this points you in the right direction.