526 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

If there is no configUrl (pointing towards a configuration file) or baseUrl (pointing towards a gallery folder) in your gallery's embedding code, then Juicebox looks for a file named 'config.xml' in the same directory as the web page containing the embedding code.
If your gallery's configuration file is not named 'config.xml' or is not in the same directory as the web page containing the embedding code, then you'll see the "Config file not found." message.

You can either:
(1) Rename and/or move your gallery's configuration file so that it has the default name ('config.xml') and is in the default location (alongside the gallery's web page).
... or:
(2) Use a configUrl in your gallery's embedding code to point towards your gallery's configuration file, e.g.:

<script>
    new juicebox({
        configUrl: "path/to/my_own_configuration_file.xml",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(34,34,34,1)"
    });
</script>

Please note that if your gallery's configuration file is not in the default location, then you might need to adjust the imageURL and thumbURL paths within the file.

Another reason why you might be seeing the "Config file not found." message is if the file itself is somehow corrupt and the browser cannot read it.
Open the 'config.xml' file directly in a browser (drag and drop the file into a browser window or enter the address to the file into the browser's address bar) and you should see the XML code.
If there is a problem with the file (such as a control character in an image's caption which is breaking the XML syntax), then the browser should note the problem and the line in the file at which the problem occurs.
You should then be able to open the 'config.xml' file in a plain text editor and fix the problem.

I hope this points you in the right direction.
However, if you continue to experience difficulties, then please email me back with a link to your gallery so that I can see the problem for myself and hopefully help further.
Thank you.

Go to forum: Juicebox-Pro Support

527 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

This is not possible using just the available configuration options but it is possible with some custom JavaScript code and use of the Juicebox-Pro API.

You'd need to check the browser's width and set the thumbsPosition configuration option (and probably the maxThumbColumns and maxThumbRows configuration options, too) accordingly using JavaScript in the gallery's embedding code.

You'd then need to set up a listener to determine when the browser's width changes (for example if the user resizes the browser window) and then reload the gallery (putting the gallery's embedding code in a JavaScript function which you can call when required) with the appropriate thumbnail configuration options.

You'd also need to take note of the current image being displayed when the browser's width crosses the threshold value (using the Juicebox-Pro API getImageIndex() method) to ensure that the same image is displayed when the gallery is reloaded.

Here's an example which positions the thumbnails in a single row below the main image when the browser's width is less than 700px and in a grid to the left of the main image when the browser's width is greater than or equal to 700px.
Too see this example in action, just create a sample gallery with JuiceboxBuilder-Pro an use the HTML code below as the gallery's 'index.html' file.

<!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;
            var b;
            var c;
            var d;
            var jb;
            var thresholdWidth = 700;
            var tracker = false;
            function loadGallery(a, b, c, d) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: a,
                    maxThumbColumns: b,
                    maxThumbRows: c,
                    thumbsPosition: d
                });
                tracker = true;
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                if (windowWidth < thresholdWidth && (d === 'LEFT' || tracker === false)) {
                    a = tracker === false ? '1' : jb.getImageIndex();
                    b = '10';
                    c = '1';
                    d = 'BOTTOM';
                    loadGallery(a, b, c, d);
                }
                if (windowWidth >= thresholdWidth && (d === 'BOTTOM' || tracker === false)) {
                    a = tracker === false ? '1' : jb.getImageIndex();
                    b = '3';
                    c = '3';
                    d = 'LEFT';
                    loadGallery(a, b, c, d);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).resize(thumbsStatus);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this points you in the right direction and that you are able to integrate something similar within your own website.

Go to forum: Juicebox-Pro Support

528 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Lite Support)

No, sorry. Thanks for checking in but I'm afraid I have no news at the moment.
I really don't know when the next version will be released (or if the rotation bug will be addressed for the next version).
All I can say with any certainty is that the bug has been officially logged and the developers are aware of it.
Sorry I don't have any better news just now.

Go to forum: Juicebox-Lite Support

529 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Unfortunately, it is not possible to change the thumbnail paging text. It will always show the current thumbnail page number and the total number of thumbnail pages.
However, you can display the current image number and the total number of images by setting showImageNumber="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).
The image number shows up as part of the caption area (at the top right corner) so you'll need to make sure that captionPosition is set to a value other than NONE.
You can see the image number being used in this demo gallery.
(You do not need to display image titles or captions. You can have only the image number in the caption area if you like.)

