Now marked as [SOLVED]. Thank you for letting me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Now marked as [SOLVED]. Thank you for letting me know.
The problem you describe (a horizontal shift in content when loading your gallery web pages) is caused by the browser initially rendering your gallery web pages without a vertical scroll bar but then displaying one when it discovers that a scroll bar is required.
As your gallery web pages will require a vertical scrollbar anyway (in all but very tall browser windows), you could add the following CSS to your 'style-menu2.css' page in order to instruct the browser to always display a vertical scroll bar (so that it is present when loading the page content, preventing the horizontal shift that you describe).
body {
overflow-y: scroll;
}Incidentally, I notice that your galleries currently have widths of 111% (larger than the width of the parent containers).
If you need to increase the widths of your galleries, then I would recommend setting your gallery widths to 100% (so that they fill the parent containers) and then increase the widths of the parent containers. Otherwise, give your galleries fixed pixel value widths (and ensure that they are not larger than the widths of the parent containers).
Good news! Thank you for posting back to let me know.
Your gallery currently sets expandInNewPage="FALSE". Try setting expandInNewPage="TRUE" (or expandInNewPage="AUTO") instead.
Also, your web page does not have a <meta> viewport tag.
If the suggestion above does not help, try using one of the <meta> viewport tags from my post above to see if this makes a difference.
If you are using the 'index.html' page generated by JuiceboxBuilder-Pro, try removing the following line of code from the <head> section.
<meta name="viewport" content="minimal-ui">You might also like to try changing this line of code for something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">There is also a known bug (which should hopefully be fixed in the next version of Juicebox) whereby the scale of the embedding page can change depending on the value of the expandInNewPage configuration option.
Try changing expandinNewPage to TRUE or FALSE (depending on what you already have it set to) to see if this helps.
If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.
If you have changed no Juicebox files and your web server has made no changes, then the problem must logically be with Flickr itself.
I have done a quick search on the Flickr forum and it does, indeed, look like the problem is with Flickr. They are aware of the issue and are working on fixing it.
Please see this Flickr forum thread for further details.
You can change the font size of the image title using CSS such as:
.jb-caption .jb-caption-title {
font-size: 20px !important;
}... and you can change the font size of the image caption using CSS such as:
.jb-caption p {
font-size: 10px !important;
}You can use the developers tools (usually F12) in modern browsers to determine which classes to modify.
(1) There is no configuration option which allows for the font size of the Gallery Title to be changed.
However, you can change the font size of the Gallery Title using CSS. Try adding the following code to the <head> section of your gallery's web page (changing the value for the 'font-size' as appropriate):
<style type="text/css">
.jb-flag-large-screen-mode .jb-area-large-mode-title {
font-size: 50px !important;
}
</style>(2) When the image number is displayed, the caption will be centered in the remainder of the caption area (the part not taken up by the image number). The area required for the image number is always reserved to ensure that long captions that need to be wrapped do not overlap the image number.
If you want to push your caption along a bit, you can add non-breaking spaces ( ) to the the start of your caption text, for example:
<caption><![CDATA[ Caption text goes here.]]></caption>I notice that you have increased the dimensions of your thumbnails (thumbWidth and thumbHeight) from the default values of 85 to 100.
There is still not enough room on your iPhone screen to display 3 columns of thumbnails at these dimensions.
Try reducing the values of thumbWidth and thumbHeight to 85 and you should see a grid of 3 x 3 thumnails.
Unfortunately, this is due to a known bug but it has already been addressed and will be fixed in the next version of Juicebox-Pro.
In the meantime, the only workaround I have come up with is to change the contents of the relevant container using JavaScript.
Unfortunately, because the problem is with dynamically generated code, the substitution cannot be made as soon as the DOM is ready (as the container will not yet exist on the page) and because the problem is with the Splash Page rather than with the gallery itself, there is no Juicebox-Pro API method to check when the Splash Page rendering is complete. Therefore, I have had to use a timeout to delay the substitution until the Splash Page is likely to have been completely rendered. This is by no means an ideal solution but it might work for you until the next version of Juicebox is released which will include the fix for the problem.
Try the following code:
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
var elements = document.getElementsByClassName('jb-splash-view-glry');
var element = elements[0];
element.innerHTML = 'Click to open gallery.';
}, 1000);
});
</script>1st, even though I've upgraded to 1.4, my gallery is still only displaying 2 columns and not 3.
There is not enough width in an iPhone's browser to display 3 columns of thumbnails as well as the thumbnail navigation buttons (which your gallery displays). If you hide the thumbnail navigation buttons by setting showSmallThumbNav="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section), you should then see 3 columns of thumbnails. (Users can still swipe to navigate between thumbnail pages and the thumbnail paging text will indicate that there are other thumbnail pages to explore.)
2nd, I use a logo at the top of my thumbnail screen. When I pull up a photo and then go back to the thumbnail screen, the logo has disappeared.
Thank you for reporting this issue. I have been able to replicate the problem in a test gallery and have logged a bug report with the developers. At the moment, the only workaround would be to use text for your Gallery Title (instead of an image) which does not suffer from the same problem.
There are separate configuration options for displaying thumbnails and the Thumbnail Button in Small Screen Mode.
You can set:
showSmallThumbsButton: showThumbs,
showSmallThumbsOnLoad: showThumbs,For reference, a list of all Thumbnail Options can be found here.
If this does not help with your scenario, then please let me know in greater detail what you are looking to happen on mobile devices and I will try to help further.
would it be possible to add comments to photos
Yes. Juicebox-Lite supports unique titles and captions for each image in a gallery.
You can enter a title and/or caption for an image in JuiceboxBuilder-Lite by clicking on a thumbnail on the 'Images' tab and then entering the text in the 'Title' and/or 'Caption' fields.
the W3C validator didn't like the attribute "frameborder", but I haven't found anything to replace it
Your web pages use the HTML 5 Doctype Declaration and the frameborder attribute is not supported in HTML5 (although most modern browsers will deal with the attribute in HTML 5 web pages OK).
It you want your web pages to validate correctly, you should use CSS instead, for example:
<iframe src="http://www.example.com/index.html" width="800" height="600" style="border-style: none;"></iframe>I am glad that you have found a solution to your problem.
However, being that the problem was with Internet Explorer and knowing that you are using an iframe, you might have had successful results using the allowtransparency attribute within your iframe. Please note that this is a proprietary Microsoft attribute which will also fail validation. It will be applied to Internet Explorer and ignored in other browsers.
<iframe src="http://www.example.com/index.html" width="800" height="600" style="border-style: none;" allowtransparency="true"></iframe>Your screenshot shows your menu disappearing behind what looks like a YouTube video (not a Juicebox gallery).
(I have viewed your web site in IE11 and your menu seems to be in front of all your Juicebox galleries.)
It looks like you may need to increase the 'z-index' value for the menu elements on your web page.
In the code you posted, you have the following line:
z-index : 10;Try increasing the 'z-index' value to 9999 to ensure that your menu is always stacked on top of the web page's other content.
If you still have inconsistent results between browsers, then try checking your web page for errors with the W3C Markup Validation Service and fix any HTML errors reported.
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.
The image used for the Splash Page is not stretched. Rather it is scaled-to-fill the area required. The image's aspect ratio is respected (the image is not distorted) but if the aspect ratio of the image does not match that of the Splash Page area itself, then cropping will occur.
Other possible options (which are currently not available) might be to stretch the image to fill the area (which may distort the image) or scale-to-fit (which may result in blank space at the top and bottom or to the left and right of the image, depending on the aspect ratios in question).
If you would like to make any suggestions for future versions of Juicebox, then please post them in the Feature Requests forum thread. This keeps them all together and ensures that they are not overlooked. Thank you.
so closed pb...
That's good to hear. Thank you for letting me know.
If the 'Resize Images' and 'Use Watermark' checkboxes are both deselected and you add GIF or PNG files to a gallery, then the resulting images (in the 'images' folder) will be your original GIF or PNG files but with incorrect file extensions (making them look like they are JPG files).
I have logged a bug report and this should be fixed in the next version of JuiceboxBuilder.
Unfortunately, the only workaround for this bug at the moment would be to change the file extensions of the images in the 'images' folder and also change the corresponding imageURL entries in the gallery's 'config.xml' file.
(A batch process in a file renaming program and a single global search and replace action in a text editor should work fine.)
Thank you for pointing out this problem.
This looks like a bug (the gallery title should not overlap the thumbnails) and I have notified the developers. It should hopefully be fixed in the next version of Juicebox-Pro.
Is there an option to not show the gallery title in Small Screen mode?
There is no specific configuration option to hide the Gallery Title only in Small Screen Mode but you could achieve this by adding the following CSS to your gallery's web page:
.jb-idx-ssm-title-wrapper {
display: none;
}Yes (or you could just remove the sourcePath attribute completely).
However, if you do so and JuiceboxBuilder-Pro has to re-process the images, then it will have only the images in the 'images' folder to work with which may not be of as high a quality as the original source images (if they have already been resized).
Despite identical settings, it has tiny thumbnails (nine/row in both Portrait and Landscape), and tiny text & controls.
Your Africa gallery uses Juicebox-Pro v1.4.0 but your Aviation gallery uses Juicebox-Pro v1.3.3.
Upgrade your Aviation gallery to Juicebox-Pro v1.4.0 by replacing the gallery's 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.4.0 download zip package ('juicebox_pro_1.4.0/web/jbcore/').
Thumbnail Paging Text is not set, but shows.
Your galleries set showSmallPagingText="TRUE". If you do not want the thumbnail paging text to be displayed in Small Screen Mode, then set showSmallPagingText="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).
Gallery Title is set to centre but appears on the left.
The galleryTitleHAlign configuration option (which affects the horizontal alignment of the Gallery Title) is applied only in Large Screen Mode. In Small Screen Mode, the default value of LEFT is always used.
You're welcome!
For others reading this and experiencing a similar problem, WP-Juicebox requires that allow_url_fopen is enabled in the web server's PHP settings (PHP_INI_SYSTEM). The default value for this configuration is '1' (enabled).
WP-Juicebox uses simplexml_load_file to fetch the images from Picasa's web servers and this PHP function internally relies on allow_url_fopen being enabled.
If you create a gallery and edit it at a later date, JuiceboxBuilder-Pro will reuse the source images (to create new images and thumbnails for the gallery) only if you do anything on the 'Images' tab that requires the images to be reprocessed (for example resizing them and adding or removing a watermark).
If you open an existing gallery to edit it and change only configuration options (on the 'Customize' tab), then the images in the gallery will remain untouched.
If you want JuiceboxBuilder-Pro to reprocess the images (to use new versions of your source images), a quick and easy way to do so would be to select and then immediately deselect the 'Use Watermark' checkbox on the 'Images' tab.
Please note that JuiceboxBuilder-Pro stores the location of the source images (using sourcePath attributes to the <image> tags) in the gallery's 'config.xml' file when the gallery is initially created. If the images need to be reprocessed when editing a gallery, the source images will be used only if they still exist in their original locations on your hard drive. If the source images have been moved or renamed, JuiceboxBuidler-Pro will use the images in the gallery's 'images' folder instead.
I just purchased the pro version and wonder how I can remove the JuiceBox logo from the bottom right hand corner.
If you see the Juicebox logo at the bottom right of your gallery, then your gallery is still a Juicebox-Lite gallery. The Juicebox badge/link is displayed in all Lite galleries but not in any Pro galleries. If you create a gallery with JuiceboxBuilder-Pro, then the resulting gallery will be a Pro gallery.
Upgrade your existing gallery to Pro and the logo will be removed. To do this, either:
(1) Open and re-save your gallery (on the 'Publish' tab) in JuiceboxBuilder-Pro.
.. or:
(2) Replace your gallery's 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro download zip package ('juicebox_pro_1.4.0/web/jbcore/').
My other question is about the gallery title colour, in the preview it appears as white but when I upload it to my site it appears to be grey and due to the background colour it makes it unreadable.
First of all, make sure that your online gallery uses the same configuration options as the gallery on your computer.
If you are updating a gallery and are in any doubt as to whether the existing files on your web server are being overwritten, try deleting the gallery from your web server first before uploading the new version in its place. (When deleting anything from your web server, please make a backup copy first, just in case anything goes wrong and you need to reinstate the files.)
Also, check to see if you have any global CSS rules (affecting the font color) on your web page that the gallery may be inheriting. If so, apply these rules only to elements on your web page which require them through use of ids and classes.
If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.
@kilooloogung
1. I don't get a Back button on iPhone 5, making getting out of a Gallery convoluted
Your gallery currently sets showSmallBackButton="FALSE". Set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section) to display the Back Button in Small Screen Mode.
2. I don't get Autoplay options on iPhone 5 or iPad Air (OK on desktop)
Your gallery AutoPlays on load when I view it on an iPod Touch 4 (I do not have an iPhone 5 to test) and the AutoPlay Button is displayed in the Button Bar and functions fine. (Tested in both Mobile Safari and Chrome .)
Try clearing your browser's cache before reloading your gallery to see if this helps.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.