You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Image width on embedded page.
I have embedded a gallery within my website, but I need the image to take up the width of the embeddable area without having to hide thumbnails. It seems to work natively this way in IE, but in Firefox it resizes smaller, unless I hide the thumbnails. Also, when I need to delete images from Juicebox Builder Pro I am only able to delete one image until I restart the program.
I need the image to take up the width of the embeddable area without having to hide thumbnails
If you want your image to fill the width of the image area within the gallery, try setting imageScaleMode to either "SCALE" or "FILL". By default, imageScaleMode is set to "SCALE_DOWN" and if the aspect ratio of your images does not match that of the image area within the gallery, then the images will be scaled down to fit within the image area without cropping and this may result in space to the top and bottom or left and right of the images. Also, when using "SCALE_DOWN", small images are not scaled up (as this would reduce their visual quality).
Please see this FAQ which deals with unwanted space within a gallery:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
Also, when I need to delete images from Juicebox Builder Pro I am only able to delete one image until I restart the program.
This sounds like you may be experiencing a bug which has been fixed.
Please download the latest version of Juicebox-Pro v1.4.2 (using the link from your purchase email) and you should no longer experience this issue. Please see the Upgrading Juicebox support page for details.
I have set the parameters the same as mentioned by Steven, but my problem still occurs. I need the images to look like they do when you hide the thumbnails (expanding to the width of the embed space), but with the thumbnails still visible. To clarify the image is at the top no problem, but some images have too much spacing on the sides and then some fill up the space like I need it to look. I set the thumbnails to be 8 columns and 4 rows, yet only 7 columns show when there should be more than enough room to fit all of them. Check it out here: http://www.letterheadfonts.com/gallery/indexTEST.php
Your gallery will remain the same size on your page whether or not the thumbnails are displayed.
When the thumbnails are displayed, there is little room left within your gallery to display the main image (and it is displayed as large as it can be with with space available).
The only way to display the image at its larger size when the thumbnails are displayed would be to change the size of the gallery when the thumbnail button is clicked (to give your gallery more height to display both the thumbnails and the main image).
This can be achieved by using the Juicebox-Pro API, specifically the setGallerySize() method and the onShowThumbs() event.
To see an example of this in action, create a sample gallery with JuiceboxBuilder-Pro (using default values) and replace the gallery's embedding code (in the 'index.html' file) with the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryHeight: '600',
galleryWidth: '600',
showThumbsOnLoad: 'TRUE'
});
jb.onInitComplete = function() {
if (jb.getScreenMode() === 'LARGE') {
jb.onShowThumbs = function(showing) {
if (showing) {
jb.setGallerySize(600, 600);
} else
jb.setGallerySize(600, 400);
}
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Your gallery has dimensions of 100% x 100%. This means that it will fill its parent container no matter what its size is. However, in order for Juicebox to determine what its actual dimensions should be, please be sure to explicitly set dimensions for the gallery's parent container using CSS (otherwise Juicebox will not know what the 100% should refer to).
When using percentage heights, please also see this note regarding Using Percentage Heights]Using Percentage Heights
If using the API solution above, this will not apply as setGallerySize() accepts only absolute pixel values (not percentages).
Also, your web page has HTML errors which may be causing problems.
You can validate your web page with the W3C Markup Validation Service and then fix the errors reported.
Once the code on your web page validates, your web page should be rendered with greater predictability and consistency across different browsers.
You also have a very high thumbSelectedFrameWidth which makes your selected thumbnails look a little strange. I would recommend reducing this value from 45 to something less than or equal to half the height/width of your thumbnails.
Steven this worked perfectly, thank you. I adjusted the width and height, but didn't do it through API, just in the code itself here:
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "732px",
galleryHeight: "1250px",
backgroundColor: "rgba(241,241,228,1)"
});
</script>
I still have a bit of tweaking to do.
Is there a way to make the thumbnails closer to the image as I now have a lot of room between the images and the thumbs, or even have them move dynamically? See the previous gallery link.
The reason for the large frame width was because I wanted the thumb selected to look greyed out and not just a border. Is there a way to have it a solid square instead of just a frame?
The errors on the page were due to me adding links in the captions area, but forgetting quotes here and there. Dumb mistake. The other errors are to make the page borders change based on what is in the page. It's a little trick we do so we don't have to keep adding border images and it shouldn't effect the Juicebox content.
Thank you for getting back to me so promptly. You guys run a good forum.
Is there a way to make the thumbnails closer to the image as I now have a lot of room between the images and the thumbs, or even have them move dynamically?
It would help (to distribute the extra space within the gallery equally above and below the main image) if you changed imageVAlign="TOP" to imageVAlign="CENTER".
You could probably reduce your gallery's height a bit and this should have the desired effect of reducing the amount of space you see between the main image and the thumbnails. (Reduce it too much and the width of the main image will start to decrease but it looks like you can afford to reduce it slightly without affecting the size of the main image.)
The reason for the large frame width was because I wanted the thumb selected to look greyed out and not just a border. Is there a way to have it a solid square instead of just a frame?
The best you can do is set thumbSelectedFrameWidth to exactly half the height/width of your thumbnails (so that the frame on all sides meets in the middle). Previously, it was more than half, resulting in a strange-looking effect.
Juicebox Support Forum → Juicebox-Pro Support → Image width on embedded page.
Powered by PunBB, supported by Informer Technologies, Inc.