Juicebox v1.5.1 Released!

2015-05-27 10:15:28

What I don't like (and I'm hoping there's a workaround for?) is the way galleries are only attached to single posts/pages (correct?)—I'd like to be able to manage galleries separately, and then add them to one or more posts/pages.

The way that WP-Juicebox currently works is that each gallery is associated with a single page or post and, if the Media Library is used as a source of images, then the images attached to the page or post containing the gallery will be displayed.
Unfortunately, there is no easy solution to change the way that WP-Juicebox works.
However, rather than try to separate galleries from their pages or posts, it would be possible (with knowledge of PHP and WordPress functionality) to change the way that WP-Juicebox displays Media Library images.
One possible solution might be to tag images in the Media Library (with a third-party plugin which allows such functionality as WordPress does not natively support this) and modify WP-Juicebox so that each gallery displays only images with specified tags. However, this would require a lot of work (and it would work only with a specific tagging plugin of your choice as all tagging plugins use different terms for their tags).

Could Juicebox be tweaked in some way to pull from FooGallery galleries, like it does from NextGEN?

It would certainly be possible to extend WP-Juicebox to use a new source of images (such as FooGallery) but an in-depth knowledge of how FooGallery works would probably be required (at least knowledge of how and where FooGallery stores images or image data) and I am not familiar with this plugin.

if I had my authors use Juicebox Builder, could we upload the files directly to the CDN, and then point the embed code in Wordpress to them?

You could certainly manually embed Juicebox galleries (created by JuiceboxBuilder) in WordPress pages or posts using the baseUrl method of embedding documented here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

(Our photos are coming out of Lightroom, anyway...)

As you are already using Lightroom, maybe you'd like to use the Lightroom plugin (which comes bundled within the Juicebox download zip package) to create your galleries (rather than JuiceboxBuilder). This might be better suited to your current workflow. More information about the Lightroom plugin can be found here.
I don't know if my notes above will actually help but I hope they might at least clarify a few things or point you in the right direction.

2015-05-27 09:46:18

@NeillTaylor

When I click the Facebook share icon in your gallery, the correct image (the og:image) is being used in the pop-up window.
It sounds like Facebook (or your browser) may have been using an older, cached version of your web page.

Just for good measure, try clearing Facebook's own cache of your web page (so that the new image is used) by entering your web page's URL into Facebook's Open Graph Debugger.
Also, clear your browser's cache before reloading your web page.

Hopefully this will help.

Incidentally, the shareURL is used only by JuiceboxBuilder-Pro (and not by Juicebox-Pro itself when the gallery is displayed) to know what URL to use when populating the Open Graph tags in the index page when the gallery is created.

2015-05-25 09:31:23

BTW, I am running v1.4.3 where can I get v1.4.3.1?

The latest version can be downloaded from the WP-Juicebox support page here.
The WP-Juicebox Version History can be found here.

2015-05-24 10:46:27

@edwinoonk

Thank you for the suggestions.
It sounds like you are referring to WP-Juicebox. If so, you can use a transparent background by setting the Background Opacity in your gallery settings window to '0' (zero).

Also, if you wanted to reverse the order you Picasa gallery images, you could change line 105 of the 'config.php' file from:

$attachments = $Juicebox->get_attachments_picasa($custom_values['e_picasaUserId'], $custom_values['e_picasaAlbumName']);

... to:

$attachments = array_reverse($Juicebox->get_attachments_picasa($custom_values['e_picasaUserId'], $custom_values['e_picasaAlbumName']));

... although this would reverse the order for all Picasa galleries. (I understand your request for a new option to toggle this image order per gallery.)
Please note that the line number above refers to the current version of WP-Juicebox (v1.4.3.1).

2015-05-23 18:07:35

If you want to prevent browsers from caching your gallery's dynamically-generated XML file, then try adding a unique query string (e.g. the current time which will be different each time the browser loads the page) to the configUrl option in your gallery's embedding code.
For example:

configUrl : "config.php?nocache=" + new Date().getTime(),

If you really want to add a refresh button to your web page, then you could use something like the following (which would overlay a 'refresh' link in the top left corner).

<div id="refresh" style="background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,1); cursor: pointer; font-size: 20px; left 0px; padding: 4px; position: absolute; top: 0px; z-index: 9999;">
    <span onclick="javascript: window.location.reload(); return false;">Refresh</span>
</div>

If you wanted the 'refresh' link to be displayed only on mobile devices, then you could check to see what screen mode Juicebox is using (via the Juicebox-Pro API getScreenMode() method) and display the 'refresh' link only in Small Screen Mode.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #refresh {
        display: none;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
        var jb = new juicebox({
            containerId: 'juicebox-container'
        });
        jb.onInitComplete = function() {
            if (jb.getScreenMode() === 'SMALL') {
                document.getElementById('refresh').style.display = 'block';
            }
        };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
    <div id="refresh" style="background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,1); cursor: pointer; font-size: 20px; left 0px; padding: 4px; position: absolute; top: 0px; z-index: 9999;">
        <span onclick="javascript: window.location.reload(); return false;">Refresh</span>
    </div>
