3,526 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

You can give your Juicebox gallery a transparent background by setting the Background Color Opacity to '0' (zero) in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
The Opacity can be a decimal value from 0 (fully transparent) to 1 (fully opaque).

If you are setting the background color manually in your gallery's embedding code, then use something like:

backgroundColor: 'rgba(0,0,0,0)'

... where the fourth number in the rgba notation is the opacity (the alpha channel).

For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(0,0,0,0)'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Go to forum: Juicebox-Pro Support

3,527 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

So, if I set the Position of the gallery to 'relative', will it still be in the center of the browser on any size computer?

Yes, but if your gallery is a 100% x 100% gallery which fills the web page, there is no need to set the position of the parent container div to relative. If the Facebook div (the div with the position of absolute) has no parent container with a position of relative, the containing block will be the 'html' tag which is essentially the entire web page - exactly the same area as the gallery itself).
For more information on CSS Positioning, please see this web page.

Go to forum: Juicebox-Pro Support

3,528 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

WP-Juicebox requires PHP v5.2.0 or later so the upgrade to v5.5 should not have made a difference.
Also, permissions of 777 should work OK. By defenition, 777 permissions gives full permissions to all but it looks like your web server may actually restrict access when using 777.

In any case, I am glad that your problem has been resolved.
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support

3,529 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

I was just confirming that I do not see the problem in either Chrome or Mobile Safari (in iOS 6).

Do you see the problem in Mobile Safari or just in Chrome in iOS 7.1?
(This might confirm whether the problem is specific to Chrome or iOS 7.1 in general.)

Have you tried replacing the <meta> 'viewport' tag as I suggested in my last email?
If so, did it make any difference?

I would still expect the value of expandInNewPage to make a difference (due to the known bug). It certainly makes a difference in my own test galleries (in both Chrome and Mobile Safari).
Please double-check this by setting expandInNewPage="TRUE" and expandInNewPage="FALSE" (at different times) and checking your web page (after clearing your browser's cache) with each setting.

Go to forum: Juicebox-Pro Support

3,530 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

There is a comprehensive list of things to check/try in this forum post. It looks like you may have tried everything on the list but maybe going through the list will help.

Here are a couple of other things to consider.

(1) If JuiceboxBuilder-Pro used to work OK but now does not, try winding back your system using Time Machine (Mac) or System Restore (Windows) to a time when it did work OK.

(2) If you use Avast (anti-virus), try making an exception in the program for JuiceboxBuilder-Pro. (There have been several reports recently of Avast interfering with Adobe AIR applications.)

(3) If using Windows, have you tried creating a new User Account with administrator rights and installing JuiceboxBuilder-Pro from within this new account? (It should not be necessary but it might help to know whether this works or not.)

Go to forum: Juicebox-Pro Support

3,531 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

Juicebox uses only one set of configuration options for both normal and expanded modes and it is not possible to change configuration options once a gallery has been loaded.
Also, the layout of a Juicebox gallery is complex and I would not recommend trying to alter a gallery's expanded layout using CSS. Juicebox was not designed with such a customization in mind and if you try this, you may very quickly get caught up trying to fix unwanted knock-on side-effects. There is no documentation for such a customization. You would need to check the ids and classes of elements to change using a browser's developer tools and apply your custom CSS rules using JavaScript when the Juicebox-Pro API onExpanded() event is fired.
It may not be an ideal solution to your problem but I would recommend settling on a design which works for you in both normal and expanded modes.

Go to forum: Juicebox-Pro Support

3,532 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

It is not possible to watermark Flickr images using Juicebox. Only local images can be watermarked by JuiceboxBuilder-Pro.
Watermarking is a feature of JuiceboxBuilder-Pro (the application used to build Juicebox-Pro galleries) rather than Juicebox-Pro itself.
The watermarks are not applied to the images by Juicebox-Pro at the time the images are displayed in the gallery. The watermarks are baked into the images (by JuiceboxBuilder-Pro) at the time they are resized when the gallery is created.
As JuiceboxBuilder-Pro does not process Flickr images when a gallery is created, the Flickr images cannot be watermarked.

You would need to add watermarks to your images (perhaps using JuiceboxBuilder-Pro or an imaging program such as Adobe Photoshop), upload the watermarked images to Flickr and then display them in your gallery using the available Flickr configuration options.

Go to forum: Juicebox-Pro Support

3,533 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

Thank you for providing the screenshots.
In Chrome 35 on iOS 6 (and in Mobile Safari, too), I see your web page as your 'before' image (not as you see it in Chrome on iOS 7). What version of Chrome are you running? If it is not the latest version, try updating it.
The only way I can make a web page 'zoom-out' in Chrome 35 on iOS 6 is to not use the following <meta> 'viewport' tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Try replacing this <meta> 'viewport' tag with the one which Juicebox now uses in the 'index.html' files generated by JuiceboxBuilder-Pro to see if this helps:

<meta name="viewport" id="jb-viewport" content="minimal-ui" />

Also, I notice that your gallery has a width of 100%. Try temporarily giving your gallery a fixed width (just for testing purposes) to see if this makes a difference (to see if the 100% width is somehow forcing the web page's width to expand resulting in a change to the scale of the web page).

Go to forum: Juicebox-Pro Support

3,534 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

1. But is there a way to overlay it at the bottom of the gallery, or will the placement always be absolute because it's an overlay?

If your gallery fills the web page (like in the sample code I posted), you can just change top: 10px; to bottom: 10px;. The position does not have to be absolute (although the container must have a CSS position for the z-index to work).
If you embed your gallery in a web page alongside other content (and your gallery does not fill the web page), then wrap your gallery's container div and your Facebook div in a parent container div (with the same dimensions as your gallery's container) and assign position: relative; to the parent container div and position: absolute; bottom: 10px; to the Facebook div.

2. Can I change the color or transparency of the Like button?

Facebook allow you to change the 'colorscheme' by setting the HTML 5 attribute 'data-colorscheme' to either 'light' or dark'.
Please see this web page for further details.
For example:

<div class="fb-like" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

However, actually changing the color of the Like Button is not allowed under Facebook's brand guidelines, as noted on this web page.

Don't
Modify Facebook brand assets in any way, such as by changing the design or color

Go to forum: Juicebox-Pro Support

3,535 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

If you want to include a Facebook Like Button on your page, then, ordinarily, you would need to either make room for the button on your page (alongside the gallery) or overlay the container which contains the button on top of the gallery using CSS.
Details of the code to include on your web page can be obtained from this Facebook page.

For example, if you selected the HTML 5 implementation and wanted the Like Button to overlap the top-left corner of your gallery, then your web page's code would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 9999;
    }
    </style>
