3,326

(5 replies, posted in Juicebox-Pro Support)

In order to investigate further, I will need some more information. Please post the URL to your WordPress website so that I can take a look.
It would also help if I had access to your WordPress installation and web server. If you are willing to allow me access, please let me know and I will send you an email so that you can provide me with your login details. Thank you.

3,327

(5 replies, posted in Juicebox-Pro Support)

First of all, please try clearing your browser's cache and trying again.
This will ensure that your browser fetches and uses the most recent versions of the WP-Juicebox files from your web server.

If this does not help, then please try temporarily disabling all plugins other than WP-Juicebox to see if this helps. It it does, then re-enable your plugins one by one (checking the WP-Juicebox functionality after each one) until you find the source of the conflict.

If you use the BulletProof Security plugin, then this may be the cause of your problem and you will need to add a skip/bypass rule to the .htaccess file in your root directory as follows:

# Juicebox skip/bypass rule
RewriteCond %{REQUEST_URI} ^/wp-content/plugins/wp-juicebox/ [NC]
RewriteRule . - [S=13]

If you do not use the BulletProof Security plugin, then please check your .htaccess file for an entry such as:

<Files *.php>
    deny from all
</Files>

If you find such an entry, either comment it out or remove it and WP-Juicebox should work as expected.

3,328

(1 replies, posted in Juicebox-Pro Support)

As all your image titles are just a single line of text, it might be easier to just increase the maxCaptionHeight so that the text is vertically centered within the caption area.

Otherwise, to vertically center an image title using CSS, you could try something like the following:

.jb-cap-content.jb-caption-title  { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Thank you for your suggestion.

In order to ensure that ideas for future versions are not overlooked by the developers, I would encourage you to post in the Feature Requests thread. Thank you.

3,330

(8 replies, posted in Juicebox-Pro Support)

@come_paglia

It looks like the following should work on your web page:

#nav li.menu-item  { 
    z-index: 9999;
}

3,331

(3 replies, posted in Juicebox-Pro Support)

All is good.

That's good to hear. I do not know what might have been causing the temporary glitch but I am glad that everything seems to be working OK at the moment.

3,332

(3 replies, posted in Juicebox-Pro Support)

On further investigation, the problem was not in finding a suitable CSS selector to attach the click handler to (the correct class is .jb-idx-thumb) but the fact that the class does not exist in the Document Object Model immediately after the Juicebox-Pro API event onInitCompete is fired (when the gallery should be complete and ready). The trick is to delay the setting up of the click handler (until such time as the .jb-idx-thumb class exists in the DOM) by using setTimeout.
Try the following which will open the current image's corresponding linkURL when either a thumbnail or main image is clicked.

<script>
    var jb = new juicebox({
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        imageClickMode: 'OPEN_URL'
    });
    jb.onInitComplete = function() {
        setTimeout(function() {
            $('.jb-idx-thumb').click(function() {
                var index = jb.getImageIndex();
                var info = jb.getImageInfo(index);
                var url = info.linkURL;
                window.location.href = url;
            });
        }, 500);
    };
</script>
<div id="juicebox-container"></div>

I have logged a bug report with the developers (regarding the fact that the gallery is not complete and ready immediately after onInitComplete is fired) and it should hopefully be fixed in a future version but the code above should work fine in the meantime.

3,333

(3 replies, posted in Juicebox-Pro Support)

Juicebox was not designed with this in mind (the ability to run some custom JavaScript code or to redirect to a new URL on clicking a thumbnail).

If it is possible to find a CSS selector (a class or id) for the thumbnails within Juicebox which you could attach a jQuery click handler to, then you could perhaps run some JavaScript code using the Juicebox-Pro API to get the index of the image currently being displayed when the element is clicked (and then act on the image index accordingly).

The code might look something like this:

<script>
    var jb = new juicebox({
        backgroundColor: '#222222',
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        galleryHeight: '400',
        galleryWidth: '600'
    });
    jb.onInitComplete = function() {
        $('CSS_SELECTOR').click(function() {
            var currentImage = jb.getImageIndex();
            switch (currentImage) {
                case 1:
                    window.location.href = 'http://www.example.com/';
                    break;
                case 2:
                    window.location.href = 'http://www.google.com/';
                    break;
                default:
                    window.location.href = 'http://www.juicebox.net/';
                    break;
            }
        });
    };
</script>
<div id="juicebox-container"></div>

Unfortunately, I have not yet found a CSS selector which works. This may be due to Juicebox having its own click hander on the thumbnails so it may not be possible but it might be worth investigating further. I hope this at least points you in the right direction.