</body>
</html>

(onInitComplete() and getScreenMode() work in Juicebox-Lite as well as in Juicebox-Pro.)

I hope this helps.

2015-05-22 10:14:57

I am unable to see the problem you describe in either Chrome or Mobile Safari on my iPod Touch. (I see your gallery's Splash Page in both browsers and tapping it expands the gallery as expected.)
Try implementing the 3G/4G solution suggested in the FAQ. It can't do any harm and it might help.
Also, try uploading the sample 'web' gallery from the Juicebox-Pro zip package ('juicebox_pro_1.4.3.2/web/') to your own web server and try viewing it in Mobile Safari on your iPhone to see what happens.
If you have not already done so, try completely clearing your Mobile Safari browser's cache before reloading your web page to see if this helps, too.

2015-05-22 10:13:52

... it just shows the gallery.

This is what makes me think that the 100% height is the root of the problem.

Perhaps put the gallery in a different DIV

This should not make a difference. There are no duplicate ids on the page and the gallery is already correctly embedded into a div with a unique id.

You should also enable scrolling on the web page...

Unless otherwise specified, vertical scrolling should already be enabled on the page as the default value for the CSS overflow property is visible.

2015-05-22 10:11:53

You're welcome.
I'm glad it worked.

2015-05-21 21:46:47

Clicking the 'Photo Gallery' tab calls the loadGallery() function but the gallery's embedding code is not within such a function wrapper on your web page. (Currently, the gallery's embedding code is run as soon as the web page is loaded and when this happens, the gallery's parent container is not visible on screen and has no dimensions.)

Change:

<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : 'owl_slide/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(252,242,204,100)"
});
</script>

... to:

<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            baseUrl : 'owl_slide/',
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(252,242,204,100)"
        });
    }
</script>

This should hopefully solve your problem.

2015-05-21 10:43:27

Please make sure that you are viewing your gallery over a wi-fi connection and not 3G or 4G.
If you are using 3G or 4G, then please see this FAQ for a solution.
Why can't I view my gallery on a 3G mobile connection?
I've just checked your gallery ion Mobile Safari on an iPod Touch and it displays and functions fine so I suspect that this might be the cause of your problem.

2015-05-21 10:20:07

Thank you for creating a new test page.

I have just checked this page in Chrome 42, Firefox 38.0.1, Internet Explorer 11, Opera 29 and Safari 5.1.7 on my PC and the text and video (and gallery) all display fine and stay visible in all browsers.

The only potential problem I see is that you have given your gallery a percentage height (100%) and your gallery does not have a parent container which has been assigned a height via CSS. Therefore, the browser may not be able to determine what the gallery's actual height should be 100% of. (Maybe the browser is using 100% of the entire viewport and covering the other elements on your web page with the gallery.)
Please also see this note regarding Using Percentage Heights.
Try giving your gallery a fixed pixel height (perhaps 600px) instead to see if this helps.

2015-05-21 10:16:09

You're welcome.

2015-05-20 22:23:08

I posted an example of how you could do this here: http://juicebox.net/forum/viewtopic.php?pid=8161#p8161
The code I posted takes into account the location of your 'jbcore' folder (in your root directory).
Give it a try. I've already tested it out in a text widget (like you are using) and it works fine.
Just create your two gallery folders, upload the complete gallery folders (not just the contents) to your root directory (alongside your 'jbcore' folder) and copy the entire code from my post into the text widget making sure that the 'id' attributes of the links are the names of the gallery folders ('winter' and 'summer' in my example).
You can choose to use the Splash Pages (or not) within each gallery via the showSplashPage configuration option.

(You could choose to relocate your gallery folders anywhere on your web server but you would need to compensate for this within the code. The code will work fine as it is as long as the gallery folders are in your root directory.)

2015-05-20 21:58:06

Your gallery's Splash Page displays fine on your /colorado/colorado.php page because the embedding code on that page is OK (loading the 'juicebox.js' file from the 'jbcore' folder in your root directory).

Your gallery does not display when you try to view it on your /colorado/index.html page because the embedding code on this page is looking for the 'juicebox.js' file in a 'jbcore' folder in the 'colorado' folder (and you have removed it).
If you want the gallery to display on your /colorado/index.html page (using the shared 'jbcore' folder in your root directory), then change the following code (on the /colorado/index.html page):

<script src="jbcore/juicebox.js"></script>

... to:

<script src="/jbcore/juicebox.js"></script>

2015-05-20 09:39:57

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.

2015-05-19 22:13:52

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.

2015-05-18 18:13:56

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

2015-05-17 19:43:06

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

2015-05-17 10:31:29

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.

2015-05-16 09:35:40

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.

2015-05-15 19:41:53

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.

2015-05-15 19:25:07

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

2015-05-15 18:23:53

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

