Juicebox v1.5.1 Released!

2015-07-07 10:35:11

@marathonmax

The bugfix you quoted ensures that images are scaled to fill the thumbnail dimensions. (Images were previously only cropped.)

For example, prior to the bugfix, if you had a thumbURL image which had dimensions of 1024 x 768 and your thumbWidth and thumbHeight were both 85 (default values), then the actual thumbnail displayed in the gallery would be just the centre 85 x 85 of the original image.
However, now (post-bugfix), the 1024 x 768 image will be scaled to fill the thumbnail dimensions so the height of the original image will be scaled down (from 768 to 85) to fill the thumbnail height and the width will be cropped (losing 256 pixels).

Basically, pre-bugfix, the images used for the thumbnails really had to be the same dimensions as the thumbWidth and thumbHeight (although this would not have been a problem when using JuiceboxBuilder-Pro to build a gallery). Now though, it is possible to use images of any dimensions for the thumbnails (although cropping will occur if the aspect ratios of the source images and thumbnail dimensions do not match exactly). This would be useful if someone wanted to use a single folder of images for both the main images and the thumbnails in a gallery.

Thumbnails do not need to be square (you can set thumbWidth and thumbHeight independently of each other) but all thumbnails in a gallery will have the same dimensions.

Please note that thumbWidth and thumbHeight are Pro-only options which are not available in Juicebox-Lite, the free version.

2015-07-05 18:33:42

Juicebox-Pro (but not Juicebox-Lite) supports the flickrGroupId configuration option to display photos posted to a group's pool.
A list of all Flickr Pro Options can be found here.

2015-07-04 19:11:02

You're welcome.

2015-07-03 10:41:23

Just a thought which might help either yourself or anyone else reading this thread...
You could perhaps change the captionPosition. Maybe not an ideal solution but it might be a suitable workaround until the bug is fixed.

2015-07-03 10:12:34

A Juicebox gallery container is essentially just a <div> on a web page and a Juicebox gallery will resize in exactly the same way as any other <div> with similar dimensions would.
If you want a gallery container to retain a constant aspect ratio at all times, then please see the example in this forum post.

2015-07-03 10:12:30

Thank you for pointing this out. I have noted it in my bug report.
Unfortunately, the only workaround for this seems to be my second suggestion above (to make your gallery images larger so that they always fill the image area top to bottom so that the problem cannot be seen).

2015-07-03 10:11:27

Here's an example of how you can find the actual height of the current image being displayed in the gallery (using JavaScript and the Juicebox-Pro API).
Just 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>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                containerId: "juicebox-container"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var image = new Image();
                image.src = url;
                var height = image.height;
                alert('Actual height of current image is ' + height + 'px.');
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Please note that this will provide the actual height of the file in the 'images' folder (not the height at which the image is displayed in the gallery which will depend on factors such as the gallery dimensions, the browser window size and whether or not gallery elements reserve space in the gallery reducing the available image area).

If you wanted to act upon the actual height of the current image and change the gallery's height to suit the current image's height you could do something like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var widthInteger = 600;
            var widthString = widthInteger.toString();
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: widthString,
                imageScaleMode: "SCALE"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var image = new Image();
                image.src = url;
                var height = image.height;
                var width = image.width;
                var newHeight = Math.floor((widthInteger/width)*height) + 105;
                jb.setGallerySize(widthString, newHeight);
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

The gallery would have a constant width (600px in the example) and its height would be dependent on the height of the current image. The '105' value adds enough height to the gallery to accommodate the thumbnails and the thumbnail padding at their default values of '85' and '10' (top and bottom).

2015-06-29 20:14:39

... but nothing appears on the page itself - no image, no thumbnails, no navigation, nothing.

It sounds like there might be a problem with the actual Juicebox core files on your web server.
Try re-uploading your gallery's 'jbcore' folder to ensure that all Juicebox core are present and correct (in case something happened during the initial upload resulting in missing or corrupt files).
Also, please see this FAQ as it seems to describe your scenario and may help:
When I view my gallery, I see a blank area. Why?

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