</head>
<body>

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        galleryTitlePosition: 'NONE'
    });
    </script>
    <div id="juicebox-container"></div>

    <div id="overlay">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>

</body>
</html>

Perhaps an easier method would be to select the IFRAME implementation of the Like Button and paste the entire iframe code into the Gallery Title text field in JuiceboxBuilder-Pro (in the 'Customize -> Lite' section). If trying this, I would also recommend setting galleryTitlePosition="TOP" (in the 'Customize -> General' section) so that the Like button is always visible in your gallery.

Please note that the Like Button will not be displayed until you upload your gallery to your web server.

I hope this helps.

Go to forum: Juicebox-Pro Support

3,536 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

@yvetteo

I have just viewed your gallery in Chrome on on iPod Touch running iOS (6.1.6) and it looks OK to me. (The Splash Page is displayed and when it is clicked, the gallery expands fullscreen.)
What device and iOS version do you use? Also, are you able to upload a screenshot somewhere so that I can see what you are seeing?

If you have made any changes to your gallery recently, try clearing your browser's cache before reloading your gallery to ensure that your browser is fetching and using the most recent versions of your gallery files.

Also, try setting expandInNewPage="TRUE" in your gallery's settings. There is currently a bug (which should hopefully be fixed in a future version of Juicebox) whereby setting expandInNewPage="FALSE" can change the scale of the embedding page. This may be a possible explanation for the problem that you are running into.

Go to forum: Juicebox-Pro Support

3,537 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

Here are a few tips which should help you get your galleries working as expected:

(1) Load the 'juicebox.js' file only once per web page (not once per gallery).

(2) Unless your galleries are nested within parent containers which have been given dimensions via CSS, set gallery dimensions in the embedding code. As you do not currently set dimensions, default values of 100% will be used for both the width and height and unless Juicebox can determine when the 100% refers to, you may have problems with gallery sizing. Try using something like:

galleryWidth: '100%',
galleryHeight: '600',

(3) If you have uploaded your entire gallery folders ('live' and 'travel' to your web server), then I would recommend using a baseUrl (to point to your gallery folder) instead of a configUrl. If you use only a configUrl, then the paths to the images within the 'config.xml' file may be incorrect (unless you have edited them manually).