3,334

(4 replies, posted in Juicebox-Pro Support)

The following demo gallery layouts are included as presets in the current version of JuiceboxBuilder-Pro: Colors, Embedded, Full, Hong Kong, Sharing, Simple, Slider, Top Left. (They can be selected from the 'Load Preset' drop down menu on the 'Customize' tab).

The XML files for galleries can usually be found manually by adding 'config.xml' to the demo gallery's URL.
For example, the 'Flat' demo gallery can be found here: http://www.juicebox.net/demos/pro/flat/
The 'Flat' demo gallery's XML file can be found here: http://www.juicebox.net/demos/pro/flat/config.xml

If you save the 'Flat' demo gallery's XML file to your hard drive, then you can open it as a preset via the 'Presets -> Load Preset...' option from the drop-down menu at the top of JuiceboxBuilder-Pro.

1) To add images to a gallery, I have to add them to the page, then delete them again so that they will only show in the gallery. Otherwise they'll show twice, as a regular image plus in the gallery. What can I do to avoid having to delete them from the page?

It sounds like you may be clicking 'Insert into post'. This is not necessary (and will include the images in the post outside the gallery). All that is required to include images in a WP-Juicebox gallery is to attach them to the post. Just drag and drop your images into the media window and after they have completed uploading, just close the media window using the cross in the upper-right corner.

2) More seriously, when expanding the gallery, the page title is not hidden but stays sitting on top of the image. What to do?

Unfortunately, there is currently a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug should hopefully be fixed in the next version of Juicebox.
In the meantime, there are a couple of workarounds:

(1) Set useFullscreenExpand="TRUE" (in the WP-Juicebox gallery settings interface section).
... or:
(2) Set expandInNewPage="TRUE" in (in the Pro Options text area in your gallery settings window). When the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page. Please note that this option is available in Juicebox-Pro only (and not in Juicebox-Lite).

@BrianP6

When the bug is fixed, it will be fixed for all browsers on all devices.
If you are asking if, currently (with the bug present), setting expandInNewPage="TRUE" will fix the bug on mobile devices, then yes, it will.
Setting expandInNewPage="TRUE" forces the gallery to be expanded on a new page of its own where the code from the embedding page can no longer conflict with the gallery's own code.
However, if you are using Juicebox-Lite, then your gallery will be using expandInNewPage="AUTO" (the default value for this configuration option) and on iOS devices, this setting will automatically expand the gallery on a new page anyway to avoid issues with incorrectly scaled content when switching between regular and expanded mode. Please see the Expand Gallery Behavior support section for more information.

3,337

(1 replies, posted in Juicebox-Pro Support)

Yes. Set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and you can have a unique URL for each image in your gallery.
For example, a URL to go directly to the 7th image in a gallery would look something like: http://www.example.com/gallery/#7
Please see the description of the enableDirectLinks configuration option in the General section of the Config Options page for a little more detail.

3,338

(16 replies, posted in Juicebox-Pro Support)

@ErikC & rounders

Thank you both for the additional information.
It looks like the problem is unique to Mobile Safari in iOS 8 (or at least iOS 8.0.2).
I have notified the developers of this and they will investigate further.

3,339

(496 replies, posted in Juicebox-Pro Support)

@Mikael P.

I understand your request for a quick and easy way to select a number of images. (Thank you for the suggestion.)
However, if you are familiar with HTML, JavaScript and PHP, you could perhaps achieve this functionality already using the Juicebox-Pro API and PHP session variables.
You could create a link (either within your gallery or elsewhere on your web page) to 'Add an image' to a selection list.
When clicked, the link would get the current image number (using the getImageIndex() API method) and pass it onto a PHP script which would add the image number to a PHP session variable array.
You could have further links (and separate corresponding PHP scripts) to display the current list of selected images to the user, reset the list and email the list to yourself.
As noted, knowledge of HTML, JavaScript and PHP would be necessary but it is possible (although it might turn out to be a rather complex project, especially if you wanted to extend the functionality by allowing the user to send you notes).

3,340

(16 replies, posted in Juicebox-Pro Support)

As I am unable to replicate this problem myself, I would appreciate some more information in order to narrow down the possible causes of this problem. (Perhaps the problem is specific to a certain browser under a certain version of iOS.)
If you could answer the following questions, that would be great. Thanks.

