Thank you for clarifying. I did not see this problem when I viewed your web page in the browsers I noted above.
The text and video above your gallery displayed fine and did not disappear.
Including a Juicebox gallery on your web page should not affect any other elements on your web page. All CSS code introduced by Juicebox uses selectors which apply only to the gallery itself. Global rules are not used.

Did you try clearing your browser caches to see if this made a difference?
Unfortunately, without being able to see or replicate the problem for myself, it is difficult to troubleshoot or to know what might be causing your problem.

I notice that you now provide a link to your gallery (rather than embedding it directly in your web page) but if you can, please create a new test page which you can still see the problem in and post its URL so that I can take another look and hopefully help further. Thank you.

Your gallery appears to be functioning as expected (and similarly) in all browsers I have viewed it in on my PC (Chrome 42, Firefox 38.0.1, Internet Explorer 11, Opera 29).
The image overlay (including the image captions) is displayed when the user hovers over the gallery with the mouse and the overlay disappears after 4 seconds of inactivity (the default value for inactivityTimeout).
If you are seeing different behavior in different browsers, then try clearing each browser's cache before reloading your web page to be sure that your all your browsers are fetching and using the most recent versions of your gallery files.

If you were using Juicebox-Pro and wanted to disable the timeout feature, you could set inactivityTimeout (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to '0' (zero).
You could also set showImageOverlay (Pro only) to AUTO, ALWAYS or NEVER (also in the 'Customize -> Main Image' section). The default value (used by Juicebox-Lite) is AUTO.

I'm glad you've got it all working now.
Thank you for posting back to let me know.

2,779

(496 replies, posted in Juicebox-Pro Support)

@Ruud Westerhout

Just to clarify, there is currently no way to pan across or zoom into an image within a Juicebox-Pro gallery.
The only way to have a panoramic image displayed in full would be to set imageScaleMode to SCALE_DOWN or SCALE (although if your gallery is narrow, then the image be be displayed very small).
You could always set a large value for your gallery's width and visitors to your web site could horizontally scroll across your page to see the entire image. Perhaps not an ideal solution but one you might like to consider.
In any case, thank you for your suggestion.

I do still have to refresh the page for both galleries to show up on my Mac for some reason...

Normally the Juicebox gallery will not be rendered until the Document Object Model (DOM) is ready but your web page seems to have a lot going on in a $(document).ready(function() { }); at the foot of your page.
Maybe if you load your gallery after all your page's custom JavaScript code has been processed, the gallery will appear without the page having to be refreshed.
Try wrapping your gallery's embedding code in a function and run the function at the end of the $(document).ready(function() { }); code.
For example, try replacing:

new juicebox({
baseUrl : 'gallery_giclee/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(255,255,255,1)"
});

... with:

function loadGallery() {
    new juicebox({
        baseUrl : "gallery_giclee/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(255,255,255,1)"
    });
}

... and then replace the last line of your page's custom $(document).ready(function() { }); JavaScript code from:

} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});

... to:

} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }
    loadGallery();
});

Alternatively, if you do not want to manually edit the page created by Muse, then you could try wrapping your gallery's embedding code in its own $(document).ready(function() { }); and introduce a window.setTimeout(); function to delay the normal loading of the gallery (perhaps by half a second or so) to allow your own custom JavaScript to be processed first.
For example, try replacing:

new juicebox({
baseUrl : 'gallery_giclee/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(255,255,255,1)"
});

... with:

$(document).ready(function() {
    window.setTimeout(function() {
        new juicebox({
            baseUrl : "gallery_giclee/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(255,255,255,1)"
        });
    }, 500);
});

Hopefully this will help.

Your 'Available Originals' gallery's XML file does not contain any image information.
Try viewing it directly in a browser: http://lynnmaritpetersonart.businesscat … config.xml
Please check that you have uploaded the correct XML file to the gallery folder on your web server or rebuild your gallery in JuiceboxBuilder-Pro if necessary.

Your 'Available Giclees' gallery seems to display fine (both on its own and embedded) so try clearing your browser's cache before reloading your web pages to see if this helps.

The containerId for each gallery is set in the gallery's embedding code.
Take a look at the source of this sample web page in your browser (from the Multiple Galleries support section) which has two galleries embedded on the same page. You will see how each gallery's embedding code sets a different containerId.

2,783

(6 replies, posted in Juicebox-Pro Support)

Thank for for giving me access to one of your source images and for letting me know what settings you are using.
(I have deleted the login details from your post above and you can now delete the temporary FTP account on your web server.)
I have been able to replicate the problem and it looks like the error is triggered by certain values for the large image settings.
This is not a problem with your image. For example, with your own image, if I set the Large Images Max Width and Max Height to both 2507, the image is processed correctly. However, if I use values of 2508, the error message is displayed.
Thank you for pointing out this problem. I have notified the developers who will certainly investigate further.
In the meantime, it looks like the workaround would be to reduce your Large Images Max Width to 2507 (or lower).

2,784

(3 replies, posted in Juicebox-Pro Support)