(4) Use relative paths for the configUrl or baseURL. If you hardcode the emmamasseyphoto.com domain in the path, then your gallery will not display if a visitor goes to the www.emmamasseyphoto.com subdomain

I do not see any problem with the containerId entries in the code you posted so you should not be getting any "Cannot find div with id" messages.

Try the following and if it does not work, please double-check that the entire 'live' and 'travel' gallery folders have been uploaded to your root directory.

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

<script type="text/javascript">
    new juicebox({
        baseUrl: "/live/",           
        containerid: "livecontainer1",
        backgroundColor: "rgba(0,0,0,0.9)",
        galleryTitle: "Live",
        showSplashPage: "ALWAYS",
        showOpenButton: "false",
        galleryTitlePosition: "NONE",
        showThumbsOnLoad: "false",
        imageTransitionType: "CROSS_FADE",
        captionPosition: "OVERLAY_IMAGE",
        imageNavPosition: "IMAGE",
        galleryWidth: "100%",
        galleryHeight: "600"
    });
</script>
<div id="livecontainer1"></div>

<script type="text/javascript">
    new juicebox({
        baseUrl: "/travel/",
        containerid: "travelcontainer",
        backgroundColor: "rgba(0,0,0,0.9)",
        galleryTitle: "Travel",
        showSplashPage: "ALWAYS",
        showOpenButton: "false",
        galleryTitlePosition: "NONE",
        showThumbsOnLoad: "false",
        imageTransitionType: "CROSS_FADE",
        captionPosition: "OVERLAY_IMAGE",
        imageNavPosition: "IMAGE",
        galleryWidth: "100%",
        galleryHeight: "600"
    });
</script>
<div id="travelcontainer"></div>

If you continue to experience difficulties, please post the URL to your web page so that I can take a look and help further.

Go to forum: Juicebox-Pro Support

3,538 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

As noted on this web page:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Currently, in your style-menu2.css file, only the #menu ul (and #menu li) elements have been given a CSS position.

You would be able to set a z-index value on your 'page' <div> instead if you gave it a CSS position.
For example, the following should work (as an alternative to setting the z-index value on the #menu ul elements):

<div id="page" style="position: relative; z-index: 9999;">

Go to forum: Juicebox-Pro Support

3,539 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

The backgroundUrl configuration option is, indeed, a gallery-wide setting and is used as the background for all images in the gallery.

Go to forum: Juicebox-Pro Support

3,540 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

All relative paths within Juicebox (including the backgroundUrl) are relative to the HTML document containing the gallery's embedding code (unless you use a baseUrl, in which case all relative paths will be relative to the baseUrl).

Therefore, if you do not use a baseUrl and place an image named 'image.jpg' in your gallery folder (in the same directory as the 'index.html' and 'config.xml' files and the 'jbcore', 'images' and 'thumbs' folders), then all you would enter into the backgroundUrl text field would be "image.jpg" (without the quotes).

Please take care with uppercase vs lowercase for your image filename and file extension as, on a case-sensitive web server, .jpg is not the same as .JPG.

If you continue to experience difficulties, then please upload your gallery to your web server and post a link to it so that I can see the problem for myself and help further.

Go to forum: Juicebox-Pro Support

3,541 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Did your JuiceboxBuilder-Pro installation always do this or did it work when you first installed it?
If this has only just happened recently, has anything changed on your computer (any software updates) which may be contributing to the problem?

Try installing and running JuiceboxBuilder-Lite which comes bundled with Juicebox-Lite and can be downloaded from this web page.
(You can install and run JuiceboxBuilder-Lite and JuiceboxBuilder-Pro side-by-side on the same computer.)

If the same problem happens immediately with JuiceboxBuilder-Lite, then this suggests that there is something on your computer which is preventing both applications from running correctly.
If the same problem does not happen immediately with JuiceboxBuilder-Lite, then this suggests that there is something specifically wrong with your JuiceboxBuilder-Pro installation, although if this is the case, I would have expected a completely clean installation (including manually deleting all related files before re-installation) to have solved the problem.

I hope this at least points you in the right direction.

Go to forum: Juicebox-Pro Support

3,542 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

I believe that the preview is wrong (the title) but when published, it's correct !!

When you create a new topic and click 'Preview topic' before positing, the 'Topic subject' is not actually displayed in the preview at all. (Perhaps you are mistaking some other text of the web page such as "Preview your new topic" for the actual title of your thread.)

Anyway, about the hidden menu, I've done that in CSS :

Use the following CSS and your menu should hopefully be visible on top of your gallery:

#menu ul {
    z-index: 9999;
}

