2,526 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

How to change the font to a Google font (Open 300). If possible, the easiest way... :)

Please see the Using Custom Fonts support section. There is a link to a Juicebox gallery using a Google font. You can check the source of the page in your browser and copy or modify it to suit your own needs.

How to the text size for all the caption (left text is bigger than numbers at right)

You can change the font size of an image title or an image 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>

Incidentally, I notice that you use image titles instead of image captions.
By default, image titles have a slightly larger font size than image captions so if you used image captions instead of image titles, you should find that the font size of the image captions matches that of the image numbers.

Go to forum: Juicebox-Pro Support

2,527 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

I'll add it to the suggestions.

That's a good idea. (It's certainly the best place for all the suggestions for future versions. It keeps them all together and ensures that they are not overlooked by the developers.)

Here's a PHP script you can use to fix the position of the first few images in your gallery and then shuffle the rest.
(1) Create a regular gallery with JuiceboxBuilder-Pro.
(2) Save the code below in a file named 'config.php'.
(3) Place the 'config.php' file in your gallery folder.
(4) Use a configUrl in your gallery's embedding code to point towards the 'config.php' file:

configUrl: "config.php",

(5) Change the $fixed variable's value (at the top of the 'config.php' file) to be the number of fixed images at the start of the gallery.

Just be sure to not set randomizeImages="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) as this will randomize the images after the script sets the image order.

I hope this helps.

<?php
header('Content-Type: application/xml');

$filename = 'config.xml';
$fixed = 2;