You're welcome.
Thank you for letting me know that everything's OK now.

2,785

(3 replies, posted in Juicebox-Lite Support)

You're welcome.

... but won't making a gallery addition like this createa new jbcore folder?

Yes, but if you change the path to the 'juicebox.js' file to point towards the shared 'jbcore' folder, then you can just delete (or ignore) the 'jbcore' folder in the new gallery.

It sounds like you want to have a link within your gallery to replace the gallery itself with a different one in the same container (your text widget) on your WordPress page. This would not be easy to do at all. It would require a lot of custom coding and knowledge of HTML and JavaScript would be required.

If you were willing to include the links to the different galleries in the text widget alongside the galleries (rather than within the galleries), then you could use code such as the following in your text widget.

In this example, you would upload two complete gallery folders named 'winter' and 'summer' to your root directory.
You would also upload a single 'jbcore' folder to your root directory and you could then delete the 'jbcore' folders in each gallery if you like (as they would not be used).

<script type="text/javascript" src="/jbcore/juicebox.js"></script>
<script type="text/javascript">
    function loadGallery(base) {
        new juicebox({
            baseUrl: base,
            containerId: "juicebox-container",
            galleryHeight: "250",
            galleryWidth: "100%"
        });
    }
    $(document).ready(function() {
        $('.gallery').click(function() {
            var base = '/' + $(this).attr('id') + '/';
            loadGallery(base);
        });
        loadGallery('/winter/');
    });
</script>
<div id="links">
    <input id="winter" class="gallery" type="button" value="Winter" />
    <span>&nbsp;</span>
    <input id="summer" class="gallery" type="button" value="Summer" />
</div>
<div id="juicebox-container"></div>

If you want to add any more galleries, then the 'id' of the new link should be the name of the gallery folder (uploaded to your root directory).

Incidentally, the <input> tags above could be replaced with <span> tags (for a text link instead of a button) if you like, e.g.:

<span id="winter" class="gallery">Winter</span>
<span>&nbsp;</span>
<span id="summer" class="gallery">Summer</span>

2,787

(3 replies, posted in Juicebox-Lite Support)

The problem is with the following CSS code on your web page (specifically the text-indent line):

body
{
    text-indent:24pt;
    background-color:#222222;
    font-family: 'Open Sans';
    color:white;
    font-size: 10pt;
}

This code will apply to all elements on your web page (and the gallery has no option but to inherit these CSS rules).
Either remove the text-indent line or apply these CSS rules to only those elements on your web page which require them through use of CSS selectors (classes and ids).
This should solve your problem.

2,788

(6 replies, posted in Juicebox-Pro Support)

@bherman

I'm sorry to hear that you're having problems with JuiceboxBuilder-Pro but I'll try to help if I can.

Possibly the image was too large or invalid.

As your image dimensions are within the resolution limit for Adobe AIR, it looks like the issue certainly lies elsewhere.
If you are able to provide me with one of your source images (please upload one somewhere and post a link), I can try to replicate the problem and investigate further. Also, it might help to know exactly what images sizes you have set in the 'Resize Images' section.

... but the thumbnails for the 11 images with the error message were not generated

What thumbnail dimensions did you set?

Also, the large jpegs were smaller than the size I specified for all the images, except 1 which was generated at the specified size.

Please let me know the following:

  • Dimensions of your source image

  • Dimensions for the large images set in the 'Resize Images' section

  • Dimensions of the output image

Please note that the dimensions set in the 'Resize Images' section are maximum bounds and unless Maximum Width x Maximum Height has exactly the same aspect ratio as the Actual Width x Actual Height of the source image, then either the width or the height of the output image will be smaller than its maximum value.
Also, images are only scaled down (not scaled up) so make sure that your source images are larger (in resolution) than your large image dimensions.

Once I have access to one of your source images and know what image dimensions you are setting and getting as output images, I should hopefully be able to help further. Thank you.

2,789

(3 replies, posted in Juicebox-Pro Support)

I would recommend that you embed your gallery directly into your web page (rather than loading it into an iframe) if at all possible, using the embedding code found here.
As your gallery is loaded into an iframe, the Splash Page would only ever be able to expand the gallery within the iframe anyway so I would recommend that you set either showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section) to immediately display the gallery (rather than the Splash Page) when the web page is loaded or screenMode="LARGE" ('Customize -> General') to display the gallery in Large Screen Mode (which does not use the Splash Page by default) in all devices and browsers.
Another possible solution would be to set your gallery's dimensions to 100% x 100% (your gallery's height is currently 70%).
In doing so, the gallery will fill its own page (and also the iframe it is loaded into) and the Splash Page will not be used.
I hope this helps.

2,790

(1 replies, posted in Juicebox-Pro Support)

You can change the font size of a caption using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

If you wanted to change the font size of all captions in a gallery, then you could add CSS such as the following to the <head> section of your web page:

<style type="text/css">

    /* IMAGE TITLE */
    .jb-caption .jb-caption-title {
        font-size: 24px !important;
    }

    /* IMAGE CAPTION */
    .jb-caption .jb-caption-desc {
        font-size: 24px !important;
    }

    /* IMAGE NUMBER */
    .jb-cap-frame .jbac-number {
        font-size: 24px !important;
    }

</style>

2,791

(4 replies, posted in Juicebox-Lite Support)

Please see these forum threads which deal with how to add new images to a gallery by just uploading them to a designated folder (and without having to modify any gallery files).
http://juicebox.net/forum/viewtopic.php?id=91
http://juicebox.net/forum/viewtopic.php?id=1811

My answer to Query #3 here is probably what you are looking for: http://juicebox.net/forum/viewtopic.php?pid=383#p383

Try manually setting the permissions of the '/wp-content/uploads/juicebox/' folder to 755. That should hopefully work as those are the permissions that WP-Juicebox tries to automatically set and if the plugin sees that the permissions are already 755, it should skip onto the next check.

2,793

(5 replies, posted in Juicebox-Pro Support)

I'm glad you've got it working.
Thank you for posting back to let me know.

2,794

(5 replies, posted in Juicebox-Pro Support)

... there is no config.xml file included in the export.

There should always be a 'config.xml' file in every gallery generated by the Lightroom plugin.
If your gallery folder does not contain a 'config.xml' file, then something is wrong (and the gallery will not be able to be displayed in a browser or opened in JuiceboxBuilder-Pro). Try reinstalling the plugin from scratch to ensure that all core files are present and correct. Also, check that you are not exporting your gallery to a folder with read-only permissions.

I deduce that if I want a responsive gallery then I should create it manually in JuiceboxBuilder-Pro, correct?

The Lightroom plugin creates a gallery very similar to JuiceboxBuilder-Pro (with no functional differences with regard to responsiveness).
With both applications, you can select the gallery size (Gallery Width and Gallery Height) and the 'index.html' page generated will contain the gallery on its own at the specified dimensions with no other content on the page.
Gallery dimensions can be percentages (of the gallery's parent container) or fixed pixel values. The default gallery size for both the Lightroom plugin and JuiceboxBuilder-Pro is 100% x 100%.
If you use percentages, then the gallery's parent container in the 'index.html' page generated by the Lightroom plugin and JuiceboxBuilder-Pro is the <body> tag (the entire browser window).

For more information on how to make a gallery responsive, please see this forum post.

2,795

(11 replies, posted in Juicebox-Lite Support)

@chrisw

Many thanks for sharing your code!

2,796

(7 replies, posted in Juicebox-Pro Support)

That's good to hear.
Thanks for posting back to let me know.

(1) No. All gallery files must be on the same domain (or subdomain) as the document containing the gallery's JavaScript embedding code due to the same-origin policy. The only way around this would be to implement a Cross-Origin Resource Sharing (CORS) solution by adding the following line of code to the .htaccess file in the root directory of the domain which hosts the 'jbcore' folder.

Header add Access-Control-Allow-Origin "*"

It would be much easier to just keep all gallery files on the same domain.

(2) Juicebox uses a <h3> tag for the Splash Title and your custom CSS styles all <h3> tags within the #sidebar container (which is where your gallery is), overriding the gallery's own CSS. It is not possible to isolate an element on a web page to prevent it from inheriting global CSS rules and the best solution might be to use more specific CSS selectors so that the rules are applied to only those elements that require them. However, this might be difficult to do in a WordPress environment. Perhaps the easiest solution would be to open the 'jbcore/classic/theme.css' file in a plain text editor and add the following two lines to the .jb-splash-info h3 section (lines 607-615). The line numbers refer to the current version of Juicebox-Pro (v1.4.3.2).

background-color: transparent !important;
border-style: none !important;

(3) You could have a link in a gallery (in an image title or caption, for example) which would link to another gallery's web page but it is not possible to have a gallery within a gallery.
You could switch between different galleries in a single container (an online example can be found here) but this might be difficult to achieve in a WordPress environment.

2,798

(7 replies, posted in Juicebox-Pro Support)

I notice that you have taken the 'juicebox.js' file outside the 'jbcore' folder.
Juicebox needs all the files within the 'jbcore' folder to work correctly (and no files within the 'jbcore' folder should be renamed or moved).
Upload the complete 'jbcore' folder to your web server and load the 'juicebox.js' file from inside the 'jbcore' folder.
This should hopefully solve your problem.

2,799

(1 replies, posted in Juicebox-Pro Support)

Please check that you are using the latest version of Juicebox-Pro (v1.4.3).
If necessary, upgrading instructions can be found here.

Also, please make sure that you are using a wi-fi connection rather than 3G/4G. If you are using 3G/4G, then please see this FAQ for a solution: Why can't I view my gallery on a 3G mobile connection?

If you continue to experience difficulties, then please post the URL to your gallery (so that I can take a look at the problem for myself) and let me know what mobile device and browser (and version numbers) you are using.
Thank you.

2,800

(7 replies, posted in Juicebox-Pro Support)

No problem!