Go to forum: Juicebox-Pro Support

530 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

The most likely cause of unresponsive "New Gallery..." and "Open Gallery..." buttons is a persistent '.tempGallery' folder.

JuiceboxBuilder-Pro creates a temporary folder (named '.tempGallery') whilst a gallery is being created or edited. This folder is automatically deleted on closing JuiceboxBuilder-Pro.

However, if JuiceboxBuilder-Pro is unable to delete the '.tempGallery' folder on closing the application, then the "New Gallery..." and "Open Gallery..." buttons may become unresponsive the next time the program is used.

The most likely cause of a persistent '.tempGallery' folder is the use of an online synced file-sharing folder so we do not recommend saving a gallery to (or opening a gallery from) a folder being synced to an online file-sharing service such as Dropbox or Google Drive.

On a Windows system, the '.tempGallery' folder is located here:

C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery

With JuiceboxBuilder-Pro closed, please check to see if your own system has a '.tempGallery' folder in this location and, if so, manually delete it before re-opening JuiceboxBuidler-Pro.

Also, try completely disabling any third-party security software that you might have installed (e.g. Avast or AVG), including real-time protection and ransomware detection in case this may somehow be interfering with JuiceboxBuilder-Pro's functionality.
(Please do so at your own risk and be sure to disconnect from the internet first.)

Finally, I know that you say that you have already tried reinstalling JuiceboxBuilder-Pro but it might help to try the complete uninstall/reinstall procedure from this forum thread (Suggestion #11).

I hope this helps.

Go to forum: Juicebox-Pro Support

531 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

I'm glad that adding the empty <a> tag seems to have worked. Thank you for letting me know.
Thanks, also, for the link to your website. I see now why you wanted a scrolling caption area!

Having seen your web page (and knowing that you have no content other than the gallery itself on the page), another possible workaround occurred to me.
You could perhaps have increased the maxCaptionHeight (to accommodate the largest of your captions) and then set the galleryHeight to be a (large) fixed pixel value (instead of 100%). You'd then have had a scrolling web page instead of a scrolling caption area. The gallery would not dynamically resize to fit within the browser window but it would allow images to be displayed larger.

Of course, you might prefer things as they are (and I quite like things as they are myself).
I just thought I'd mention it in case it's something that you hadn't considered.

In any case, I'll mark this thread as [SOLVED] as requested.

Go to forum: Juicebox-Pro Support

532 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

Thank you for the additional information.
There was a bug in older versions of Juicebox-Pro (fixed in Juicebox-Pro v1.4.0) whereby links in image titles and captions were not clickable).
It's just a hunch but this could be connected to the scrolling issue. It seems that image titles and caption might actually require a link in them for the caption area to be scrollable.
Whatever Juicebox-Pro does behind the scenes when a link is detected within an image title or caption might also need to be done to allow the caption area to become scrollable and the easiest way to achieve this for an image title or caption which does not already contain a link is simply to add one (e.g. a blank one such as <a href="#"></a>).
Adding an empty HTML <a> tag to an image title or caption is certainly something worth trying.
You'll still need to use the following CSS as well, though:

.jb-caption {
    overflow: auto !important;
}

Go to forum: Juicebox-Pro Support

533 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

The reason why the caption area does not scroll when the gallery is viewed on mobile devices may be due to the fact that when the gallery is displayed in Small Screen Mode, the caption area is always overlaid on top the image.
There are already touch gestures associated with the gallery (tapping to toggle captions on and off and swiping to navigate between images) so these might somehow be interfering with the scrolling action.
Also, there may be issues with stacking (making sure that the caption area is stacked on top of all gallery elements, including navigation hit areas, so that the container is scrollable).

Unfortunately, I've not found a solution which works on mobile devices (I've tried a lot of CSS on a lot of different classes without success) and I expect that it might be quite difficult to implement (which might be why Juicebox-Pro was not designed with a scrollable caption area).

The only thing I can suggest is more of a workaround.
If your text is only just being truncated by a small amount, then you might like to consider reducing the font size of your image titles and/or captions so that more text fits into the caption area.

