3,001 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

It would be a little difficult to simply replace the image that is currently on your web page with a Juicebox gallery.
The image you refer to is not displayed with a standard HTML <img> tag but is actually a background (set via CSS) for a <div> which contains other content (such as your navigation menu).
If you replaced this <div> with a Juicebox gallery, then you would lose all its content.
I would recommend that you keep the 'header-wrapper' <div> in place, remove the background image by deleting the following entries from the #header-wrapper section in your styles.css file:

background: url('../sydney-wedding-photography-images/sydney-wedding-photo-video-sydney-harbour.jpg');
background-size: cover;
background-position: top center;
background-image: url(../sydney-wedding-photography-images/sydney-wedding-photo-video-sydney-harbour.jpg);

... and embed your Juicebox gallery (following the instructions in the Embedding Guide) below your <nav id="nav"> or your <header id="header"> section.

I would recommend that you embed your gallery using the baseUrl method of embedding as documented here. This method of embedding allows you to keep the gallery files inside the gallery folder and you would upload the entire gallery folder (not just the contents) to your web server. Also, it does not matter where on your web server you upload your gallery folder to as long as the paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

As an example, if you have a gallery folder named 'my_gallery_folder' and you upload the entire gallery folder to your web site's root directory, then you would be able to use the following embedding code. (This code could be used in any page throughout your web site without modification. The leading slashes in the paths denote your root directory.)

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/my_gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If you want to leave your current home page in place whilst you try things out, just make a copy your 'index.html' file (in the same directory) and use the copy as a work in progress.
Your 'header-wrapper' <div> currently has a fixed height (the image does not scale when you change the browser window's height) but is responsive horizontally so to do likewise with your gallery, just give your gallery a fixed height and a width of 100%.

I hope this helps.

Go to forum: Juicebox-Pro Support

3,002 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

There seems to be a few different issues going on here and I think we might be at cross purposes with at least one of them.

When you originally said "I have another news section on the same page and struggle to page down and see this", I thought the problem was that you could not scroll down past the gallery to see what was below the gallery on the page.
This is why I created the test page [Test gallery removed.] - to see if you could scroll down the page past the gallery to see the text below the gallery. The fact that the gallery had an automated slideshow was just incidental (I used it because you used it in your own gallery and wondered if it could be the cause of the problem: "think it is due to automation of photo gallery?"). We seem to have been sidetracked into a problem with AutoPlay (the automated changing of images within a gallery) rather than the original 'scrolling down a page' issue.

As I noted earlier, maybe the AutoPlay is stopping when you scroll down the page and touch the gallery. (If you tap on the gallery to scroll down the page, Juicebox might see this as the start of a swipe gesture to change the image and the AutoPlay will stop.)

It might be a good idea to take a step backwards just now and clarify a few things.
Using my test page: [Test gallery removed.]
(1) On your iPad, can you scroll down past the gallery to see the text below the gallery?
(2) On your Windows phone, can you scroll down past the gallery?
(3) On your iPad, does the AutoPlay work (do images change automatically)?
(4) On your Windows phone, does the AutoPlay work?

For (3) and (4) above you could try this test gallery instead: [Test gallery removed.]
Same gallery, just no text on the page so no need to scroll down the page and perhaps accidentally stop the AutoPlay.

Also, have you tried loading any other content into your iframe yet to see if your other layout problem is a general iframe problem or directly related to Juicebox?

I'm hopeful that we can narrow the problems down and figure out exactly what's going on.

Go to forum: Juicebox-Pro Support

3,003 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,004 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,005 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,006 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,007 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,008 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,009 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

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).

Go to forum: Juicebox-Pro Support

3,010 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,011 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

... 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).

Go to forum: Juicebox-Pro Support

3,012 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,013 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,014 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

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).

Go to forum: Juicebox-Pro Support

3,015 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

@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.

Go to forum: Juicebox-Pro Support

3,016 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,017 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

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).

Go to forum: Juicebox-Pro Support

3,018 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Lite Support)

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).

Go to forum: Juicebox-Lite Support

3,019 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,020 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,021 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Lite Support)

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).

Go to forum: Juicebox-Lite Support

3,022 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,023 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

3,024 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

@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.

Go to forum: Juicebox-Pro Support

3,025 Reply by Steven @ Juicebox

(29 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support