You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Once the bug has been fixed, you will be able to set buttonBarPosition="OVERLAY_IMAGE" and captionPosition="BELOW_IMAGE" (for the Button Bar to autohide and for the caption area to always be displayed).
If you would like to be notified when new versions are released, then please join the mailing list at the foot of our homepage, keep an eye on our Facebook page, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.
Thank you for sending me a screenshot of your problem.
From the look of the screenshot, it certainly looks like Mobile Safari is having a problem with your percentage-width iframe.
What generation of iPad do you have and what version of iOS does it have installed? Perhaps there is a problem with your particular version of Mobile Safari which can be fixed by upgrading your version of iOS.
I suspect that you might have similar sizing issues no matter what content you load into your iframe.
Try loading a different web page (such as http://juicebox.net/) into your iframe to see how your main page looks.
Does the size of the iframe look OK in Mobile Safari with content other that the gallery loaded into it?
Your iframe has a width of 100% but the browser will need to know what its actual width should be 100% of, so please make sure that all parent containers of your iframe have widths defined using CSS. Also, try including the dimensions of your iframe's parent containers as inline CSS (similar to the note for Using Percentage Heights but with widths instead).
This forum thread regarding "How to get an IFrame to be responsive in iOS Safari?" might also be of interest: http://stackoverflow.com/questions/2308 … ios-safari
However, I would still recommend embedding your gallery directly in your web page (rather than using an iframe).
Maybe you could try this again.
With regard to the scrolling issue, if you can scroll past the gallery in my test page ([Test gallery removed.]), then the problem may lie somewhere within the code on your web page.
If you load the gallery into an iframe, then try embedding the gallery directly into your web page to see if the scrolling problem still occurs. (There may be some kind of problem scrolling past iframes on a Windows phone.)
If you already embed the gallery directly in your web page, then try removing all external CSS and JavaScript files from your page, one at a time, and check the functionality after removing each one until you find the source of the conflict.
I hope these notes help.
It sounds like you might have a CSS conflict (global CSS rules on your web page that the gallery is inheriting).
However, if this were the case, then I would expect results to be consistent across different browsers.
First of all, please clear the caches of both your browsers to ensure that they are both fetching and using the most recent versions of your web pages from your server.
Differences in the display of web pages in different browsers can often be attributed to HTML errors on the page (some browsers may be more tolerant towards errors than others and might handle them differently).
Try validating the code on your web page with the W3C Markup Validation Service and fix any errors reported. This may help. If not, then at least we can eliminate HTML errors as being a contributing factor to your problem.
Unfortunately, I do not have access to an iPad on which to test so if you continue to experience difficulties, perhaps you could upload screenshots somewhere of what you see in both Chrome and Mobile Safari so that I can at least see the problem for myself.
Many thanks.
Also, it's just a hunch but I've seen problems with percentage-dimension iframes before in Mobile Safari (though usually with height rather than width).
Try changing:
<iframe src="gallery/welcome/index.html" width="100%" height="275" frameborder="0" scrolling="no"></iframe>... to:
<iframe src="gallery/welcome/index.html" style="width: 100%;" height="275" frameborder="0" scrolling="no"></iframe>... to see if it helps.
It might not make a difference but it should be quick and easy to try.
The 'encode_url' function is, indeed, missing from the 'wp-juicebox.php' file. It will be reinstated in the next version.
In the meantime, my workaround above should work fine.
I cannot actually find an instance where the current version of NextGEN Gallery (v2.0.74) produces a URL which needs to be encoded. I'm pretty sure the 'encode_url' function is required only for backwards compatibility with older versions of NextGEN Gallery.
Many thanks for your suggestion.
However, I would encourage you to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.
Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
If you have a 100% x 100% responsive gallery (like the gallery in your screenshot), then the size and shape of the gallery is entirely dependent on the user's browser window. You have no control over this at all.
If the image area within the gallery has a very different aspect ratio to that of the image being displayed, then there will be space at the top and bottom or left and right of the image.
You could either:
Set imageScaleMode="FILL" to fill the image area with the image (although cropping will occur), or...
Set your gallery's height to be a fixed pixel value (rather than a percentage) so that the image area is likely to have an aspect ratio closer to that of the image being displayed.
I hope this helps.
Thank you for reporting this problem.
I have logged a bug report with the developers and it should hopefully be fixed in the next version of Juicebox-Pro.
Unfortunately, the only workaround in the meantime would be revert to setting buttonBarPosition="OVERLAY" (although I realise that this was what you were trying to avoid in the first place).
Thank you for reporting this problem.
A quick fix would be to open WP-Juicebox's 'config.php' file in a plain text editor and change lines 77 - 78 from:
$image_url = $Juicebox->encode_url($base_url . $image_basename);
$thumb_url = $Juicebox->encode_url($base_url . 'thumbs/thumbs_' . $image_basename);... to:
$image_url = $base_url . $image_basename;
$thumb_url = $base_url . 'thumbs/thumbs_' . $image_basename;As long as your image filenames contain only web-safe (alpha-numeric) characters and not reserved characters, then everything should work OK.
However, I will investigate this problem further and will post back with my findings.
... especially if the caption does not fit it will cut off.
Try increasing the value of maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).
When captionPosition="BELOW_IMAGE" (or BOTTOM or BELOW_THUMBS), the value of maxCaptionHeight is used as the actual height of the caption area.
Maybe you can add an option to disable autohide the caption while remaining the autohide for the other overlay elements in a future version?
Please post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.
Another thing I noticed is that the controls (autoplay, sharing buttons etc) are positioned in the stage area (as an overlay in my case) and not positioned in the picture. Therefore sometimes they are outside of the picture if the gallery contains a smaller image then the other images. Is that something that could be fixed?
Try setting buttonBarPosition="OVERLAY_IMAGE" rather than using the default value of OVERLAY (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section).
If you set showInfoButton="TRUE" (to display the Info Button), then this overrides the default behavior of the overlay and the Button Bar will always be visible (so that a visitor to your site can toggle the remaining items on the overlay via the Info Button).
If you set showInfoButton="FALSE", then the entire overlay (including the Button Bar) can be hidden. It can autohide after a set amount of time (the value of the inactivityTimeout configuration option) and can disappear on mousing out of a gallery or tapping the screen on a mobile device (when showImageOverlay="AUTO").
The only way to hide the Button Bar when showInfoButton="TRUE" might be to use Juicebox-Pro API and JavaScript to apply custom CSS rules to internal Juicebox classes which I would not recommend as Juicebox would not know of such modifications and this may cause problems when the gallery is redrawn (for example when the gallery is expanded or when the browser window's size if changed).
There are at least a couple of other issues that would need to be overcome:
There is no Juicebox-Pro API method to make any changes when AutoPlay starts (or ends).
Even if you could hide the Button Bar when AutoPlay starts, you would need to manually code a solution for having the Button Bar reappear.
Unfortunately, Juicebox-Pro was not designed with such functionality in mind and trying to implement it might turn into a complex project fraught with difficulties.
Thanks a lot, that did it.
That's great!
Thank you for posting back to let me know.
WP-Juicebox searches the current page/post content (not the entire site's content) and if it discovers a Juicebox shortcode, only then will it load the 'juicebox.js' file into the page. This avoids the 'juicebox.js' file from needlessly being loaded into pages where there is no gallery to display. However, it does not check sidebar widget content.
The autohide functionality affects all elements on the overlay. It is not possible to prevent the captions from autohiding if captionPosition is set to either OVERLAY or OVERLAY_IMAGE (other that to prevent everything from autohiding by setting inactivityTimeout="0" or showInfoButton="TRUE").
If you want to always show the captions (but still autohide overlay elements), then you will need to place the captions somewhere other than on the overlay, ie. set captionPosition to BELOW_IMAGE, BOTTOM or BELOW_THUMBS (but not OVERLAY or OVERLAY_IMAGE).
@pamschinnery
It sounds like you have entered your gallery's embedding code as plain text rather than as raw HTML code.
Please check your input mode in Dreamweaver. You should insert your HTML embedding code in 'View -> Code' mode rather than 'View -> Design'.
Also, there is a note for Dreamweaver users in the Juicebox Embedding Guide here which you might find useful.
I hope this helps.
If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
I'm pretty sure the warnings and errors are not being caused by WP-Juicebox.
It looks like WP-Juicebox is just being caught up in the mix.
Maybe you could create a couple of new WordPress installations on your web server alongside your existing one but essentially just for testing purposes (with addresses that no-one would know about).
You could install and activate WP-Juicebox in only one and keep the other as a control.
Try creating a few galleries (in the installation that you have installed WP-Juicebox into) and tests posts (in both) and check your web server error log after a while of testing and using both new installations.
If you see no errors at all relating to either of the two new WordPress installations, then the problem is likely to be due to your original WordPress installation.
If you see errors relating to both new WordPress installations, then the problem is likely to be due to your web server.
If you see errors relating to only the new WordPress installation that you have installed WP-Juicebox into, then the problem is likely to be due to WP-Juicebox (although I think that this is very unlikely).
I realise that this will require a bit of work and your new WordPress installations will not get any traffic other than your own testing (which will result in less warnings and errors in the log) but it might help to track down the cause of the problem.
Since installing juicebox we are getting a lot of intermittent Server errors on our web site.
I think the clue here is the word 'intermittent'. The code on your web site does not change and should give consistent results. If there is any inconsistency, then it could certainly be due to server problems.
WP-Juicebox was designed to embed a gallery in a page or post but, unfortunately, not a sidebar widget.
If you want to force the 'juicebox.js' file to be loaded into all your web pages (which is all that should be required for your widget gallery to be displayed), then open the plugins's 'wp-juicebox.php' file in a plain text editor and change line 31 from:
add_action('the_posts', array(&$this, 'shortcode_check'));... to:
add_action('wp_enqueue_scripts', array(&$this, 'add_scripts_wp_core'));Please note that the line numbers above refer to the current version of WP-Juicebox (v1.4.3.0).
The method of reordering images in a gallery will depend on how you are building your gallery.
If you are using JuiceboxBuilder-Pro, then you can reverse the order by going to 'Image -> Sort -> Reverse' from the drop-down menu at the top.
If you just want to change the order of a few images, you can drag and drop the thumbnails into a new order on the 'Images' tab.
Images will be displayed in the gallery in the order in which they are listed in the XML file (unless randomizeImages is set to TRUE).
Everythings works fine, but i dont want an thumbindex button.
As well as setting showThumbsButton="FALSE" for Large Screen Mode, you will also need to set showSmallThumbsButton="FALSE" for Small Screen Mode.
And the imageTransitionType: "CROSS_FADE" not work under on iPhone 6 and iPad Air2 under iOS8
The imageTransitionType configuration option works only in Mouse Input Mode (as noted on the Config Options page). In Touch Input Mode, imageTransitionType uses the default value of SLIDE which best matches the swipe gesture used to navigate between images. This cannot be changed.
WP-Juicebox uses standard PHP and custom WordPress methods and does not use any specific CGI scripts (which might ordinarily be stored in a 'cgi-bin' directory) as defined by GoDaddy here.
It looks like either a problem with the core WordPress installation or a server (or PHP configuration) problem, which GoDaddy might be able to look into further for you.
Is there a way to import image titles or captions from a text file?
There is no automated method for extracting image titles or captions from a text file. (Neither JuiceboxBuilder nor any of the plugins have such functionality.)
With JuiceboxBuilder, you can automatically use the image file name or IPTC data (or enter text manually). (If you use Adobe Photoshop to enter your IPTC data, then use the IPTC Document Title field for the image title and the IPTC Description field for the image caption.)
It would be possible to build a gallery's XML file, extracting image titles or captions from a text file, using a script of some kind but this there is no such automated solution available currently. Also, the solution may may be unique to your own scenario. It is perhaps unlikely that other users would have text (that they would want to use for image titles and captions) stored in a file using the same format as yours.
Can an image gallery handle more than 1200 images?
Yes. Juicebox-Pro features an imagePreloading configuration option (which can be set to PAGE, NEXT, ALL or NONE) to determine how many images are preloaded by the user's browser (to prevent the browser from trying to cache all gallery images as soon as the gallery loads).
A lot of these warnings and errors do not seem to be related to WP-Juicebox, for example:
[Tue Feb 17 19:03:58 2015] [9497277] [core:error] [client 142.54.183.130:57623] End of script output before headers: wp-comments-post.php, referer http://theheinrichteam.com/carmel-valle … y-morning/
The error above refers to the 'wp-comments-post.php' file (not part of WP-Juicebox).
[Tue Feb 17 23:06:07 2015] [9497277] [fcgid:warn] (104)Connection reset by peer: [client 162.200.145.253:52986] mod_fcgid: error reading data from FastCGI server, referer http://www.zillow.com/homes/for_sale/pm … /?view=map
The warning above (a CGI warning) seems to be related to your mapping functionality.
It looks like there are too many different warnings and errors for them all to be caused by a single plugin.
Have you tried temporarily deactivating WP-Juicebox to see if the warnings and errors continue?
Also, have you upgraded your WordPress installation recently? If not, then you might like to try upgrading to the current version (v4.1.1) to see if this helps.
My phone is a Nokia 635 running Windows 8.1 and Internet Explorer...
Thank you for the additional information.
... the gallery you asked me to check loads up but I just get 2 static images in middle of page not scrolling demo as on laptop with Windows 8.1 and Internet Explorer.
If I understand correctly, you do not see the images automatically change in the [Test gallery removed.] gallery. Is this correct? They should. The gallery sets autoPlayOnLoad="TRUE" and uses exactly the same configuration options that your own gallery uses. (I copied and pasted the options from your own gallery's XML file.) If you scroll down the page and then scroll on top of the gallery to scroll down further, the gesture may be interpreted as a swipe (to change the image) and this will stop the AutoPlay. This might be what is happening.
Also, does the original problem you posted above ("... I have another news section on the same page and struggle to page down and see this...") happen in the [Test gallery removed.] gallery?
Wonder if the problem is due to multiple grid containers, the template uses the 960 grid system. On the www.midlandenglishsettersociety.co.uk the gallery is embedded straight into the standard width <div class="grid_12"> but is nested on the new gbs site
A nested gallery should cause no problems with either page scrolling (or AutoPlay options).
It is certainly possible, though, that there could be a CSS or JavaScript conflict with some code on your web page.
The only way to isolate a gallery from all other code on your web page would be to load it into an iframe (which you have already done and which seemed to work so this suggests that there may, indeed, be some CSS or JavaScript code on your web page which is adversely affecting the gallery).
You could try removing CSS and JavaScript code from your web page to see if you can find the source of the conflict but it sounds like you have found a suitable workaround that you are happy with and that's absolutely fine.
@wspollack
That was just text from the original demo pages I used as a template.
The new test pages I created were just to check whether the original poster could scroll past a gallery on his Windows phone which he doesn't seem to be able to do in his own web page.
The text referring to the Expand Button was irrelevant (and perhaps confusing). I have now removed it. Thanks for pointing it out.
I'm glad it's not a problem that you are too worried about but if there is a bug in Juicebox, we'd still like to know.
I would be very grateful if you could take a little time to check out this sample web page: [Test gallery removed.]
It is essentially a Juicebox-Pro v1.4.3 gallery embedded directly into a web page (rather than using an iframe) using exactly the same configuration options that your gallery does, sandwiched between two large amounts of text (but no other external JavaScript files or other HTML elements).
... think it is due to automation of photo gallery?
I doubt the AutoPlay is the reason for your problem but, just to be sure, here is the same setup as above but with autoPlayOnLoad set to FALSE: [Test gallery removed.]
Are you able to scroll to/through/past the sample galleries on your Windows phone?
Does the page ever jump to the top whilst scrolling?
What exactly is the device that your are using and what browser (and version number) do you use?
Many thanks for your help.
We recently uploaded a hotfix version of Juicebox (whose 'juicebox.js' file is labelled as v1.4.3.2) which addresses a problem whereby scrolling down a page containing an embedded gallery jumps to the top. This problem was known to happen in Mobile Safari in iOS 8 but please try upgrading your gallery to the latest version to see if it helps on your Windows phone, too.
Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.
Please note that if you initiate a scroll gesture on top of the gallery itself, then this may be misinterpreted as the start of a gallery-specific gesture (such as a swipe to navigate between images) so you might need to be quite precise with your gestures.
If you have an iframe with fixed dimensions, then the iframe will be displayed at those dimensions in all browsers and on all devices.
You could certainly try using percentage dimensions for your iframe (as penum suggests above) but if the iframe is nested within any parent containers with fixed dimensions, then the iframe's own dimensions will become fixed, e.g. 100% x 800px = 800px.
You might like to take a look at this forum thread, entitled "How to get an IFrame to be responsive in iOS Safari?". Although you have a Windows mobile device, the principles will be the same and it might help with your problem. http://stackoverflow.com/questions/2308 … ios-safari
Another thing you might like to try is to use JavaScript to listen for a change in the user's browser window size and then assign new dimensions to your iframe accordingly.
There are examples of this technique in the Using a Resizable Gallery with a Header support section. In the online examples, JavaScript is used to dynamically set the gallery's dimensions. You could copy and modify the code as required to set your iframe's dimensions instead.
Also, as you have already uploaded your complete gallery folder to your web server, you might like to consider embedding your gallery directly on your page (using the baseUrl method as documented here) rather than using an iframe.
You could replace your iframe code with something like the following:
<!--START JUICEBOX EMBED-->
<script src="/gallery/welcome/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: '/gallery/welcome/',
containerId : 'juicebox-container',
galleryWidth : '100%',
galleryHeight : '600',
backgroundColor: '#222222'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Just doing this and setting your gallery's width to 100% (so that it fills the width of its parent container), might be enough to solve your problem.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.