Go to forum: Juicebox-Pro Support

3,543 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

As I can't create a new subject

Once you have logged into the forum, go to the 'Index' tab, click either the 'Juicebox-Pro Support' or 'Juicebox-Lite Support' and then click 'Post new topic' at the top-right of the current list of posts (in the same position as in this screenshot).

menu hidden by a Juicebox gallery

If you are having trouble with your menu being obscured by your Juicebox gallery, then increase the CSS z-index property value on your menu container(s) so that your menu is always stacked on top of other elements on your web page (such as your gallery).

[Thread moved to new topic.]

Go to forum: Juicebox-Pro Support

3,544 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

It keeps wanting to display the Tall and wide jpeg instead of my photos.

It sounds like you are using the sample 'web' gallery form the Juicebox-Pro download zip package.
Create a new gallery with JuiceboxBuilder-Pro, save the gallery to a new empty folder and use the files within this folder when you embed the gallery in your web page (following the instructions here).
You might want to create a new folder on your desktop before creating a gallery with JuiceboxBuilder-Pro.
When you save the gallery on the 'Publish' tab, navigate towards the new folder after clicking the 'Browse...' button.

Go to forum: Juicebox-Pro Support

3,545 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Try uninstalling and reinstalling JuiceboxBuilder-Pro again but this time, between uninstalling and reinstalling the application, search your hard drive for all instances of 'JuiceboxBuilder-Pro' and manually delete all files and folders found (to ensure that nothing is left behind from the previous installation).
I do not know what might be causing your problem but if JuiceboxBuilder-Pro once worked fine for you, then it should do so again after a completely clean install.

Also, if you are using an anti-virus or security program, please make an exception in it for JuiceboxBuilder-Pro in case it is somehow interfering with the application.

Hopefully this will help.

Go to forum: Juicebox-Pro Support

3,546 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

First of all, please make sure that you have the latest versions of both Adobe AIR (v14.0) and JuiceboxBuilder-Pro (v1.4.2).
Adobe AIR can be downloaded from this web page.
Please see the Upgrading Juicebox support page for details on how to get the latest version of Juicebox-Pro.

Try the following:
(1) Uninstall JuiceboxBuilder-Pro:
Mac: Delete the 'JuiceboxBuilder-Pro' file from the Applications folder and empty your Trash.
Windows: Use the uninstaller in the 'Control Panel -> Programs -> Uninstall a program...' list.
(2) Delete the following folder manually:
Mac: /Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
Windows: C:\Users\Username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro
(3) Reinstall JuiceboxBuilder-Pro.

Hopefully this will help.

Go to forum: Juicebox-Pro Support

3,547 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

The problem is that your web server is denying direct access to PHP files.
If you contact your web host, they may be able to help or point you in the right direction.

You could certainly load your galleries into iframes but you could also embed your galleries directly into your WordPress pages or posts using the baseUrl method of embedding as documented here.
Essentially, you would create a Juicebox-Pro gallery using JuiceboxBuilder-Pro, upload your entire Juicebox gallery folder (not just the contents) to your web server and then paste the baseUrl embedding code into the body of your WordPress page or 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) are correct.

Go to forum: Juicebox-Pro Support

3,548 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

I do not see this problem in Mobile Safari or Chrome on an iPod Touch 4 (or in any desktop browser)
What device do you see the problem in?

Try fixing the HTML errors on your web page to see if this helps.
You have a 'c' character at the very beginning of your web page before the Doctype Declaration.
When validating your web page, this results in errors such as "Stray doctype", "Stray start tag html" and "Stray start tag head" which may be causing problems in some browsers. Juicebox relies on the Document Object MOdel (DOM) to be intact. If the DOM is broken, Juicebox may not be able to find certain tags on the page (such as the 'head' and 'body' tags).

I cannot be certain that this will fix your problem but it is certainly a possible cause and errors on your web page should be fixed (for cross-browser consistency) anyway.

Go to forum: Juicebox-Pro Support

3,549 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

3,550 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Lite Support)

I'm glad that you have successfully been able to add a logo to your gallery.
Thank you for posting back to let me know.

Go to forum: Juicebox-Lite Support