2,451

(29 replies, posted in Juicebox-Pro Support)

This issue has been logged.

In the meantime, as the sourcePath entries are not going to be correct (or useful) when opening a gallery on a different computer, perhaps the best course of action would be to simply remove them all from the gallery's XML file before opening the gallery in JuiceboxBuilder-Pro on your Mac.
This can be done in a single search and replace action in a text editor which supports regular expressions, for example Notepad++.

  • Open your gallery's XML file in Notepad++.

  • Go to 'Search -> Replace...' from the drop-down menu at the top.

  • Select 'Regular expression' for the Search Mode.

  • Search for: sourcePath=".*?"

  • Replace with nothing (empty string).

  • Click 'Replace All'.

All sourcePath entries will be removed with this single action.
You can also load multiple XML files into Notepad++ at the same time and remove all sourcePath entries from all files at once.
This might save you some time if you have a large gallery (or multiple galleries) that you need to open on your Mac.

Before making any changes to any files, I recommend that you make backup copies first, just in case anything goes wrong and you need to reinstate the original files at a later date.

2,452

(7 replies, posted in Juicebox-Pro Support)

Thank you for providing the URL to your Juicebox gallery's web page.
You just need to increase the z-index for your menu in order for it to be stacked on top of the gallery (and not hidden underneath it). A z-index value of anything above 500 should work fine.
Try adding the following CSS to the end of your web page's <head> section (after your menu's CSS has been loaded):

<style type="text/css">
    #dropmenuexp.dropmenudiv_c {
        z-index: 9999;
    }
</style>

Otherwise, search through your menu's own CSS for this id/class combination and modify the z-index there.
I've tested this with Firefox's developer tools and it should work fine.

2,453

(7 replies, posted in Juicebox-Pro Support)

I don't see a Juicebox gallery (or any Juicebox gallery embedding code) on the web page whose URL to provided.
However, I have found a few SimpleViewer galleries on your website.

If the problem you are experiencing is with your SimpleViewer-Pro galleries, then please see this FAQ in case it helps.
How do I display SimpleViewer under other elements on my HTML page, for example a drop-down menu?

Also, I notice that your SimpleViewer-Pro galleries are v2.2.0.
Please try upgrading your galleries to the latest version of SimpleViewer-Pro (v2.3.2) as many bugs have been fixed since v2.2.0.
Please see the Version History for a list of changes between versions.
Instructions for downloading the latest version and for upgrading existing galleries can be found on the Upgrading SimpleViewer-Pro support page.

If you are having trouble with embedding a Juicebox gallery on a web page, then please post the relevant URL so that IO can see the problem for myself and hopefully help further. Thank you.

2,454

(4 replies, posted in Juicebox-Pro Support)

@travis.baraki

The current version of WP-Juicebox (v1.4.4.2) now includes the ability to include or exclude the post's Featured Image without having to modify any source code.
To exclude the Featured Image from the Juicebox gallery, just deselect the 'Include Featured Image' checkbox in the gallery settings window.

You can download the current version of the plugin from its support page here.

2,455

(496 replies, posted in Juicebox-Pro Support)

@gfs

Thank you for posting your suggestion here. (It's certainly the best place for all ideas for future versions.)

If anyone reading gfs's post above is looking for similar functionality, then you might like to take a look at the solution I've suggested in this forum thread. Hopefully it will prove to be useful.

I'm glad you've figured it out.
Thanks for letting me know.

2,457

(8 replies, posted in Juicebox-Pro Support)

You're welcome.

I've now modified the code to accept individual images.
You can identify images to be in fixed positions in one of two ways:
(1) You can use a comma-separated list of images to be in fixed positions via the $fixed array at the top of the script.
(2) You can mark images to be in fixed positions within JuiceboxBuilder-Pro by adding the following code anywhere within an image title.

<span class="fixed"></span>

The script just looks for the term 'fixed' and the code added to the image title will not be visible in the gallery itself.

You can use either of these methods (or a combination of both at the same time).

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

$filename = 'config.xml';
$fixed = array(1, 2, 3, 8, 11, 12);

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');

        $marked = array();
        $all = array();

        for ($i = 0; $i < $images->length; $i++) {
            $image = $images->item($i);
            $title = $image->getElementsByTagName('title');
            $text = $title->item(0);
            if (!is_null($text)) {
                if (stripos($text->nodeValue, 'fixed') !== false) {
                    $marked[] = $i + 1;
                }
            }
            $all[] = $image;
        }

        $remainder = $all;

        $clean = array_values(array_unique(array_merge($fixed, $marked)));

        for ($i = 0; $i < count($clean); $i++) {
            $key = intval($clean[$i]) - 1;
            unset($remainder[$key]);
        }

        shuffle($remainder);

        $counter = 0;

        for ($i = 0; $i < count($all); $i++) {
            $image = in_array($i + 1, $clean) ? $all[$i] : $remainder[$counter++];
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        $new_dom_doc->appendChild($new_settings_tag);

        echo $new_dom_doc->saveXML();

    }

}
?>

If you want certain code to appear in all galleries created by the plugin, you can add the code to the template files that the plugin uses to generate the pages.
If you want your @import line of code to be included in all gallery 'theme.css' files, just add it to the 'juicebox_pro.lrwebengine/jbcore/classic/theme.css' file.

2,459

(3 replies, posted in Juicebox-Pro Support)

Why arent we in the top of the search? Why only 2 pictures are shown?

Unfortunately, only Google can answer your questions with any authority. They are the only ones that know what algorithms they use to index and rank pages.

I notice that the pages ranked above yours in the search results include YouTube, Facebook and Twitter pages.
They are very large websites with a huge number of backlinks and, as such, they will probably always be ranked above your own website. Unfortunately, there is little that you can do to combat this when dealing with subject matter that crops up on popular websites and media sharing platforms.

The best you can do is provide information regarding your images in your web page (which is what the SEO Content Code generated by JuiceboxBuilder-Pro does) and follow Google's own guidelines and suggestions in their Search Engine Optimization Starter Guide: http://static.googleusercontent.com/med … -guide.pdf
Here's a one-page version: https://storage.googleapis.com/support- … 97B2C885BD

If you have not already done so, then I would recommend submitting your site to Google to be indexed via their Search Console: https://www.google.com/webmasters/tools/submit-url
If there are few (or no) links to your own web site from other web sites, then Google may not be able to find or index your site.

Another question is, that in the source code of the image gallery generated, we can see that the alt text doesnt show the original alt text, either it show the url.

I would think that Google are more likely to index your gallery pages based on the static HTML code on the page itself rather than the code generated dynamically by the 'juicebox.js' file. I would certainly think it is unlikely that Google would ignore the static HTML code in favor of the dynamically generated code (although, again, only Google would know this for sure).

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.

2,461

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

    }

}
?>

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

2,463

(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

2,464

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

2,465

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

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

2,467

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

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

2,469

(7 replies, posted in Juicebox-Pro Support)

You're welcome.

2,470

(3 replies, posted in Juicebox-Pro Support)

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

2,471

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

2,472

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

2,473

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

2,474

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

2,475

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