You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Background adjustment vertical to photo
I've installed Juicebox_Pro and it looks like the program works really well.
However, there is one problem.
I only use photo horizontally.
But the background is not adjusted in height to photo.
How is it done?
Regards
willy
Unfortunately, I'm not exactly sure what you mean.
Maybe you could explain your problem in more detail (let me know what you see and what you expect to see) and, if possible, post screenshots to demonstrate the problem.
In the meantime, maybe my notes below will help.
When using Juicebox-Pro's Background Image Options (found here), you can select the backgroundScale (STRETCH, FILL or NONE) in JuiceboxBuilder-Pro's 'Customize -> Background Image' section but the background image itself does not change (and is not adjusted) which each image within the gallery is viewed.
You can set your gallery's backgroundColor to be transparent (set the Background Color Opacity to '0' in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and whatever CSS background you set in your gallery's embedding web page (whether for the gallery container or the entire web page) will shine through the gallery.
If you wanted to, you could then adjust (or change) the background depending on the image currently being displayed in the gallery (using JavaScript and CSS).
Here is an example which changes the gallery's background color to red for a portrait style image, green for a landscape style image and blue for a perfectly square image. You could modify the JavaScript to alter the background and way you like, for example to completely change or adjust the size of a CSS background image.
To see this example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following as the gallery's 'index.html' file.
<!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;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
backgroundColor: "rgba(0, 0, 0, 0)",
containerId: "juicebox-container"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var img = new Image();
img.src = url;
var imageHeight = img.height;
var imageWidth = img.width;
var imageRatio = imageHeight/imageWidth;
if (imageRatio > 1) {
// Image is portrait style
$('#juicebox-container').css('background-color', '#ff0000');
}
if (imageRatio < 1) {
// Image is landscape style
$('#juicebox-container').css('background-color', '#00ff00');
}
if (imageRatio === 1) {
// Image is perfectly square
$('#juicebox-container').css('background-color', '#0000ff');
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I hope this help to clarify things and point you in the right direction.
If not, then please explain your problem in greater detail and I'll try to help further.
Thank you.
I'm trying to explain it better.
The background is scaled only in width according to the size of the image.
Not vertical.
I want the picture to have the same distance to the background edge both horizontally and vertically.
Hope it makes sense.
Attached one example.
/willy
Did not get the example attached correctly. Here it is.
I'm trying to explain it better.
The background is scaled only in width according to the size of the image.
Not vertical.
I want the picture to have the same distance to the background edge both horizontally and vertically.
Hope it makes sense.
Attached one example.
/willy
Thank you for the additional information.
From your screenshot, it looks like you may have set imageVAlign="TOP" which aligns the top of the main image with the top of the gallery leaving whatever space remains in the gallery below the main image.
If you want an equal amount of space at the top and bottom of the main image, then set imageVAlign="CENTER" (the default value for this configuration option) in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.
If this does not resolve your problem, then please check the CSS on your gallery's embedding web page to see if you have any custom CSS rules which are affecting the layout of your gallery (for example, any custom CSS rules which apply to all img tags on your web page which the gallery may be inheriting).
I hoe this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and investigate further.
Thank you.
Well, the problem is that the image format is square.
Eg. "Large" = 2048x2048 and I can't choose 2048x1365 (2X3 ratio)?
It seems that the background always be square
Sorry. I use Drupal and it is probably in the module the size is fixed (image style).
Not by Juicebox.
I will find out.
Eg. "Large" = 2048x2048 and I can't choose 2048x1365 (2X3 ratio)?
When using JuiceboxBuidler-Pro to create a gallery and resize images, you can set whatever image dimensions you like (in the 'Set Image Sizes' control panel after clicking the 'Change Sizes...' button on the 'Images' tab).
Please note that these image dimensions are maximum image bounds (rather than the actual dimensions for the resized images).
Images are resized respecting their aspect ratios and the resized images will always be within the maximum image bounds.
However, if your source images are square, then the resized images will also be square.
It seems that the background always be square
The background will always be the same size as the gallery itself.
The gallery dimensions are set via the galleryWidth and galleryHeight configuration options (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) which are set in the embedding code.
galleryWidth and galleryHeight can be fixed pixel values or percentages.
If using a galleryWidth of 100%, for example, then the gallery's actual width will be 100% of the width of the gallery's parent container (so the gallery's actual width will be dependent on other containers and CSS on the embedding page).
I use Drupal and it is probably in the module the size is fixed (image style).
The Juicebox Module for Drupal is an unofficial plugin which was not written by ourselves.
As such, methods of resizing images and setting gallery dimensions will likely be different to how it is done in JuiceboxBuilder-Pro.
If the module's own documentation (found here) does not help, then I'd recommend that you post your query in the Drupal forum where the author of the module (Ryan Jacobs) should be able to help you further.
He is active and very helpful in the Drupal forum and has a much better knowledge that I have of both the module and Drupal itself.
I hope these notes point you in the right direction.
Juicebox Support Forum → Juicebox-Pro Support → Background adjustment vertical to photo
Powered by PunBB, supported by Informer Technologies, Inc.