2,476

(15 replies, posted in Juicebox-Pro Support)

Juicebox-Lite has a limit of 50 images per gallery. Juicebox-Pro does not have a limit to the number of images you can have in a gallery. It sounds like you have not updated the Drupal module to use your Juicebox-Pro files.

Follow the 'Installation' instructions here: https://www.drupal.org/node/2000300#installation
... and make sure that you use the 'jbcore' folder from the Juicebox-Pro download zip package.

If you continue to experience difficulties, please post back with the URL to your gallery's web page so that I can take a look at the problem and hopefully help further.

2,477

(1 replies, posted in Juicebox-Pro Support)

The 'juicebox_pro_1.4.4.2.zip' file does contain 33 files (which includes the Lightroom plugin files) so your zip file appears to be complete.
However, you might somehow be looking at just the files rather than the files and folders.

When you extract the 'juicebox_pro_1.4.4.2.zip' file, you should have a folder named 'juicebox_pro_1.4.4.2'.
Inside this folder is a folder named 'adobe-lightroom-plugin'. Inside this folder is the Juicebox plugin for Lightroom (a folder named 'juicebox_pro.lrwebengine').
juicebox_pro_1.4.4.2/adobe-lightroom-plugin/juicebox_pro.lrwebengine

It is the 'juicebox_pro.lrwebengine' folder that you can drag and drop onto your Lightroom desktop shortcurt to install the plugin.
Alternatively, you can follow the manual installation instructions on the plugin's support page.

I hope this helps you to find the plugin.

... that area is transparent only when viewing a gallery in vertical mode, but not horizontal...

Looking at your screenshots, it looks like the caption area is visible in both horizontal and vertical modes. It's just the layout which (almost) hides the problem in vertical mode. You can see the top of the caption area overlapping the lower part of your image frame. The rest of the caption area just overlaps the gallery background so the problem cannot be seen in this area.

captionBackTopArea has a different default value for Small Screen Mode: rgba(0,0,0,0.3) instead of rgba(0,0,0,0).
However, explicitly setting it to rgba(0,0,0,0) does not seem to help.

This certainly looks like a bug. I'll notify the developers.

In the meantime, a suitable workaround should be to set captionBackTopColor to a fully transparent color other that black, as well as setting captionBackColor="rgba(0,0,0,0)". For example:

captionBackColor="rgba(0,0,0,0)"
captionBackTopColor="rgba(255,0,0,0)"

I hope this works OK.
Thank you for reporting this problem.

2,479

(14 replies, posted in Juicebox-Pro Support)

I recommend that you post suggestions for new versions (of the core Juicebox or any of the associated plugins) in the Feature Requests forum thread.
I do not know the likelihood of your suggestion being included in a future version of the Lightroom plugin but posting it in the Feature Requests thread gives it the best chance of being seen and considered by the developers.

I know you have already mentioned it in passing (and I realise that it would need to be done with a unique path for each gallery) but you could use a single global search and replace action in a text editor to change:

imageURL="

... to something like:

imageURL="http://www.example.com/gallery/

It should take less than a minute per gallery and might be an alternative workaround.

2,480

(7 replies, posted in Juicebox-Pro Support)

i have the z-index set high enough

The z-index for your menu is not quite high enough. It is currently set to 100 (in your 'slidingdoors-2.css' file) but it needs to be greater than 500 in order to be stacked on top of the gallery when a visitor hovers over a menu entry which overlaps the gallery.

the issue is when i try to select either "retail" or "residential" from the sub nav. i cannot and it clears away.

This is exactly the issue that I first saw and that my code above should fix.
As I mentioned, I tried the code in Firefox's developer's tools (setting z-index: 9999; dynamically on the #dropmenuexp.dropmenudiv_c container) and it solved the problem.

Please try adding the code to your web page and then clear your browser's cache before reloading your web page.
Be sure to add the code to the end of your web page's <head> section (so that it is not overwritten by the menu's own CSS).
If in any doubt, try adding CSS !important as follows:

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

2,481

(1 replies, posted in Juicebox-Pro Support)

Your caption text color is probably being overwritten by a global custom CSS rule on your web page.
For example, if you have something like:

p {
    color: #ff0000;
}

... then this rule will apply to all text within all <p> tags on your web page including any in your Juicebox gallery. (Juicebox displays image captions within <p> tags.) Juicebox has no option but to inherit such global CSS rules.
Please check your web page for any global CSS rules. Ideally, CSS rules should be applied to only those elements on your web page which require them through use of CSS selectors (classes and ids).

If you like, you could set the color for each individual caption through use of HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

If you continue to experience difficulties, then please post the URL to your gallery so that I can take a look at the problem for myself and hopefully help further. Thank you.

2,482

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

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

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

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

(498 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,488

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

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

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

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

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

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

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

2,498

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

(7 replies, posted in Juicebox-Pro Support)

You're welcome.