You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The image used for the Facebook thumbnail is taken from the web page's Open Graph og:image meta tag.
When creating a gallery with JuiceboxBuilder-Pro, the application inserts an og:image meta tag into the gallery's 'index.html' page. However, this will not be present in a WordPress page. In order to insert an og:image meta tag into your WordPress pages, you can use a plugin such as one of the ones in this page of plugin search results.
What version of JuiceboxBuilder-Pro are you using ('Help -> About JuiceboxBuilder-Pro...')?
The current version is v1.4.0. If you are not already using v1.4.0, then please try upgrading following the instructions here.
If you are already using v1.4.0, then it certainly sounds like something is amiss. I cannot replicate the problem. Dragging and dropping images into a new order works fine for me, as do the 'Images -> Sort' options.
Try uninstalling and reinstalling JuiceboxBuilder-Pro to see if this helps.
Does this happen with all galleries (try creating a new sample gallery with a few images in JuiceboxBuilder-Pro) or just certain ones?
You could use use the API method toggleThumbs() when the API event onExpand() is fired as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="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',
showExpandButton: 'TRUE',
showThumbsButton: 'TRUE',
showThumbsOnLoad: 'TRUE'
});
jb.onExpand = function(expanded) {
jb.toggleThumbs();
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I'm surprised to not see my answer of yesterday
I'm not sure what might have happened. (I did not delete any of your posts.) Perhaps there was a timeout which resulted in your post not being entered.
because I had seen what you say now, had corrected my CSS file, and as I was entirely satisfied of the result
That is great to hear. I have now marked this query as SOLVED.
It would certainly be safe to change it back when the bug has been fixed and you upgrade your gallery to the next version of Juicebox.
However, whether you need or want to change it back depends on how you want your gallery to behave when it is expanded (ie. whether or not you actually want the gallery to expand in a new page or not).
For more information on the expandInNewPage configuration option, please see here.
Opening a gallery (created in Lightroom or by any other method) in JuiceboxBuilder-Pro should not change the order of the images (unless you change the order yourself by dragging and dropping thumbnails on the 'Images' tab or by using the 'Images -> Sort' options from the drop-down menu at the top).
JuiceboxBuilder-Pro should just read the list of images from the 'config.xml' file and initially display them in the order that they are listed in.
Any additional images you add to a gallery in JuiceboxBuilder-Pro are added to the end of the gallery. They are not automatically put into alphabetical (or any other) order. However, once you have added all the images for your gallery, you can re-order them using the 'Images -> Sort' options from the drop-down menu at the top.
In Touch Input Mode, Juicebox automatically uses a slide image transition as this best matches the slide gesture used on mobile devices to navigate between images in a gallery.
This cannot be overridden. It is possible to force Juicebox to use Large Screen Mode on all devices and in all browsers (by setting screenMode="LARGE") but it is not possible to force Juicebox to use Mouse Input Mode and the imageTransitionType configuration option requires both Large Screen Mode and Mouse Input Mode.
(This is documented in the description of the imageTransitionType configuration option in the Main Image Options section of the Config Options page.)
Only applies for Large Screen Mode and Mouse Input Mode.
Have you tried setting expandInNewPage="TRUE" yet? The gallery on the zoomed-in page you quoted above still uses expandInNewPage="FALSE".
I realise that this does not sound like it will solve the problem (as it does not seem to be directly related to the functionality of the expandInNewPage configuration option) but this is the bug I referred to in my first post and I believe that setting expandInNewPage="TRUE" may solve your problem (as unlikely as it sounds). My own tests suggest that this should work.
(Be sure to clear your browser's cache after making the change and before reloading your web page to ensure that your browser is fetching and using the most recent versions of your gallery files.)
I have the code set for no "www.", but what if someone does use "www", how can I make the slideshow code able see both?
Try the following embedding code. The leading slash in the paths denotes your root directory and it should work for both http://johnstonsigns.com and http://www.johnstonsigns.com.
<!--START JUICEBOX EMBED-->
<script src="/JESCO-slideshow/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: '/JESCO-slideshow/',
containerId: 'juicebox-container'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Also, I do have the index.html file in with the slideshow and if I click on it, I can view it. I'd still prefer that someone not see the file content by getting the index list. Anyway to fix this?
If you want to disable the directory listing display, this can be done at web server level.
Log into your web hosting account's CPanel and go to the 'Advanced -> Index Manager' option where this behavior can be changed.
Otherwise you can use a .htaccess file (on an Apache web server). Just do a web search with terms such as 'directory listing .htaccess' and you will find several tutorials.
The problem is with the vertical scroll bar on the entire page (not an element on the page).
The only way to prevent the problem is to apply the CSS rule to the 'body' tag as in my post above.
Please let me reassure you that the 'juicebox.js' file is completely clean and contains no malware or virus.
What you are reporting is a false positive (possibly due to the fact that the JavaScript file is packed and obfuscated, primarily to reduce its size).
If you run the Juicebox-Lite 'juicebox.js' file through Virus Total, you will see that it comes out 100% clean with a Detection Ratio of 0/50.
Here are the results.
It sounds like you may need to contact your web host and ask them to allow the 'juicebox.js' file to be loaded on your web site.
but it won't play on Firefox 29.0
Juicebox galleries should display fine in Firefox 29.0.
If you use absolute paths in your gallery's embedding code which hard-code any domains or subdomains, make sure that you access your web page using the same address.
For example, if you have a baseURL such as http://www.example.com/, then the gallery will display only if you go to http://www.example.com/ and not if you go to http://example.com/. This is due to the JavaScript same-origin policy. Use relative paths instead.
Also, If I go to the root file address to play just the slideshow, I get an index listing rather than the slideshow playing.
This sounds like you might be doing to a directory which does not contain the gallery's 'index.html' file. Make sure that your gallery's 'index.html' file has been uploaded along with your other gallery files.
If you continue to experience difficulties, then in order to troubleshoot further, I would need to see the gallery live on your web server so please post the URL to your gallery so that I can take a look and help further.
Now marked as [SOLVED]. Thank you for letting me know.
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.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.