2015-06-29 20:14:35

Thank you for reporting this issue.
I have logged a bug report with the developers and hopefully it will be fixed in a future version of Juicebox.
In the meantime, you could perhaps tweak the position of the Button Bar using code such as the following in the <head> section of your gallery's web page:

<style type="text/css">
    .jb-bb-bar {
        margin-left: -2px !important;
    }
</style>

2015-06-28 19:22:56

I'm glad it worked. Thank you for letting me know.

2015-06-28 09:11:18

It worked for me (with your menu covering both the gallery's Button Bar and caption area) when I dynamically added the code to your web page locally using the developer tools in Firefox.

Please try changing lines 2704-2712 in your bootstrap.min.css file from:

.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease
}

... to:

.collapse {
    z-index: 9999;
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
}

... and clear your browser's cache before reloading your web page to ensure that your browser is using the new version of the CSS file.

If this still does not work, then please let me know and I'll take another look.

Also, the link I posted above (regarding UberMenu and 'z-index' values) should help.
http://sevenspark.com/diagnosis/z-index … rm_ref=877

2015-06-28 09:04:38

If you do not set playAudioOnLoad="TRUE" or showAudioButton="TRUE" (to allow audio functionality), then audioUrlMp3 will not actually be used and its entry in the gallery's 'config.xml' file will just be redundant.
If you wanted to prevent audioUrlMp3 from being written to the gallery's 'config.xml' file, then you could change line 42 of the plugin's 'config.xml' file from:

if (value ~= tostring(model.default[key])) then

... to:

if (value ~= tostring(model.default[key]) and key ~= "audioUrlMp3") then

2015-06-27 20:34:27

As the new Lightoom plugin no longer has a Pro Option text area, you would need to use one of the available configuration options to enter your custom data.
I would recommend using an input field which accepts text and will not actually be used in your own gallery. For example, if you are not using audio in your gallery, you could use the audioUrlMp3 field.

Add the following to the plugin's 'config.xml' file (on line 48 which is currently blank):

<% local dir = ""
if mode ~= "preview" then
    dir = model.juicebox.audioUrlMp3
end %>

... and change line 54 from:

<image imageURL="images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">

... to:

<image imageURL="<%= dir %>images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">

You can then enter something like the following into the audioUrlMp3 field:

http://www.example.com/juicebox/gallery/

... and the imageURL entries will look like this:

imageURL="http://www.example.com/juicebox/gallery/images/image.jpg"

Please note that the line numbers refer to the current version of the plugin (v1.4.4.0).

2015-06-27 10:02:42

Thank you for the additional information.
I now see the problem in your sidebar gallery when the menu is not fixed to the top of the page.

It looks like it might be enough to just add the following to your web page's CSS:

.collapse {
    z-index: 9999;
}

Add this to the existing .collapse code in your 'bootstrap.min.css' file (on line 2704) and it will be included in all of your web pages that load the CSS file.

Hopefully this will solve your problem.

For reference, further information about UberMenu and 'z-index' issues can be found here.

2015-06-27 09:33:50

The easiest solution would probably be to increase the CSS 'z-index' value on your menu and hover elements so that they are stacked on top of all gallery elements.

I don't actually see the problem myself.
If I scroll down one of your pages with a gallery on it (so that the caption area is close to the menu) and then hover over a menu button, the menu element completely covers the gallery (the caption does not show through).
If you can tell me exactly how I might be able to see the problem (which page or pages exhibit the problem and what steps I can take to replicate it), I will take another look and hopefully be able to help further.

2015-06-27 08:58:37

I see the problem now in a large desktop monitor. (I was previously using my laptop.)
The problem is seen only when there is space between the main image and the thumbnails (which is why you see the problem only in expanded mode and I did not see the problem on my laptop).

The problem seems to be due to setting imageTransitionType="CROSS_FADE" and it is not directly related to the AutoPlay functionality.
If you are currently viewing the last thumbnail on a thumbnail page and manually navigate to the next image using the main image navigation button, the problem can be seen.

I have logged a bug report with the developers and this should hopefully be fixed in the next version of Juicebox-Pro.

