2,601

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

2,602

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

2,603

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

2,604

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

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.

2,606

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

No problem!
Glad it was an easy fix.

2,608

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

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.

2,610

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

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>

2,612

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

2,613

(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

2,614

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

2,615

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

2,616

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

2,617

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

2,618

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

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.

2,620

(3 replies, posted in Juicebox-Pro Support)

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

2,621

(3 replies, posted in Juicebox-Pro Support)

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

2,622

(3 replies, posted in Juicebox-Pro Support)

The first step would probably be to set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) so that each image in the gallery has its own unique URL in the form: http://www.example.com/gallery/#7 where the number after the # is the image number in the gallery.
A brief description of enableDirectLinks can be found in the General section of the Config Options page.

The next step would likely be to enable Google Analytics to allow anchor tracking by including location.hash in your Google Analytics code.
Try a web search with terms such as 'google analytics anchor tracking' for more information.

I cannot be sure that this will work but I hope it at least points you in the right direction.

2,623

(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,624

(3 replies, posted in Juicebox-Pro Support)

Are you perhaps trying to view your gallery using http://joaqimb.be instead of http://www.joaqimb.be?
You have hardcoded the 'www' subdomain into the paths in your embedding code so your gallery will display only when using the 'www' subdomain.
Please see this FAQ for details and a solution.
My gallery works on 'www.example.com' but not on 'example.com' (or vice versa). Why?

In your case, paths such as the following should work fine:

<script src="/JbMuzeuml/jbcore/juicebox.js"></script>
baseUrl: "/JbMuzeuml/",

(The leading slash in the paths denotes your root directory.)

Hopefully this will solve your problem.

As far as I am aware, there has been no change to the Pinterest code within Juicebox-Pro since it was introduced.
Juicebox-Pro just opens a new window with the Pinterest URL and whatever is displayed in the window is determined by Pinterest. Any difference in what you see in the window (ie. logging in first) might be due to changes at Pinterest's end.

If you see different behavior in different versions of Juicebox-Pro, then please let me know which versions you use so that I can investigate further. Thank you.