if (is_file($filename)) {

    $dom_doc = new DOMDocument('1.0', 'UTF-8');
    $dom_doc->load($filename);

    $settings_tags = $dom_doc->getElementsByTagName('juiceboxgallery');
    $settings_tag = $settings_tags->item(0);

    if (!is_null($settings_tag)) {

        $new_dom_doc = new DOMDocument('1.0', 'UTF-8');
        $new_dom_doc->formatOutput = true;

        $new_settings_tag = $new_dom_doc->createElement('juiceboxgallery');

        $values = array();

        foreach ($settings_tag->attributes as $attribute) {
            $name = $attribute->nodeName;
            $value = $attribute->nodeValue;
            $values[$name] = $value;
        }

        foreach ($values as $key=>$value) {
            $new_settings_tag->setAttribute($key, $value);
        }

        $images = $settings_tag->getElementsByTagName('image');

        $all = array();

        foreach ($images as $image) {
            $all[] = $image;
        }

        $integer = intval($fixed);
        $clean = $integer < 0 || $integer > $images->length ? 0 : $integer;

        $remainder = array_slice($all, $clean);

        shuffle($remainder);

        for ($i = 0; $i < $clean; $i++) {
            $image = $all[$i];
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        foreach ($remainder as $image) {
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        $new_dom_doc->appendChild($new_settings_tag);

        echo $new_dom_doc->saveXML();

    }

}
?>

Go to forum: Juicebox-Pro Support

2,528 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

You can see the linear-gradient for the caption

I notice that you have set only captionBackColor. You can set both captionBackColor and captionBackTopColor (both in the 'Color' section) to set the colors for the top and bottom of the caption area (which blend into each other in the middle).

If you do not explicitly set captionBackTopColor, then its default value of rgba(0,0,0,0) will be used and the captionBackColor (at the bottom of the caption area) will fade into a fully transparent area at the top. If you want such a gradient (a single color fading into transparency), then set either captionBackColor or captionBackTopColor to rgba(0,0,0,0) and the other to whatever color you like.

To see how two colors blend into each other, here is a sample gallery setting captionBackColor=rgba(255,0,0,1) (opaque red) and captionBackTopColor=rgba(0,255,0,1) (opaque green).

Also, your captionBackColor has been set to white (with a transparency of 0.3) and your gallery's background is also white. Setting a captionBackColor to the same color as your gallery's background means that it will not be visible (no matter what its transparency). (White with any amount of transparency will always look white on top of a white background.)

You can se the logo : even set at 50px height, when small window, the image go below the logo...

The extra height is likely to be due to padding used for the gallery title (which is usually text). The easiest remedy would be to increase the topAreaHeight (in the 'General' section) to allow more room for your logo image.

shows a few errors in the code

The errors reported by the validator are the height='50px' attribute in the <img> tag and no 'alt' attribute. When used as an attribute, the height should be numeric (with no 'px' suffix). A missing 'alt' attribute will fail validation but will not cause any problems. (This is unlikely to make a difference to the display. Most modern browsers will likely be tolerant towards such validation errors.)

Go to forum: Juicebox-Pro Support

2,529 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

As you are aware, there is currently no way to do this in Juicebox-Pro.
It might be quite a difficult thing to achieve.

One approach might be to create a regular Juicebox-Pro gallery with a static XML file but instead of using this XML file directly, use a configUrl to point towards a PHP (or other server-side scripting language) file which would generate a new XML file dynamically.
The PHP file could read the static XML file and load all the <image> tags into an array and you could then rearrange the elements in the array using PHP functions such as shuffle) before generating a new XML file on-the-fly.
For example, you could load only certain images into a new array to shuffle before writing them out around other images in fixed positions.
It would involve quite a bit of work (and knowledge of PHP) but it would be possible.
These three forum posts might be useful:
http://stackoverflow.com/questions/2671 … f-an-array
http://stackoverflow.com/questions/1775 … -it-in-php
http://stackoverflow.com/questions/2827 … e-elements

Go to forum: Juicebox-Pro Support

2,530 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Please note that the we did not write the Juicebox module for Drupal ourselves. It is an unofficial plugin but is well supported by its author over in the Drupal forum. As such, support for the module would be better directed there where the author of the module (who will be more familiar with both Drupal and the module itself) should be able to help you out further: https://www.drupal.org/forum

Please also see the author's notes on Flickr integration within the module here: https://www.drupal.org/node/1942488

With that in mind, you might like to try entering your Juicebox Flickr Options (such as those below) into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').

useFlickr="TRUE"
flickrUserName="your_flickr_username"

For a list of all Flickr options that Juicebox uses, please see the Lite and Flickr sections of the Config Options page.

Go to forum: Juicebox-Pro Support

2,531 Reply by Steven @ Juicebox

(498 replies, posted in Juicebox-Pro Support)

@alessio

It is not possible to have parts of the previous and next images visible to the left and right of the main image (like in the gallery whose link you provided) but you could have the next image as the gallery's background.
You would need to use several Juicebox-API methods to fetch the URL of the next image in the gallery and then set the gallery container's background via CSS (using JavaScript) each time a new image is selected.
As an example, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <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',
            backgroundColor: 'rgba(0,0,0,0)',
            enableLooping: 'TRUE'
        });
        
        // Run each time a new image is selected
        jb.onImageChange = function(e) {
        
            // Get current image id
            var image = e.id;
            
            // Get total number of images in gallery
            var total = jb.getImageCount();
            
            // Set next image id (set to 1 if current image is last in gallery)
            var next = image === total ? 1 : image + 1;
            
            // Get info for next image
            var info = jb.getImageInfo(next);

            // Get url for next image
            var url = info.imageURL;
            
            // Set background
            $('#juicebox-container').css('background', 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("' + url + '")').css('background-position', 'center').css('background-size', 'cover');
        };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

Go to forum: Juicebox-Pro Support

2,532 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

No problem.
Thanks for confirming it works (and for reporting the problem in the first place).

Go to forum: Juicebox-Pro Support

2,533 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Unfortunately, it is not possible to display the total number of images as part of the thumbnail paging text.

As a possible alternative, you could fetch the total number of images in the gallery using the Juicebox-Pro API getImageCount() method. You could then display the information elsewhere on your web page alongside your gallery.

For example:

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '800',
        galleryHeight: '600'
    });
    jb.onInitComplete = function() {
        var total = jb.getImageCount();
        $('#count').html('<p>Total Image Count: ' + total + '</p>');
    };
</script>
<div id="juicebox-container"></div>
<div id="count"></div>

Go to forum: Juicebox-Pro Support

2,534 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

- In C:\Program Files\JuiceboxBuilder-Pro\template\jbcore, the second line of juicebox.js reads " * Juicebox-Pro 1.4.4.1"

This is not a problem (for this new release).
The only change in the Juicebox-Pro v1.4.4.2 release (from v1.4.4.1) is to JuiceboxBuilder-Pro (the desktop application) which now includes the required meta viewport tag in the gallery's 'index.html' file.
The core Juicebox files (in the 'jbcore' folder) remain the same as in the v1.4.4.1 release so the internal version of Juicebox-Pro is still v1.4.4.1.
For more information on the new Juicebox-Pro v1.4.4.2 release, please see this blog entry.

- I've copied the \jbcore\ directory to C:\Users\...\AppData\Roaming\jAlbum\skins\Juicebox\res\juicebox\jbcore .

That's fine. That will ensure that the jAlbum skin uses the latest core Juicebox files.

