2,601 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

A Juicebox-Pro gallery uses the same set of configuration options for both Small Screen Mode (SSM) and Large Screen Mode (LSM). It is not possible to have two different sets of values and switch between them and it is not possible to change configuration option values once a gallery has been loaded. The gallery would need to be reloaded with new values.
Technically, you could load the gallery, check whether SSM or LSM is being used (via the Juicebox-Pro API getScreenMode() method) and then reload the gallery using a specifc XML file corresponding to the screen mode being used. However, this is not an ideal solution.

There are some configuration options which are specific to the different screen modes (e.g. showThumbsOnLoad is for LSM only whereas showSmallThumbsOnLoad is for SSM only) but other options such as buttonBarIconSize apply equally to both SSM and LSM.

If you want to configure Juicebox-Pro beyond what can be achieved with the available configuration options, you can certainly try modifying the 'jbcore/classic/theme.css' file. However, knowledge of CSS would be required and such modifications would not be officially supported. Also, you might find that you run into unforeseen problems as Juicebox will not know of any modifications made to this file and if any changes that you make alter the size or position of any gallery elements, there may be unwanted knock-on effects with regard to the gallery layout.

Here are a few other notes which may help.

For example rounding image corners with using a a border (frame) will generate a borderless yet rounded image in small-screen mode.

Unfortunately, the frameWidth configuration option is LSM only.

Another question I would like to have button size at 20 px while in large-screen mode and 16px when seen on a smartphone...

Please see this forum thread.

And the app must have a switch that changes the preview from large screen to small screen.

You can check how your gallery looks in SSM by setting screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.

If you find there are things that you would like to do that currently cannot be done (or at least not easily), then please post your suggestions 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

2,602 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

If it not possible to change the functionality of the Close Button but you could use the Juicebox-Pro API to run some custom JavaScript (to do whatever you like, such as open a new tab with a specific URL using window.open()) when the gallery is closed.
Listen for the onExpand(expanded) event to be fired (which happens when the gallery is expanded and closed) and run your JavaScript code only when the gallery is closed.
For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryHeight: '600',
        galleryWidth: '800'
    });
    jb.onExpand = function(expanded) {
        if (!expanded) {
            window.open('http://www.juicebox.net/', '_self');
        }
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

This would be much easier to do (as above) than trying to hide the Close Button which would involve hiding the Expand/Close Button only in fullscreen mode using CSS on internal Juicebox classes. There would also be the added complication that Juicebox would expect the Close Button to be there which may affect Button Bar sizing and spacing.

Go to forum: Juicebox-Pro Support

2,603 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Lite Support)

OK. I'm glad everything is fine. Thank you for letting me know.

For others reading this thread, it sounds like the original poster may be referring to the Splash Page which is used by default when the gallery is embedded in a page alongside other content and displayed in Small Screen Mode.
For more information on the Splash Page and Screen Modes, please see here.

Go to forum: Juicebox-Lite Support

2,604 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

A Juicebox-Pro gallery uses the same set of configuration options for both normal and fullscreen modes and it is not possible to set different values for each mode.
However, there are different options to set the background color for normal and fullscreen modes, namely backgroundColor (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and expandedBackgroundColor (at the foot of the 'Customize -> Color' section).
You can set the color and opacity for expandedBackgroundColor just as you can for backgroundColor.

For reference, a complete list of all configuration options can be found here.

Go to forum: Juicebox-Pro Support

2,605 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

You're welcome! I'm glad my suggestion worked.
(Hopefully this should only be a temporary measure until the bug is fixed although it will do no harm to leave the CSS code in place.)

Go to forum: Juicebox-Pro Support

2,606 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

Instead of my original suggestion above, try adding the following to any of your CSS files:

.jcbx-glry-classic {
    direction: ltr;
}

This should hopefully work for both normal and fullscreen modes.

I have logged this issue as a bug with the developers and it should hopefully be fixed in a future version of Juicebox.
Thank you for reporting it.

Go to forum: Juicebox-Pro Support

2,607 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

It looks like some custom CSS code on your web page which handles the right-to-left aspect of your web page is switching the left and right hit-areas of the gallery.
I suspect it is the following code from your 'rtl.css' file (specifically the 'direction' property).

#page {
    text-align: right;
    direction: rtl;
}