In the meantime, possible workarounds would be to either:
(1) Set imageTransitionType to SLIDE, FADE or NONE.
... or:
(2) Make your gallery images larger so that, even on large monitors or in expanded mode, the images fill the image area from top to bottom (so that the problem cannot be seen).

2015-06-26 22:10:29

There are two possible instances for 'alt' attributes for each image.

(1) The 'alt' attribute for the <img> tag corresponding to the image displayed in the gallery. This 'alt' attribute is populated by the Image Title and is generated dynamically by the 'juicebox.js' JavaScript file at the time the gallery is displayed. The 'juicebox.js' file is obfuscated and cannot be modified so this 'alt' attribute cannot be changed.

(2) The 'alt' attribute for the <img> tag in the SEO content code (which is produced only if the 'Add SEO Conntent' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section). This 'alt' attributes is populated by the Image Caption. Although it is not possible to change what JuiceboxBuilder-Pro uses to populate these 'alt' attributes, the SEO content code forms part of the gallery's embedding code (presented on JuiceboxBuilder-Pro's 'Publish' tab and included in the gallery's 'index.html' file) which you can edit manually in a text editor.

2015-06-26 07:29:03

I am unable to see the problem when viewing your gallery in Chrome, Firefox or IE11 on my PC.
What browser (or browsers) to you see the problem in?
Also, does the problem happen only in expanded mode or also in normal mode?

I notice that your gallery uses Juicebox-Pro v1.4.4 which was released only a week ago.
Try completely clearing your browser's cache before reloading your gallery's web page to make sure that your browser is not using cached files from previous versions of Juicebox-Pro.

2015-06-26 07:11:47

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

2015-06-24 21:30:14

The problem is likely to be due to the backslashes in your gallery's imageURL and thumbURL paths (in the 'config.xml' file). As these are relative paths, use slashes instead.
For example, change:

imageURL="images\0000029709.jpg"

... to:

imageURL="images/0000029709.jpg"

A couple of other things to check/try...

In your gallery's embedding code (in the 'index.html' page), change:

useThumbDots: "0"

... to:

useThumbDots: "TRUE"

This will probably not make a difference but possible values for the useThumbDots configuration option are TRUE and FALSE (rather than 1 and 0).

Also, try removing the comment from the top of the 'config.xml' file.

Hopefully this will solve your problem.

2015-06-23 22:24:38

I'm glad you've been able to figure it out. Thanks for letting me know.

2015-06-23 21:37:00

The image data must be in the required <image> tag format (using imageURL and thumbURL attributes) in an XML file.
It is not possible to provide the image data to Juicebox via JavaScript in the embedding page.
Please see Step #4 ('Edit config.xml') in the Manually Creating a Gallery support section for a sample <image> tag.
You could, however, use a server-side scripting language (such as PHP) to extract data from a custom source and build the XML file dynamically (see the example in my first post above).

2015-06-23 18:07:03

The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.

2015-06-23 18:05:17

The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.

2015-06-23 18:02:11

The bug noted above (whereby a page containing an embedded gallery cannot be scrolled in Windows mobile devices) has now been fixed in Juicebox v1.4.4.
Please see the Upgrading Juicebox support page for instructions on how to download the latest version and upgrade existing galleries.
Please see the Version History for a list of changes between versions.

Juicebox v1.5.1 Released!

Search options (Page 110 of 235)

Posts found: 2,726 to 2,750 of 5,851

2,726 Reply by Steven @ Juicebox 2015-07-07 10:35:11

Re: thumbnail cropping (3 replies, posted in Juicebox-Pro Support)

2,727 Reply by Steven @ Juicebox 2015-07-05 18:33:42

Re: Flickr Groups [SOLVED] (3 replies, posted in Juicebox-Lite Support)

2,728 Reply by Steven @ Juicebox 2015-07-04 19:11:02

Re: Serve images from CDN (14 replies, posted in Juicebox-Pro Support)

2,729 Reply by Steven @ Juicebox 2015-07-03 10:41:23

