2,326

(3 replies, posted in Juicebox-Lite Support)

I notice when you hover over the link on your main page, the browser's status bar displays the 'node/73' URL but clicking the link does not actually take you to that page. The browser remains on the 'team-vertical' page and seems to dynamically load fresh content (but not the Juicebox gallery). After clicking the link, there is no sign of any Juicebox embedding code on the page.

Unfortunately, I am not familiar with your Drupal theme and do not know where content should be placed in order for it to be displayed when you click the links on your main page.

As you are aware, the problem seems to be directly related to your Drupal theme rather than Juicebox.
If you replaced the Juicebox gallery with any other content, then the same thing would likely happen when you click the link on your main page: the extra content would not show up unless you went directly to the 'node/xyz' page.

There's no problem with posting your query here (hopefully some other Drupal users will read this and be able to help you out further) but you might have better luck in the Drupal forum. Maybe someone familiar with the theme will be able to offer some help.

Just for the record, there is a dedicated Juicebox module for Drupal which can be found here.
I don't know if it will be of any use to you but I thought I should mention it in case you are somehow able to integrate it into your web site.

2,327

(9 replies, posted in Juicebox-Pro Support)

(1) Your gallery does expand in a new page when I expand it on my own iOS device.
When expanded, the gallery is displayed by the 'full.html' page instead of on top of the embedding page ('poi_rhyolite.php').

(2) OK. Thank you for trying. It was worth it to see what happens. (I still think that a timing issue may somehow be contributing to your problem.)

I've viewed your gallery in Mobile Chrome and Mobile Safari on my iPod Touch and the 'hide thumbnails' functionality works as expected in both browsers.

Try the following simplified code which does not wait for the onShowThumbs(showing) event to be fired before flipping the value of the thumbnail tracking variable.