There are no configuration options available within JuiceboxBuilder-Pro to change the font size of image titles and captions but you can style individual image titles and captions (for example, to change the font size) using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

A sample caption with a font size of 12px (for example) would look like this:

<span style="font-size: 12px;">Image caption text goes here.</span>

In the gallery's XML configuration file, the caption would look like this:

<caption><![CDATA[<span style="font-size: 12px;">Image caption text goes here.</span>]]></caption>

... but JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags so you only need to enter the <span> tag (as above) into JuiceboxBuilder-Pro.
(You can do likewise for image titles.)

Otherwise, you can set the size of all image titles and/or captions at once using CSS such as the following (changing the numeric values as appropriate):

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-size: 20px !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-size: 18px !important;
}

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    font-size: 12px !important;
}

As with my previous CSS suggestion, you can add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style> ... </style> tags and add it to your gallery web page's <head> section.

I realise that this does not directly resolve your problem but I hope that it is a suitable compromise.

Go to forum: Juicebox-Pro Support

534 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

For a vertically-scrolling caption area, try adding the following CSS to the end of your gallery's 'jbcore/classic/theme.css' file (or to the <head> section of your gallery's web page within <style> ... </style> tags).

.jb-caption {
    overflow: auto !important;
}

Otherwise, you could use the Juicebox-Pro API (specifically the getImageInfo() method) to fetch the currently-displayed image's title and caption and then use JavaScript to display the text elsewhere on your gallery's web page (outside the gallery).
Here's a basic example which displays the image title and caption in a container below the gallery.
To see the example in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.

<!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 jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var title = info.title;
                var caption = info.caption;
                $('#text').html('<p>' + title + '</p><p>' + caption + '</p>');
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
        <div id="text"></div>
    </body>
</html>

I hope these suggestions help and point you in the right direction.

Go to forum: Juicebox-Pro Support

535 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

I'm glad you've got it working.
Thank you for letting me know. It's most appreciated!

Go to forum: Juicebox-Pro Support

536 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

I see the problem...

The gallery on a page of its own is a Juicebox-Pro gallery but the gallery embedded in your web page is a Juicebox-Lite gallery (signified by the Juicebox logo in the lower right corner of the gallery) which does not support Pro configuration options such as randomizeImages and the autoPlay options.

All you need to do is swap the Lite 'jbcore' folder here: http://www.kb2mxv.com/jbcore
... with the Pro version from the Juicebox-Pro download zip package ('juicebox_pro_1.5.1/web/jbcore') or from any gallery created with JuiceboxBuidler-Pro.

As soon as the Pro 'jbcore' folder is in place, all the gallery's Pro options will instantly become active.

Go to forum: Juicebox-Pro Support

537 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

I'm glad that you've been able to resolve your problem. Thank you for posting back to let me know. It's most appreciated!

To answer your other question (from your PDF file)...

On Mobile the Gallery Title disappears?

When a Juicebox gallery is displayed in Small Screen Mode (e.g. when screenMode="AUTO" and the gallery is viewed on a mobile device or when screenMode="SMALL"), the Gallery Title is displayed on the thumbnail page (above the thumbnails) rather than on the main image pages.
More information about Screen Modes can be found in the Gallery Tour here.

Incidentally, your gallery's web page has a few HTML errors (including incorrect positioning of <head> and <body> tags) which should ideally be fixed.
Each browser will have its own way of dealing with HTML errors (some may be more tolerant towards HTML errors than others) and this may result in inconsistencies in how different browsers render your web page.
I'd recommend that you check your web page for errors using the online W3C Markup Validation service and then fix the errors reported.
Once the HTML code on your web page validates correctly, it should be displayed with greater consistency and predictability across different browsers.

Go to forum: Juicebox-Pro Support

538 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

There is only one thumbnail frame color configuration option (thumbFrameColor) which is used for both a rolled-over thumbnail and a selected thumbnail.
You can distinguish between a selected thumbnail and a rolled-over thumbnail using frame widths:

thumbFrameWidth (for a regular thumbnail)
thumbHoverFrameWidth (for a rolled-over thumbnail)
thumbSelectedFrameWidth (for a selected  thumbnail)

All of these options can be found in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section.

If you really want to change the frame color of a selected thumbnail, then you'd need to do so using CSS.
Try adding the following CSS to the <head> section of your gallery's web page (changing the actual color value as required):