Re: Caption Overlay moves down on thumbnail row refresh [SOLVED] (9 replies, posted in Juicebox-Pro Support)

2,730 Reply by Steven @ Juicebox 2015-07-03 10:12:34

Re: Remove extra space in responsive theme? (3 replies, posted in Juicebox-Pro Support)

2,731 Reply by Steven @ Juicebox 2015-07-03 10:12:30

Re: Caption Overlay moves down on thumbnail row refresh [SOLVED] (9 replies, posted in Juicebox-Pro Support)

2,732 Reply by Steven @ Juicebox 2015-07-03 10:11:27

Re: images are responsive, container is not (4 replies, posted in Juicebox-Pro Support)

2,733 Reply by Steven @ Juicebox 2015-06-29 20:14:39

Re: Images not showing in new galleries on Amazon S3 (7 replies, posted in Juicebox-Lite Support)

2,734 Reply by Steven @ Juicebox 2015-06-29 20:14:35

Re: Menu Bar not Centered (1 replies, posted in Juicebox-Pro Support)

2,735 Reply by Steven @ Juicebox 2015-06-28 19:22:56

Re: ubermenu and captions [SOLVED] (7 replies, posted in Juicebox-Pro Support)

2,736 Reply by Steven @ Juicebox 2015-06-28 09:11:18

Re: ubermenu and captions [SOLVED] (7 replies, posted in Juicebox-Pro Support)

2,737 Reply by Steven @ Juicebox 2015-06-28 09:04:38

Re: Serve images from CDN (14 replies, posted in Juicebox-Pro Support)

2,738 Reply by Steven @ Juicebox 2015-06-27 20:34:27

Re: Serve images from CDN (14 replies, posted in Juicebox-Pro Support)

2,739 Reply by Steven @ Juicebox 2015-06-27 10:02:42

Re: ubermenu and captions [SOLVED] (7 replies, posted in Juicebox-Pro Support)

2,740 Reply by Steven @ Juicebox 2015-06-27 09:33:50

Re: ubermenu and captions [SOLVED] (7 replies, posted in Juicebox-Pro Support)

2,741 Reply by Steven @ Juicebox 2015-06-27 08:58:37

Re: Caption Overlay moves down on thumbnail row refresh [SOLVED] (9 replies, posted in Juicebox-Pro Support)

2,742 Reply by Steven @ Juicebox 2015-06-26 22:10:29

Re: how to add alt text for Section 508 compliance (1 replies, posted in Juicebox-Pro Support)

2,743 Reply by Steven @ Juicebox 2015-06-26 07:29:03

Re: Caption Overlay moves down on thumbnail row refresh [SOLVED] (9 replies, posted in Juicebox-Pro Support)

2,744 Reply by Steven @ Juicebox 2015-06-26 07:11:47

Re: Gallery does not work in Firefox online [SOLVED] (3 replies, posted in Juicebox-Lite Support)

2,745 Reply by Steven @ Juicebox 2015-06-24 21:30:14

Re: Gallery does not work in Firefox online [SOLVED] (3 replies, posted in Juicebox-Lite Support)

2,746 Reply by Steven @ Juicebox 2015-06-23 22:24:38

Re: Fit in Square thumbnails [SOLVED] (8 replies, posted in Juicebox-Pro Support)

2,747 Reply by Steven @ Juicebox 2015-06-23 21:37:00

Re: Can Juicebox do this? (11 replies, posted in Juicebox-Lite Support)

2,748 Reply by Steven @ Juicebox 2015-06-23 18:07:03

Re: Mobile juicebox don't work. [SOLVED] (9 replies, posted in Juicebox-Pro Support)

2,749 Reply by Steven @ Juicebox 2015-06-23 18:05:17

Re: Mobile Photo Sizing [SOLVED] (29 replies, posted in Juicebox-Pro Support)

2,750 Reply by Steven @ Juicebox 2015-06-23 18:02:11

Re: Issues with Juicebox and Surface Tablet Locks screen [SOLVED] (10 replies, posted in Juicebox-Pro Support)

Posts found: 2,726 to 2,750 of 5,851