<!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",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "LARGE",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE"
            });
            jb.onExpand = function(expanded) {
                if ((expanded && thumbs) || (!expanded && !thumbs)) {
                    jb.toggleThumbs();
                    thumbs = !thumbs;
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Also, as your gallery does not display the Thumbnail Button at all, there should be no need to check the visibility of the thumbnails. (They should always be visible in normal mode and always be hidden in expanded mode.) Therefore, you could try the following:

<!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 thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "LARGE",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE"
            });
            jb.onExpand = function(expanded) {
                jb.toggleThumbs();
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

2,328

(17 replies, posted in Juicebox-Pro Support)

Unfortunately, I do not have access to an iPad Pro but I have viewed your galleries on an iPhone running iOS 9.2.1 and do not see any cropping of your images in portrait or landscape orientations (in Mobile Chrome, Mobile Firefox and Mobile Safari).

As your galleries are full page galleries (with no other content on the pages), there is certainly no conflicting CSS.
It sounds like the problem may be directly related to certain mobile browser/device combinations and is not something that can be fixed with any of the available configuration options.

Perhaps the best course of action would be for you to provide a screenshot demonstrating the problem and I will pass it on to the developers who will investigate further. Please upload a screenshot somewhere (either your own web server or a file sharing service such as Dropbox) and post a link to it in this forum thread.

Also, does the problem happen when the gallery is initially loaded in landscape orientation or just when the device is rotated into landscape orientation?

Thank you.

2,329

(496 replies, posted in Juicebox-Pro Support)

@rj74

Thank you for your suggestion.

As you are aware, such functionality is not currently available within Juicebox but something similar is available within another of our products - Showkase.
As well as being able to create Juicebox gallery pages, Showkase can create ListViewer gallery pages.
Images are listed one per row in a vertical list with image titles and/or captions displayed below each image.
There are certain layout options available which you can see if you log into the Live Demo Admin and go to edit the ListViewer gallery page.

Demos of ListViewer gallery pages can be found here:
https://www.showkase.net/demos/paulbica/nature/
https://www.showkase.net/demos/patricksurace/cgi/
https://www.showkase.net/livedemo/list-gallery/

This type of gallery is unique to Showkase (it cannot be created outside Showkase) and nothing happens when you click an image so it's not exactly like your suggestion but its the closest you can get with any of our products at the moment and I thought I should mention it in case it helps.

Try adding the following CSS to your web page (or at the bottom of your gallery's 'jbcore/classic/theme.css' file):

.jb-splash-holder img {
    max-width: 40px !important;
}

This should hopefully prevent your custom CSS rule from affecting the Splash Page image in your gallery.

It looks like the problem is that your gallery is inheriting some CSS from your 'style.min.css' file, specifically the 'max-width' entry in the code below (about half way down your 'style.min.css' page).

.bd-tagstyles:not(.bd-custom-image):not(.shape-only) img{max-width:100%;vertical-align:middle;display:inline-block;text-align:center}

This CSS is affecting the Splash Page image. It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS and the gallery has no option but to inherit such rules.
I do not know how important this CSS rule is to other images on your page so I do not know if you could safely remove it.
Perhaps the best course of action would be to apply your custom CSS rules to only those elements on your web page which require them through use of further CSS selectors (classes and ids).

2,332

(9 replies, posted in Juicebox-Pro Support)

My suggestion above works OK in Mobile Chrome and Mobile Safari on my iPod Touch.

However, here are a few thoughts that might help (although please note that Juicebox was not designed with this functionality in mind).

(1) On iOS devices, the gallery will automatically expand in a new page. Please see the Expand Gallery Behavior support section for details.
Try setting expandInNewPage="FALSE" (at least for testing purposes) to see if this makes a difference.

(2) My code above forces the gallery to always be displayed in Large Screen Mode. If you want to retain Small Screen Mode for mobile devices, you could try the following:

<!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 thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "AUTO",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE",
            });
            jb.onInitComplete = function (){
                var screenMode = jb.getScreenMode();
                if (screenMode === 'LARGE') {
                    jb.onExpand = function(expanded) {
                        if ((expanded && thumbs) || (!expanded && !thumbs)) {
                            jb.toggleThumbs();
                        }
                    };
                    jb.onShowThumbs = function(showing) {
                        thumbs = showing;
                    };
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

(3) There may also be a timing issue. Introducing a short delay (such as one second in the code below) before toggling the thumbnails might help. (It might not be an ideal solution but doing so should at least tell us whether this is the root of the problem or not.)

<!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 thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "LARGE",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE"
            });
            jb.onExpand = function(expanded) {
                if ((expanded && thumbs) || (!expanded && !thumbs)) {
                    setTimeout(function() {
                        jb.toggleThumbs();
                    }, 1000);
                }
            };
            jb.onShowThumbs = function(showing) {
                thumbs = showing;
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look and hopefully help further.
Please also let me know what version of iOS your device runs and what browser(s) the problem occurs in (Mobile Chrome, Mobile Firefox, Mobile Safari). Thank you.

2,333

(9 replies, posted in Juicebox-Pro Support)

It would not be possible to do this via the available configuration options.
However, you could use the Juicebox-Pro API to check whether or not the gallery is in expanded mode (via the onExpand(expanded) event) and toggle the thumbnails if necessary (via the toggleThumbs() method). You can keep track of whether or not the thumbnails are currently visible (for example if you choose to activate the Thumbnail Button and allow the user to toggle the thumbnails on and off) via the onShowThumbs(showing) event.

Here is an example of how this might be achieved.
To see the example in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code below.

<!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 thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "LARGE",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE"
            });
            jb.onExpand = function(expanded) {
                if ((expanded && thumbs) || (!expanded && !thumbs)) {
                    jb.toggleThumbs();
                }
            };
            jb.onShowThumbs = function(showing) {
                thumbs = showing;
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this helps.

This is not possible using only the available configuration options.
In Large Screen Mode, the thumbsPosition value is consistent across all browsers and devices and cannot be changed depending on orientation or the aspect ratio of the viewport.

Here's a possible solution using JavaScript to detect the aspect ratio of the viewport (each time the viewport size changes) and reload the gallery with the required layout if necessary.

To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.hml' page with the code below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var a = '3';
            var b = '3';
            var c = 'RIGHT';
            function loadGallery(a, b, c) {
                new juicebox({
                    containerId: "juicebox-container",
                    maxThumbColumns: a,
                    maxThumbRows: b,
                    thumbsPosition: c
                });
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                if (windowWidth < windowHeight && c === 'RIGHT') {
                    a = '10';
                    b = '1';
                    c = 'BOTTOM';
                    loadGallery(a, b, c);
                }
                if (windowWidth >= windowHeight && c === 'BOTTOM') {
                    a = '3';
                    b = '3';
                    c = 'RIGHT';
                    loadGallery(a, b, c);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).resize(thumbsStatus);
                loadGallery(a, b, c);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this helps.

2,335

(17 replies, posted in Juicebox-Pro Support)

Please check to see if you see the same problem in any or all of our demo galleries on this page: http://www.juicebox.net/demos/

Also, please let me know what version of iOS your device is running and whether you see the problem in Mobile Safari only or also in other browsers such as Mobile Chrome and Mobile Firefox.

It might also help if I were able to see the gallery that you are referring to so please post the URL to your gallery's web page so that I can take a look at the problem for myself.

Other things to check:
(1) Make sure that you have set imageScaleMode="SCALE_DOWN" or imageScaleMode="SCALE". Other values for imageScaleMode (FILL or NONE) may result in images being cropped.
(2) Make sure that you do not have any custom CSS rules on your gallery's web page that may be interfering with the gallery.

You're welcome.

Just for the record, even though I still would not recommend using special or reserved characters within file names, we are looking into the possibility of having JuiceboxBuilder accept #, ? and ' characters (although problems may still occur on certain web servers when using these characters).

This is a known issue and is noted in the 'Known Issues' section of the JuiceboxBuilder User Guide.

JuiceboxBuilder will not accept images with the following characters in the filename: #, ? and '. Please rename files before importing to JuiceboxBuilder.

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. Please see section 2.3 of this document for details: http://www.ietf.org/rfc/rfc3986.txt

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 can handle all images whose filenames use any or all of these unreserved characters.

2,338

(1 replies, posted in Juicebox-Pro Support)

We really love those share buttons...

Juicebox-Pro supports social media sharing and allows individual images within a gallery to be shared on popular social media platforms. Please see the Social Sharing support section for details.

... and the ability to have a 300x250 banner ad

Perhaps the easiest way to achieve this would be to place your gallery and banner ad alongside each other on the same web page. (It would not be easy to incorporate such an element within the gallery itself.)

Please see our demo galleries here for examples of what can be achieved with Juicebox-Pro.
For reference, a list of all available configuration options can be found here.
For customization beyond what is possible with the configuration options, please see the Theming Guide.

2,339

(496 replies, posted in Juicebox-Pro Support)

@35OL

Thank you for the suggestions but they sound more like ideas for Showkase than for Juicebox.
I notice you have posted them in the Showkase Feature Requests forum thread, too (which is a better place for them). Thank you.

I just thought I'd mention this for any other Juicebox users reading this thread and wondering about Gallery Index Pages (which are a feature of Showkase rather than Juicebox).

2,340

(2 replies, posted in Juicebox-Pro Support)

It looks like the problem is being caused by the W3 Total Cache plugin minifying the Juicebox JavaScript code, combining it with other (non-Juicebox) JavaScript code and loading it from a custom file:
http://www.pretty-story.com/wp-content/cache/minify/000000/M9bPKixNLarUMYYydHMz04sSS1L1cjPzAA.js

The 'juicebox.js' file needs to be loaded on its own and from its original location within the 'jbcore' folder.
Juicebox will not be able to determine the location of the 'theme.css' file otherwise.

Other than disabling the W3 Total Cache plugin completely, try just excluding the WP-Juicebox files from being minified by the plugin.

2,341

(496 replies, posted in Juicebox-Pro Support)

@gotty1

I'm glad you've found a suitable workaround.
Also, thanks for the other suggestion.

2,342

(496 replies, posted in Juicebox-Pro Support)

@gotty1

Thank you for the suggestion.

You could perhaps add your custom CSS rules to the foot of the 'theme.css' template file that JuiceboxBuilder-Pro uses when a gallery is built (or just modify the file as necessary).
In doing so, the custom CSS rules would appear in all galleries generated by the application (without the need to manually add them to each gallery after they have been created).
The location of the template file on a Windows 10 machine would be:
C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\classic\theme.css

I realise that this does not solve the problem that your suggestion would but it might make life a little easier in the meantime (but only if you use the same font settings for all your galleries).

(I am using Juicebox gallery 1.2 Pro)

First of all, please try upgrading your gallery to the latest version of Juicebox-Pro (v1.4.4.2) as many bugs have been fixed since v1.2 and upgrading might solve your problem without any further action.
Please see the Version History for a list of changes between versions.
Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.

Also, please double-check your gallery's XML file and configuration options to make sure that your images have titles or captions associated with them and to see if captionPosition has perhaps been set to NONE.

If this does not help, then please let me know how I can view your gallery so that I can see the problem for myself and hopefully help further. Thank you.

2,344

(1 replies, posted in Juicebox-Pro Support)

Thank you for reporting this issue.
I have notified the developers who will investigate further.
In the meantime, I'm glad that you have found a setting that works as you require.

2,345

(496 replies, posted in Juicebox-Pro Support)

@nebcb

Many thanks for posting your suggestions.

Just for clarification (and for other users using the Back Button), if you leave the backButtonUrl empty, then the Back Button goes back one page in the browser's history.
You can also set the backButtonUrl to be a relative URL (relative to the web page containing the gallery's embedding code) or an absolute URL, in the form http://www.example.com.

2,346

(1 replies, posted in Juicebox-Pro Support)

Just after the end of your 'juicebox-container' div, you have an HTML line break (<br />).
If you remove this, then there will be a little less space between the bottom of the gallery and your text.

Also, you have set thumbNavPosition="BOTTOM". This reserves space below the thumbnails for the thumbnail navigation buttons. If you set thumbNavPosition="CENTER" instead, the thumbnail navigation buttons would be positioned to the left and right of the thumbnails and there would be less space below the thumbnails.

If you are having trouble with space above and below your images (within the gallery), then this FAQ might be helpful.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

2,347

(3 replies, posted in Juicebox-Pro Support)

That's great!
Thank you for posting back to let me know.

2,348

(3 replies, posted in Juicebox-Pro Support)

Unfortunately, the gallery always starts with the first image.

I'm not sure what you would rather have. Please explain in greater details what it is that you are trying to do and I'll try to help you out.

If you are looking to have your thumbnail links go to different images within a gallery, then set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and you can refer to specific images with a # identifier at the end of the URL. For example http://www.example.com/gallery/index.html#7 would go directly to the 7th image in the gallery.

Would you be able to tell me what is the correct spelling for the linkURL...

linkURLs can be set on the 'Images' tab of JuiceboxBuilder.
If an image has been assigned a linkURL, then this URL will be opened when the user clicks the Open Image button (when showOpenButton="TRUE") or when the user clicks the main image (when imageClickMode="OPEN_URL").
linkURLs can be relative (to the page containing the gallery's embedding code) or absolute in the form http://www.example.com/index.html.
linkURLs are stored in the gallery's 'config.xml' file.
A sample <image> entry containing a linkURL will look something like this:

<image imageURL="images/IMG_0001.jpg"
    thumbURL="thumbs/IMG_0001.jpg"
    linkURL="http://www.example.com/index.html"
    linkTarget="_blank">
    <title>Image title goes here.</title>
    <caption>Image caption goes here.</caption>
</image>

Is an option to simply edit the xml file?

Yes. You could certainly just edit the gallery's XML file in a plain text editor after the gallery has been built.

... how to get special characters in image titles...

The easiest way might be to just copy and paste them from another document.
You could perhaps embed the information as IPTC data (including whatever special characters you like) within your images and then have Lightroom extract the information (including any special characters which might be within the text) using the 'Image Info -> Caption -> Edit.. (Custom Settings)' text template editor.

... or even a URL to an external page.

When the Open Image button is clicked, the imageURL will normally be opened unless the image has a linkURL, in which case the linkURL will be opened instead. If you set imageClickMode="OPEN_URL" (in the 'Main Image' section), then the linkURL will also be opened when the main image is clicked.
The Lightroom plugin has limited support for linkURLs. the interface does not allow you to enter a unique linkURL for each image but if you embed URLs as IPTC data within your images, then you could extract them for use as the linkURLs (in the 'Image Info' panel). (In doing so, each image in the gallery could have a unique linkURL.)

2,350

(1 replies, posted in Juicebox-Pro Support)

It is not possible to use Juicebox thumbnails as an index for other galleries. When a thumbnail is clicked, the corresponding main image is opened in the gallery. This action cannot be changed, at least not easily.
Please see this forum thread for a suggestion on how this might be achieved. However, Juicebox was not designed with such functionality in mind and you might run into unforeseen problems which you would have to tackle as you came across them.

One possible solution would be to set imageClickMode="OPEN_URL" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section). Then when a main image (but not a thumbnail) is clicked, the corresponding linkURL will be opened (in a tab specified by the linkTarget). You could have each image in the 'index' gallery correspond to a different gallery (and have the linkURL link to the gallery's web page).

Ordinarily, with Juicebox-Pro, you would be able to create as many individual galleries as you like. However, if you would like to link them all together, then you would need to do so manually following the instructions and examples in the Embedding Multiple Galleries support section.
There are several online demo pages which you could perhaps adapt to suit your own needs.

If you are looking for an automated solution to creating and listing multiple galleries, then Showkase would certainly be a better solution.

Showkase is a PHP web application which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) galleries and the galleries can be created within the application itself in a web browser interface (or created with JuiceboxBuilder-Pro and imported).

You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
Demo sites can be found here and a sample Gallery Index page can be found here.

Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).

All of this is done automatically within the Showkase interface without the need for any manual coding at all.

Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite and SimpleViewer-Standard, the free versions) or Showkase-Pro (which comes with Juicebox-Pro and SimpleViewer-Pro).
The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.

More information on the differences between Juicebox and Showkase can be found in this forum thread.

I hope this information helps.