(1) What generations of iPad and iPhone do you use and what versions of iOS do they run?
(2) Do you see the problem happening in both Mobile Safari and Chrome or just in one browser? (If you have not yet tried Chrome, please do so to see if this makes a difference.)
(3) Does this happen only in pages with a Juicebox gallery or have you seen this happen in any other scrollable web pages which do not contain a Juicebox gallery?

3,341

(3 replies, posted in Juicebox-Pro Support)

Your audio plays fine in your gallery in IE11 so your gallery's audioUrlMp3 configuration option is set OK.
As noted in the Adding Audio support section:

Note - Audio options are not supported in Internet Explorer version 8 and below.

If you are using IE9 or later and still do not hear your audio track, then try clearing your browser's cache before reloading your gallery's web page to ensure that your browser is fetching and using the latest versions of your gallery files.

As you have discovered, you won't be able to put PHP code into the body of a WordPress code and have the code run.

Your style variable is currently a string (enclosed in quotes). It needs to be an object. Remove the surrounding quotes. (Also, there is no need to escape the double quotes.) Try the following:

var style = {
    baseUrl : "http://hella-stroh.de/jbgalleries/startseite/startseite/",
    containerId: "juicebox-container"
};

With regard to the common configuration options, the juicebox_style variable in your 'startseite.js' file is also currently a string rather than an object. It is not possible to add names to the Juicebox object as a string (like the PHP example). The PHP example slots in a chunk of text (server-side) before the code is parsed by the browser (client-side). The embedding code is fully formed (by the server-side PHP) before the browser even sees it. This is not the case with your JavaScript code.

Create an object with all your common configuration options (like the style object above) and then merge the two objects before feeding it to your new juicebox line. (You can keep the common configuration options object in your external JavaScript file but it should be an object rather than a string.)

For example:

var style = {
    baseUrl : "http://hella-stroh.de/jbgalleries/startseite/startseite/",
    containerId: "juicebox-container"
};

var common = {
    autoPlayOnLoad: "TRUE",
    showThumbsOnLoad: "FALSE"
};

for (var name in common) {
    style[name] = common[name];
}

new juicebox(style);

Basically when I view it on a phone, the images just hover over the text and the menu along the top is just hovering over the menu that is there, which is kind of messy.

I do not see this when viewing your sample post's web page in Mobile Safari on an iPod Touch.
The gallery's Splash Page displays as expected and the gallery displays and functions fine when the Splash Page is tapped.
Try clearing your browser's cache before reloading your gallery's web page to see if this helps.
Otherwise, please let me know what device and browser you see the problem in and, if possible, please upload a screenshot somewhere (and provide a link) so that I can see what you are seeing.

Also, are there settings that we can turn off in the non-mobile version (such as the sharing icons) so they won't get in the way.

Juicebox uses only one set of configurations for both Small and Large Screen Modes.
You can disable the Sharing Buttons by setting the Sharing Options to FALSE but this will disable in all browsers and on all devices.
A single tap on a mobile device's screen will hide the overlay (until tapped again) to clear the screen of all overlay components (Back Button, Button Bar, caption area).

Lastly, if I wanted to just use the Adobe AIR application to create the slideshow with my client, is there a way I can export the settings to be the text I would put into the pro settings section of the wp module?

If you create a gallery with JuiceboxBuilder-Pro, you can open the gallery's XML file in a plain text editor, copy the configuration options (the attributes to the opening <juiceboxgallery> tag) and paste them into the Pro Options text area of a WP-Juicebox gallery's settings window.
Please make sure that each configuration option is entered on a line of its own.
Also, please note that any Lite configuration options entered into the Pro Options text area will automatically be filtered out and the Lite values from the plugin's interface will be used instead.

3,344

(3 replies, posted in Juicebox-Pro Support)

Well spotted! I've corrected my post above. Thanks!

I'm hopeful that upgrading to WP-Juicebox v1.4.2.1 will solve the original posters problems.
Tweaking the imagePreloading config option is just something else to try to see if it makes any difference. Under normal circumstances, leaving imagePreloading at the default setting of PAGE should not slow down the initial loading of a gallery noticeably (and it should actually help to speed up navigation throughout images on the first thumbnail page).

3,345

(3 replies, posted in Juicebox-Pro Support)