- In jAlbum 12.7.2, if I click on the "i" icon for the Juicebox skin, it says "Current Version: 1.4.4.2" and "Latest Version: 1.4.4".

The 'Current Version' is taken from the 'skin.properties' file. As this is just a text string, I can set it to the same version number as the Juicebox release it relates to.
However, internally within jAlbum, a skin's 'Latest Version' number can be only be three numbers (major.minor.revision) which is why the skin is still on v1.4.4. If I increased the skin's version number to v1.4.5 (the minimum increase possible), this would cause even more confusion when Juicebox v1.4.5 is released.

In that gallery's index.html, there is no Meta Viewport data

It looks like you've found a bug in the jAlbum skin. In each folder throughout the album's structure, there is a 'gallery.html' file which can be used to view that folder's gallery on a page of its own. The required meta viewport tag is included in each of these files. However, if you deselect 'Process subdirectories' on jAlbum's 'Settings -> Advanced -> General' tab (to process only one directory and disable the navigation tree menu), the meta viewport tag is not included in the 'index.html' file (and it should be as all that will now be on the 'index.html' page is a single gallery).
I'll get a fix out for this as soon as I can but, in the meantime, you can either:
(1) Use the 'gallery.html' file instead of the 'index.html' file. You can rename it if you like.
(2) Open the 'index.html' file in a plain text editor and add the meta viewport tag manually.

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />

Thank you for reporting this.