<style>
    .jb-thm-thumb-selected .jb-idx-thb-frame {
        border-color: #ff0000 !important;
    }
</style>

Alternatively, you could add this CSS to the bottom of your gallery's 'jbcore/classic/theme.css' file (without the <style> ... </style> tags).

I hope this helps.

Go to forum: Juicebox-Pro Support

539 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Thank you for the update. I'll mark this thread as [SOLVED].

Just for the record, when manually entering values for color configuration options, Juicebox accepts 3-digit hex values (#rgb) and 6-digit hex values (#rrggbb), both with or without a leading hash, and rgba notation (rgba(r,g,b,a)) if you want to use transparency.
Unfortunately, Juicebox does not yet support 8-digit hex values (#rrggbbaa) although I've notified the developers of this and it may be considered for a future version.

Go to forum: Juicebox-Pro Support

540 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

The thumbnail frame color is set via the thumbFrameColor configuration option which can be found in JuiceboxBuilder-Pro's 'Customize -> Lite' section.

If editing a gallery's 'config.xml' file manually, then the value for thumbFrameColor can be in hexadecimal or rgba notation. (JuiceboxBuilder-Pro uses rgba notation as it supports the alpha channel for transparency.)
For example, for a solid red color, you could use either:

thumbFrameColor="#ff0000"

... or:

thumbFrameColor="rgba(255,0,0,1)"

If you do not see the change in color immediately after editing your gallery's 'config.xml' file, then please try completely clearing your browser's cache to ensure that your browser is fetching the most recent version of your gallery's 'config.xml' file (rather than an older, cached version).

Also, please note that thumbFrameColor is a Large Screen Mode configuration option which is not used when the gallery is displayed in Small Screen Mode (usually on mobile devices).
This is noted in the short description for thumbFrameColor in the Lite Options section of the Config Options page.

I hope this helps.
However, if you continue to experience difficulties, then please post back with the URL to your gallery's web page so that I can see the problem for myself.
Once I'm able to see the gallery live on your web server, I should hopefully be able to determine the exact cause of the problem and propose a solution.
Thank you.

Go to forum: Juicebox-Pro Support

541 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

That's great! Thank you for letting me know.

Go to forum: Juicebox-Pro Support

542 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

If you just need to determine the index of the image currently being displayed, then you can do so using the Juicebox-Pro API (specifically the onImageChange() event).
Here's an example which displays an alert box each time a new image is selected displaying the current image index. (You can use the value (e.id) as you like.)

//create a gallery instance
var jb = new juicebox({
    containerid:'juicebox-container'
});
//then set up an event listener
jb.onImageChange = function(e){
    alert("Image changed. Image index: " + e.id);
};

If you really want to fetch the hash from the URL, then try the following:

//create a gallery instance
var jb = new juicebox({
    containerid:'juicebox-container'
});
//then set up an event listener
jb.onImageChange = function(e){
    alert("Image changed. Image index: " + window.location.hash);
};

I hope this helps.

Go to forum: Juicebox-Pro Support

543 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

The latest version of WP-Juicebox (v1.5.1.2) now includes interface options to easily display or hide image titles and captions.

Just select (or deselect) the "Display Image Titles" and "Display Image Captions" checkboxes in the gallery settings window to display (or hide) the image titles and captions. (These new checkboxes are selected by default.)

WP-Juicebox can be downloaded from its own support page here.

Go to forum: Juicebox-Pro Support

544 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

The latest version of WP-Juicebox (v1.5.1.2) now includes interface options to easily display or hide image titles and captions.

Just select (or deselect) the "Display Image Titles" and "Display Image Captions" checkboxes in the gallery settings window to display (or hide) the image titles and captions. (These new checkboxes are selected by default.)

WP-Juicebox can be downloaded from its own support page here.

Go to forum: Juicebox-Pro Support

545 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

The latest version of WP-Juicebox (v1.5.1.2) now includes interface options to easily display or hide image titles and captions.

Just select (or deselect) the "Display Image Titles" and "Display Image Captions" checkboxes in the gallery settings window to display (or hide) the image titles and captions. (These new checkboxes are selected by default.)

WP-Juicebox can be downloaded from its own support page here.

Go to forum: Juicebox-Pro Support

546 Reply by Steven @ Juicebox

(12 replies, posted in Juicebox-Pro Support)

@motoko

Finally helped deleting folder "JuiceboxBuilder-Pro" in User Documents:
"/Users/<your username>/Documents/JuiceboxBuilder-Pro/"

I never changed anything in this folder, i have my own presets in other folder.

Thank you for sharing your solution.
I hope it helps others in a similar situation.

Here's a little more information which might help to shed some light on the problem.

JuiceboxBuilder-Pro creates a temporary folder named '.tempGallery' ('C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery') whilst a gallery is being created or edited.
This folder is automatically deleted on closing JuiceboxBuilder-Pro.
If, for any reason, JuiceboxBuilder-Pro is unable to delete this folder, then the 'New Gallery...' and 'Open Gallery...' buttons on the 'Start' tab can become unresponsive.
The solution is to manually delete the '.tempGallery' folder.

It sounds like this is the problem that you have encountered and deleting the entire 'C:\Users\Username\Documents\JuiceboxBuilder-Pro\' folder has worked for you as it deleted the '.tempGallery' folder (along with some preset files).

The only scenario known to cause this problem is if a gallery is saved to (or opened from) an online synced file-sharing folder such as Google Drive or Dropbox (so the use of online synced file-sharing folder in conjunction with Juicebox-Pro is not recommended).

This is noted as Tip #12 in the Troubleshooting JuiceboxBuilder installation and usage problems forum post.

Go to forum: Juicebox-Pro Support

547 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

As long as you set screenMode="AUTO" (AUTO is the default value for screenMode) in JuiceboxBuilder-Pro's 'Customize -> General' section, then Juicebox will determine the best screen mode (SMALL vs LARGE) for the device being used to view the gallery.
Juicebox takes into account the device as well as the screen size when determining which screen mode to use.

Generally, with screenMode="AUTO", Juicebox will use Small Screen Mode on mobile devices (thumbnails and main images displayed on separate pages) and Large Screen Mode in desktop browsers (thumbnails and main images displayed together on the same page).

More information about screen modes can be found in the Gallery Tour.

If you have some unexpected results, then please let me know what you see and what you expect to see and what devices and browsers you use.
If there is a problem, then I might be able to help.
Otherwise, I might at least be able to confirm whether or not what you are seeing is expected behavior.
Thank you.

Go to forum: Juicebox-Pro Support

548 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Can API add galleries or photos to gallery?

Unfortunately not.
The Juicebox-Pro API allows a gallery to interact with its web page. For example, you can add custom buttons to your gallery's web page (outside the gallery) to perform gallery functions (like navigating between images).

The API does not provide a way to automatically generate a gallery or to add images to an existing gallery.
(I should also note that it is not possible to add images to a gallery which is already being displayed. If you were to somehow programmatically add image entries to a gallery's 'confixg.xml' file, then the gallery would need to be reloaded to display the new images.)

I don't think there's an easy way to achieve what you're looking to do.
I think it would be a lot of work and, as far as I am aware, there is no script that you could use as a starting point to save you from writing everything from scratch.

I'm sorry it's not better news but I can't think of anything that might make your task a little easier.

Go to forum: Juicebox-Pro Support

549 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

You're welcome!
I'm glad my suggestion worked for you. Thank you for taking the time to post back to let me know. It's most appreciated.

Go to forum: Juicebox-Lite Support

550 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

Juicebox uses certain CSS z-index values for gallery elements to ensure that they are stacked in the correct order, for example to ensure that captions are stacked above images (and not obscured behind them).
The solution to your problem is to ensure that the z-index value for your menu system is greater than any used within the gallery itself so that your menu is always stacked above (and displayed on top of) the gallery.

In your web page's 'style.css' file, scroll down to line 71 and change the z-index of .nav-principal li to 9999.
Incidentally, you currently have two different z-index entries in this block (set to 10 and 298).
Just use one z-index entry and set it to 9999.

Your .nav-principal li block should now look like this:

.nav-principal li {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 10px 20px;
  font-family: 'Playball', cursive;
  color:#fff;
  z-index: 9999;
}

If you do not see any difference immediately after making the change, then try clearing your browser's cache before reloading your gallery's web page.

This should hopefully resolve your problem.

Go to forum: Juicebox-Lite Support