2015-05-15 11:11:32

You're welcome.

2015-05-15 11:07:12

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

Juicebox v1.5.1 Released!

Search options (Page 113 of 235)

Posts found: 2,801 to 2,825 of 5,851

2,801 Reply by Steven @ Juicebox 2015-05-27 10:15:28

Re: Advice for SlideShowPro Director Refugee (3 replies, posted in Juicebox-Lite Support)

2,802 Reply by Steven @ Juicebox 2015-05-27 09:46:18

Re: Sharing image on facebook [SOLVED] (8 replies, posted in Juicebox-Pro Support)

2,803 Reply by Steven @ Juicebox 2015-05-25 09:31:23

Re: Feature Requests (496 replies, posted in Juicebox-Pro Support)

2,804 Reply by Steven @ Juicebox 2015-05-24 10:46:27

Re: Feature Requests (496 replies, posted in Juicebox-Pro Support)

2,805 Reply by Steven @ Juicebox 2015-05-23 18:07:35

Re: Photo booth ftp (4 replies, posted in Juicebox-Lite Support)

2,806 Reply by Steven @ Juicebox 2015-05-22 10:14:57

Re: iPhone - gallery not working (Drupal site) (3 replies, posted in Juicebox-Lite Support)

2,807 Reply by Steven @ Juicebox 2015-05-22 10:13:52

Re: Problem with embedded gallery in Safari, chrome, Opera (7 replies, posted in Juicebox-Lite Support)

2,808 Reply by Steven @ Juicebox 2015-05-22 10:11:53

Re: Problem with gallery in Spry panel (repost) [SOLVED] (8 replies, posted in Juicebox-Pro Support)

2,809 Reply by Steven @ Juicebox 2015-05-21 21:46:47

Re: Problem with gallery in Spry panel (repost) [SOLVED] (8 replies, posted in Juicebox-Pro Support)

2,810 Reply by Steven @ Juicebox 2015-05-21 10:43:27

Re: iPhone - gallery not working (Drupal site) (3 replies, posted in Juicebox-Lite Support)

2,811 Reply by Steven @ Juicebox 2015-05-21 10:20:07

Re: Problem with embedded gallery in Safari, chrome, Opera (7 replies, posted in Juicebox-Lite Support)

2,812 Reply by Steven @ Juicebox 2015-05-21 10:16:09

Re: small slider on demo page big responsive when licked (18 replies, posted in Juicebox-Pro Support)

2,813 Reply by Steven @ Juicebox 2015-05-20 22:23:08

Re: gallery 1 and gallery 2 (1 replies, posted in Juicebox-Pro Support)

2,814 Reply by Steven @ Juicebox 2015-05-20 21:58:06

Re: small slider on demo page big responsive when licked (18 replies, posted in Juicebox-Pro Support)

2,815 Reply by Steven @ Juicebox 2015-05-20 09:39:57

Re: Problem with embedded gallery in Safari, chrome, Opera (7 replies, posted in Juicebox-Lite Support)

2,816 Reply by Steven @ Juicebox 2015-05-19 22:13:52

Re: Problem with embedded gallery in Safari, chrome, Opera (7 replies, posted in Juicebox-Lite Support)

2,817 Reply by Steven @ Juicebox 2015-05-18 18:13:56

Re: Gallery not showing, getting error: Uncaught TypeError [SOLVED] (5 replies, posted in Juicebox-Lite Support)

2,818 Reply by Steven @ Juicebox 2015-05-17 19:43:06

Re: Feature Requests (496 replies, posted in Juicebox-Pro Support)

2,819 Reply by Steven @ Juicebox 2015-05-17 10:31:29

Re: Gallery not showing, getting error: Uncaught TypeError [SOLVED] (5 replies, posted in Juicebox-Lite Support)

2,820 Reply by Steven @ Juicebox 2015-05-16 09:35:40

Re: Gallery not showing, getting error: Uncaught TypeError [SOLVED] (5 replies, posted in Juicebox-Lite Support)

2,821 Reply by Steven @ Juicebox 2015-05-15 19:41:53

Re: How to give multiple galleries different "containerID" config options. (1 replies, posted in Juicebox-Lite Support)

2,822 Reply by Steven @ Juicebox 2015-05-15 19:25:07

Re: Resize error? (6 replies, posted in Juicebox-Pro Support)

2,823 Reply by Steven @ Juicebox 2015-05-15 18:23:53

Re: Gallery on iPhone not working [SOLVED] (3 replies, posted in Juicebox-Pro Support)

2,824 Reply by Steven @ Juicebox 2015-05-15 11:11:32

Re: Navigation problems in embedding [SOLVED] (3 replies, posted in Juicebox-Lite Support)

2,825 Reply by Steven @ Juicebox 2015-05-15 11:07:12

Re: small slider on demo page big responsive when licked (18 replies, posted in Juicebox-Pro Support)

Posts found: 2,801 to 2,825 of 5,851