Edit:
The Juicebox skin for jAlbum has now been updated with the bugfix noted above (where the meta viewport tag was not included in the 'index.html' file when the gallery was the only content on the page).
It can be downloaded from the jAlbum skin repository here. (It's version number remains at v1.4.4.2 to keep it in line with the current Juicebox version number.)

Go to forum: Juicebox-Pro Support

2,535 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

You're welcome.

Go to forum: Juicebox-Pro Support

2,536 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

No problem. I'm glad that you've found what you were looking for.

Go to forum: Juicebox-Pro Support

2,537 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

You should be able to create a gallery with JuiceboxBuilder-Pro using accented characters in image filenames and view it locally but the problem is likely to arise when you upload the gallery to your web server.
As a test, upload an image with an accented character in its filename (such as 'café.jpg') to your web server and try to view the image directly by entering its URL into your browser's address bar (bypassing Juicebox).
You should not have such problems if you stick to using standard ASCII characters for your image filenames (rather than extended ASCII characters/accented characters).

Go to forum: Juicebox-Lite Support

2,538 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

That fixed the flashing

That's great to hear. Thank you for letting me know.

but the autoplay is still switching from fade to slide on mobile.

The imageTransitionType configuration option is supported in Large Screen Mode and Mouse Input Mode only. (This is noted in the short description of the option in the Main Image section of the Config Options page.)
You can force a gallery to be displayed in Large Screen Mode (by setting screenMode="LARGE") but on a touch-enabled mobile device, the Input Mode will always be Touch and the image transition type for Touch Input Mode will always be SLIDE (which is the transition which best fits with the swipe gesture for navigating between images).
It is not possible to override the Input Mode (Touch vs Mouse) in a Juicebox gallery.

Go to forum: Juicebox-Pro Support

2,539 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

If you are using WP-Juicebox (the Juicebox plugin for WordPress), then, from the Dashboard, go to 'WP-Juicebox -> Manage Galleries'.
Next, click the 'Set Defaults' button.
You can now enter Lite and Pro Options (in the Pro Options text area) as new custom default values. Click the 'Set' button (at the bottom of the settings window) to save them.
Now, each time a new gallery is created, it will use these new custom default values (which can be further tweaked for each individual gallery if necessary).

Go to forum: Juicebox-Pro Support

2,540 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

As an image filename forms part of a URL when uploaded to a web server, it would be wise to use only web-safe characters (and not other characters such as an apostrophe).
Please see section 2.3 of this document for details.

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

JuiceboxBuilder-Pro can handle all images whose filenames use any or all of these unreserved characters.

However, you should be able to use apostrophes and quotes in image titles.
Please make sure that you are using the latest version of JuiceboxBuilder-Pro (upgrading instructions can be found here) or if you are building your gallery manually, make sure that your image title text is enclosed within <![CDATA[ ... ]]> tags.
For example, to display the text '"<>& (an unlikely combination of characters but one that demonstrates the need for CDATA tags), this won't work:

<title>'"<>&</title>

... but this will work:

<title><![CDATA['"<>&]]></title>

(JuiceboxBuilder automatically puts all image titles and captions within CDATA tags.)

Go to forum: Juicebox-Lite Support

2,541 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

I notice that the Cache-Control header for your website has the setting max-age=0.
From the Google Developers page:

“max-age”

This directive specifies the maximum time in seconds that the fetched response is allowed to be reused for from the time of the request - e.g. “max-age=60” indicates that the response can be cached and reused for the next 60 seconds.

Setting max-age=0 will expire all assets immediately, indicating that cached versions should not be used and that a browser should reload them from the web server.

Try setting something like the following in an .htaccess file in your root directory.

Header set Cache-Control "max-age=2592000"

... or ask your web host to remove the max-age=0 setting from your website.

Hopefully this will solve your problem.

Go to forum: Juicebox-Pro Support

2,542 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Lite Support)

As Blogger is not a regular web host and you will not be able to upload your Juicebox gallery files directly to the web space that Blogger provides (Blogger's own web server), you will need to host your gallery elsewhere (such as Google Drive) and load the gallery into your Blogger page using an iframe.

Please see the Embedding in a Web Template Site support section for details.

Go to forum: Juicebox-Lite Support

2,543 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

That's great. Thanks for letting me know.

Go to forum: Juicebox-Pro Support

2,544 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Thank you for pointing this out. I have notified the developers.
In the meantime, perhaps the easiest way to remove the text shadow from the Gallery Title (and the Back Button text) would be to remove (or comment out) line 980 of the 'jbcore/classic/theme.css' file.

text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.2);

Please note that the line number refers to the current version of Juicebox-Pro (v1.4.4.2).
I hope this helps.

Go to forum: Juicebox-Pro Support

2,545 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

I see the problem in your own gallery but I have been unable to replicate it in a test gallery of my own using, reproducing your gallery as closely as possible (using the same configuration options that your gallery uses and using image captions with links).

The main difference between your own setup and mine is the web server the galleries are hosted on.
This problem may be related to server-side caching.
If caching is disabled on your web server, then Juicebox will have to download the images every time it needs them (as it will not be able to request them from a cache) and this may be causing the problem.
If you have an Apache web server and have a .htaccess file with an entry such as the following (to disable caching), then please try removing it to see if it helps.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

Otherwise, please check with your web host to see if caching is enabled on your hosting account (and if not, ask if they could enable it).

Be sure to clear your browser's cache after making any changes and before reloading your gallery's web page.

Hopefully this will help.

Go to forum: Juicebox-Pro Support

2,546 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Us the link to download the latest version of Juicebox-Pro and you can then install the latest version of Juicebox-Pro on your laptop following the 'Installation' instructions in the JuiceboxBuilder User Guide.

You should be able to install the new version of JuiceboxBuilder-Pro on top your existing version but if you run into any problems, just uninstall your existing version first.

Further details on how to download the latest version and how to upgrade existing galleries can be found on the Upgrading Juicebox support page.

Go to forum: Juicebox-Pro Support

2,547 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

I'll try asking the support team from the Hover plugin

OK. They should certainly be able to point you in the right direction.

Go to forum: Juicebox-Pro Support

2,548 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

I would recommend using the baseUrl method of embedding as documented here.
This allows you to upload your complete gallery folder (not just the contents) to your web server. Keeping all the gallery files together inside the gallery folder should help to keep things organized.
It does not matter where on your web server you upload your gallery folder to as long as the two paths in the baseUrl embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

For example, if your gallery folder is named 'my_gallery_folder' and you upload the complete gallery folder to your web space's root directory, then you could use the following embedding code in any web page within your site to display your gallery (changing the dimensions and background color as required).

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/my_gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

The leading slashes in the paths above denote your root directory.

Please also see the note regarding 'Embedding Using Dreamweaver' here.

Go to forum: Juicebox-Pro Support

2,549 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

The problem might be finding the correct element(s) to apply a high enough z-index to.
However, once you find them, you might need to use a z-index value higher than 9999. (Juicebox uses z-index: 9999; for the #jb-glry-dlg container in the 'jbcore/classic/theme.css' file).
Whatever ids or classes you were setting the z-index to 9999 on, try using a higher value to see it this helps.
Otherwise, whatever plugin you are using to display your hidden images, try contacting their support and ask how to increase the z-index value. They should know which elements/classes within their script the z-index value should be applied to.

Go to forum: Juicebox-Pro Support

2,550 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad that upgrading your gallery was all that was required.
Thank you for letting me know.

Go to forum: Juicebox-Pro Support