This code sets the direction for everything within the #page container including your Juicebox gallery (which is nested within the #page container).
You could either modify your CSS so that it applies to only those elements on your web page which require the 'direction' property (through use of further CSS selectors) or you could explicitly set direction: rtl; for the Juicebox gallery container by editing the WP-Juicebox plugin's 'wp-juicebox.php' file in a plain text editor and changing line 287 from:

$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '"></div>' . PHP_EOL;

... to:

$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '" style="direction: ltr;"></div>' . PHP_EOL;

Please note that the line number above refers to the current version of WP-Juicebox (v1.4.4.1).

Go to forum: Juicebox-Pro Support

2,608 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support

2,609 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

I tried this and it worked perfectly, but the client really didn't like it as the button bar appears about the same time was the image and he didn't like the delay.

If you are referring to the delay between the Button Bar background and the Button Bar icons being displayed, then you could ensure that they are displayed together by hiding and showing the .jb-bb-bar class as well as the .jb-bb-button class.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    .jb-bb-bar, .jb-bb-button {
        visibility: hidden;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    jb.onInitComplete = function (e) {
        var mode = jb.getScreenMode();
        if (mode == 'SMALL') {
            $('.jb-bb-button').css('font-size', '16px');
        }
        $('.jb-bb-bar, .jb-bb-button').css('visibility', 'visible');
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I thought I would let the client see what small screen mode is like.

If you want to have your gallery displayed in Small Screen Mode in all browsers and on all mobile devices (rather than just when Juicebox-Pro detects a small-screen device), then set screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.

Go to forum: Juicebox-Pro Support

2,610 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

As far as I can remember, I have not encountered such a problem before and, unfortunately, a screenshot would not help me troubleshoot it.
I would really need to see the gallery live on your web server (so that I can check the code on the web page and the gallery's configuration options).
If possible, please post the URL to your gallery's web page so that I can take a look and the problem for myself and hopefully help further.
Otherwise, please post your gallery's configuration options so that I can try to replicate the problem in a test gallery of my own.

Also, if you are not already using the latest version of Juicebox-Pro (v1.4.4.1), then please try upgrading your gallery to see if this helps. (Your problem may be caused by a bug in a previous version which has since been fixed.)
Full instructions for downloading the latest version and upgrading existing galleries can be found here.

Go to forum: Juicebox-Pro Support

2,611 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

No problem!
Glad it was an easy fix.

Go to forum: Juicebox-Pro Support

2,612 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.

For others experiencing similar issues, here's a link to a support page detailing the <a> tag's 'target' attribute with its possible values.

Go to forum: Juicebox-Pro Support

2,613 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

It sounds like you might have AdBlock installed as a browser extension in Chrome.
The first two images in your gallery have the text 'ad1' and 'ad2' in their filenames and AdBlock may be seeing these as advertisements and blocking them.
Try changing the filenames so that they do not contain the text 'ad'.
This should hopefully solve your problem.

Go to forum: Juicebox-Pro Support

2,614 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

@junebugweddings

You could set an image title and/or caption for the last image in your gallery and have it include links (<a> tags) using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

Alternatively, you could use the Juicebox-Pro API to check whether the last image in the gallery is currently being displayed and run some custom JavaScript code (to do whatever you like) if it is.
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container'
});
jb.onImageChange = function(e) {
    if (e.id === jb.getImageCount()) {
        alert('Last image in gallery!');
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Go to forum: Juicebox-Pro Support

2,615 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

You could maybe hide the .jb-bb-button class as soon as the page loads and make it visible only after you have changed the font size. Try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    .jb-bb-button {
        visibility: hidden;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    jb.onInitComplete = function (e) {
        var mode = jb.getScreenMode();
        if (mode == 'SMALL') {
            $('.jb-bb-button').css('font-size', '16px');
        }
        $('.jb-bb-button').css('visibility', 'visible');
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

Go to forum: Juicebox-Pro Support

2,616 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section). (The default value for this configuration option is FALSE.)

Go to forum: Juicebox-Pro Support

2,617 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.

For any other users trying to embed a Juicebox gallery using Abode Muse, the following links might be useful.
Embedding With Adobe Muse: http://www.juicebox.net/support/embeddi … adobe-muse
Alternate Adobe Muse Embedding Instructions: http://www.muse-themes.com/blogs/news/6 … adobe-muse

Go to forum: Juicebox-Pro Support

2,618 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

Your two suggestions seem to be based around dynamically creating a new page for each image with the required og:image tag. This might work to ensure that the corresponding thumbnail is displayed each time an image in the gallery is shared but then the page that is shared will no longer be the page containing the Juicebox gallery. It will be your custom page with the required og:image. I'm not sure if this is a drawback or something that is intended. (Maybe you could redirect back to the gallery page from the page containing the og:image.) Just thinking out loud...

Go to forum: Juicebox-Pro Support

2,619 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

So is there any way of altering og:image with Facebook share link ?

As far as I am aware, it is not possible to set or modify the thumbnail used in the share window (or specifically the og:image) via the Facebook share link and changing the og:image dynamically via JavaScript (for example, when onImageChange() is fired) will not work. It is possible to set multiple og:image meta tags in a web page but I see no way to inform Facebook which one to use at any specific time.
As far as I can tell, the only way to have the thumbnail image correspond to the actual image being shared might be to have the share links point towards individual web pages (one per gallery image), each with a unique og:image. However, Juicebox does not work this way (each gallery image does not have its own web page) and the 'juicebox.js' file cannot be edited.
Unfortunately, I do not see a way that this can be done (at least not easily within the current parameters of Juicebox-Pro and Facebook).
Maybe other users will have some ideas or suggestions...

Go to forum: Juicebox-Pro Support

2,620 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad you've got it working and are getting on well with Juicebox.
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support

2,621 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Do I need to put all the Flikr pictures into my webhost ?

No. Juicebox will read the images from Flickr's servers.
You still need to copy the contents of your gallery folder to the directory which contains the page with the embedding code.
In your case, the gallery folder will contain only the following contents:

  • jbcore (folder)

  • config.xml (file)

  • index.html (file)

Your gallery folder will not have 'images' and 'thumbs' folders. They would exist only for galleries sourced by local images.
Also, if you are embedding your gallery into an existing web page alongside other content, then you do not need to upload the gallery's 'index.html' file. This would be used only to display the gallery on a web page of its own.

I've just checked your web page and your gallery now displays so it looks like you have solved your problem.
If you are still experiencing difficulties, please let me know and I'll try to help further.
Thank you.

Go to forum: Juicebox-Pro Support

2,622 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Your gallery's embedding code uses the following line:

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

Therefore, your gallery will display if you copy the contents of your gallery folder (not the actual folder itself) into the same directory as the web page containing the embedding code.

If you have uploaded your entire gallery folder to your web server, then you can use the baseUrl method of embedding documented here.

If you get stuck, please let me know where your gallery files are on your web server and I should be able to provide you with some embedding code that will work.
Thank you.

Go to forum: Juicebox-Pro Support

2,623 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

Please let me know what version of Juicebox-Pro skips the Pinterest login.
If I know what version works and what version fails, I can investigate further and log a bug report with the developers if necessary. Thank you.

Go to forum: Juicebox-Pro Support

2,624 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

2,625 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad it works.

Go to forum: Juicebox-Pro Support