It looks like you are using WP-Juicebox v1.4.2.0 and your images are sourced by NextGEN Gallery.
Please try upgrading to the latest version of WP-Juicebox (v1.4.2.1) which can be downloaded from the plugin's support page here.
Changes were made between v1.4.2.0 and v1.4.2.1 which should hopefully significantly speed up the loading of your NextGEN Gallery images.
You will not need to modify any of your galleries but you will need to ensure that you upgrade the Lite 'jbcore' folder within the plugin's files with your own 'Pro' version. (Instructions for upgrading WP-Juicebox to Juicebox-Pro can also be found on the plugin's support page.)
I do not know if this will solve the problem you report on expanding the gallery but you might like to try setting imagePreloading="NEXT" (in the Pro Options settings window) so that the browser preloads only one image at a time. (The default setting for imagePreloading is PAGE and this preloads all images on the current thumbnail page.)

3,346

(4 replies, posted in Juicebox-Pro Support)

The stripping of metadata from images resized by JuiceboxBuilder-Pro has been logged as an issue (but I do not know when it will be addressed).

3,347

(4 replies, posted in Juicebox-Pro Support)

First, Juicebox is stripping the ICC Profile from the image (it doesn't do this to unresized images).

When JuiceboxBuilder-Pro resizes images, it strips all metadata (EXIF, IPTC, ICC Profiles). If you need to retain metadata in your gallery's images, then the only option is to deselect the 'Resize Images' checkbox and allow JuiceboxBuilder-Pro to copy your original images across to the gallery's 'images' folder.
If you plan to use multi-size images and want to retain metadata, then you will need to create your own sets of images (in an imaging program such as Adobe Photoshop) and replace the ones generated by JuiceboxBuilder-Pro. If you are just creating one or two multi-size image galleries, this might be a possible workaround. As long as you allow JuiceboxBuilder-Pro to create multi-size images (and then replace them with your own images with the same filenames after the gallery has been created), then the smallImageURL and largeImageURL entries will be in place in the gallery's XML file and the functionality will still be there in the gallery.

Also, the resized images look soft.

Try increasing the quality of the images from the default value of 80 to something higher to see if this helps.

If you want more control over the images in your gallery than JuiceboxBuilder-Pro can provide, then you will have to create your images elsewhere and copy them into your gallery folder.

However, please post any suggestions you may have in the Feature Requests thread.
I cannot promise that your suggestions will be incorporated into future versions of Juicebox but it is certainly the best place to post ideas such as these.

3,348

(16 replies, posted in Juicebox-Pro Support)

Unfortunately, your web page is rather complex (loading 7 external CSS stylesheets and 17 external JavaScript files) so some trial and error may be required to track down the source of the problem.

Here are a few things to check/try:

First of all, try viewing your web page in both Chrome and Mobile Safari on your iPad to see if the problem happens in both browsers (or just in one of them).

Next, try changing your gallery's height to a fixed pixel value (rather than a percentage) to see if this helps.

Then, try loading jQuery v1.11.1 instead of v2.1.1 into your web page. It should not make a difference but it might be worth trying to see if it does.

If none of the above point towards a solution, then, as the problem may be a CSS or JavaScript conflict, try temporarily removing the external CSS and JavaScript files from your web page (one by one) until the problem no longer exists and a conflicting JavaScript (or CSS) file is found.
If you find a conflicting CSS or JavaScript file, please let me know what it is so that we can investigate further.

However, the thumbnails are still present on mobile devices even though I have unchecked all options for them to show up.

It looks like the emulator website you are using may not be giving a true representation of your web pages in the selected devices.
Are you using their Basic or Advanced emulation?
According to their own website, "Advanced emulation allows you to see your websites
like they are rendered in mobile devices.
". This suggests that their Basic emulation does not.
It looks like all their Basic emulation is doing is resizing the gallery to the selected device's screen size. However, because this is all it is doing, Juicebox is not detecting the selected device or its actual browser window size so it is not switching to Small Screen Mode (and the gallery is always being displayed in Large Screen Mode).
Try using their Advanced emulation or, if you are already doing so, try a different emulator such as Manymo which may give more accurate results.

On my Galaxy S4 the thumbnails are NOT there

I have viewed your gallery on an iOS device and also do not see thumbnails so it looks like your gallery is working as expected (just not in your chosen emulator website).

but the gallery is set VERY LOW in the window on both portrait and landscape view.

It looks like the problem may be your iframe's fixed height of 900px. You may need to reduce this in order for your gallery to take up less height on your web page in mobile devices.
Also, your iframe has a height="900px" attribute. This should be just height="900" (although I would recommend that you try reducing the value). The 'px' suffix should be used only if setting the height via CSS.

3,350

(3 replies, posted in Juicebox-Lite Support)

The Embedding in a Web Template Site support section has now been updated (with instructions for determining the URL to load into the iframe) for the new Google Drive.