Try reuploading the first image in your gallery.
If I go directly to the image's URL in IE11 (bypassing Juicebox), I just get a broken image icon so there appears to be something wrong with the image (at least according to IE11).
Maybe the image is corrupt somehow (possibly during the initial upload) and some browsers are more forgiving (more tolerant towards whatever is wrong with the image) than IE11.
https://www.idrc.ca/sites/all/libraries … id%201.jpg

Hopefully reuploading the image will help.

Edit:
I think I might have found the root of the problem.
The first image in your gallery seems to be a PNG file with a JPG extension.

Unfortunately, there is a known bug whereby if you feed JuiceboxBuilder-Pro a PNG image and the image is not resized by the application (if you deselect the 'Resize Images' checkbox or if the image is already within the specified image bounds), then the PNG image is copied across to the gallery 'images' folder but it is given a '.jpg' file extension.
The workaround for your scenario would be to rename "Ahmed K Rashid 1.jpg" to "Ahmed K Rashid 1.png" (in the gallery's 'images' folder) and also change the corresponding imageURL entry in the gallery's 'config.xml' file from "images/Ahmed K Rashid 1.jpg" to "images/Ahmed K Rashid 1.png".

If the image is resized by JuiceboxBuilder, then the image will be converted to a JPG and all should be well (like with the  image's thumbnail).

Incidentally, I have not been able to replicate this problem on my own test server.
When I feed JuiceboxBuilder-Pro a PNG image and allow the application to copy the image but with an incorrect file extension, IE11 still displays the image correctly in my own test scenario so the problem might somehow be connected to the web server hosting the image (possibly relating to MIME types).

The developers are aware of this problem and hopefully it will be addressed for a future version.
I hope that this information helps you to workaround the problem until it is fixed.

There is no way to change the name of the 'images' folder from within the JuiceboxBuilder-Pro interface but there are a couple of things you could do.

(1) After creating the gallery, change the name of the 'images' folder manually and then change all instances of 'images' (to match the name you chose for your image folder) in the imageURL entries in the gallery's 'config.xml' file. (This can be done quickly and easily with a single global search and replace action in a text editor such as Notepad++.)

... or:

(2) Give your gallery folder a unique name, upload the complete gallery folder (not just the contents) to your web server and embed your gallery into your web page using the baseUrl method documented here. (The gallery's 'images' folder will remain inside the gallery folder and will not clash with your own 'images' folder.)
For example, if your gallery folder is named 'my_gallery_folder' and you upload it to the root directory of your web space, then you could use the following embedding code. The leading slashes in the paths denote your root directory so this code will work in any web page throughout your site without modification (although you can change the gallery dimensions and background color if you like).

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/my_gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I suggest uploading the gallery folder to your root directory for convenience but you can upload it to anywhere on your web server that you like as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

You're welcome!

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

It certainly sounds like content modification has been the problem so, hopefully, your gallery will display fine on your client's Samsung S6. I'll mark this topic as 'solved' but just let me know if you run into any further problems.

Hi.

On further investigation, it looks like the problem may be due to opening a gallery located in a Google Drive synced folder.

I have been able to replicate very similar symptoms by opening a gallery from Google Drive: an unresponsive 'New Gallery...' button and an 'Open Gallery...' button which opens the 'Select Gallery Folder...' dialog but does not actually open a gallery.

To clear the problem (on a Windows 10 PC), the solution appears to be to close JuiceboxBuilder-Lite and manually delete the following folder:
C:\Users\Username\Documents\JuiceboxBuilder-Lite\.tempGallery
(On a Mac, search for .tempGallery, make sure the search result is inside a parent folder named 'JuiceboxBuilder-Lite' and delete the folder.)

Also, to avoid this problem, I would recommend that you open your galleries from folders that are not synced to online file sharing services (such as Google Drive). If your gallery folders are stored on Google Drive, you could perhaps copy them to your desktop before opening them in JuiceboxBuilder-Lite.

A quick question for you:
Could you please let me know if your problem occurred after trying to open a gallery from Google Drive?
The more information we can gather regarding this issue, the better.
Many thanks!

Hi.

On further investigation, it looks like the problem may be due to opening a gallery located in a Google Drive synced folder.

I have been able to replicate very similar symptoms by opening a gallery from Google Drive: an unresponsive 'New Gallery...' button and an 'Open Gallery...' button which opens the 'Select Gallery Folder...' dialog but does not actually open a gallery.

To clear the problem (on a Windows 10 PC), the solution appears to be to close JuiceboxBuilder-Pro and manually delete the following folder:
C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery
(On a Mac, search for .tempGallery, make sure the search result is inside a parent folder named 'JuiceboxBuilder-Pro' and delete the folder.)

Also, to avoid this problem, I would recommend that you open your galleries from folders that are not synced to online file sharing services (such as Google Drive). If your gallery folders are stored on Google Drive, you could perhaps copy them to your desktop before opening them in JuiceboxBuilder-Pro.

A quick question for you:
Could you please let me know if your problem occurred after trying to open a gallery from Google Drive?
The more information we can gather regarding this issue, the better.
Many thanks!

Please see the Screen Modes support section for details on how Juicebox adapts to different devices and screen sizes.
With Juicebox-Pro, you would have the ability to force a certain Screen Mode to always be used via the screenMode configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).

The 'VIEW GALLERY' text should be at the bottom of the Splash Page (and there are no configuration options to change its position).
It looks like its position has been changed by some custom CSS on your web page conflicting with the gallery's own CSS.
Your 'homecss.css' file has a lot of CSS type selectors which apply rules to all instances of certain HTML elements (rather than targeting specific elements via id or class selectors).
For example, you have CSS which is being applied to all <img> tags, all heading tags (<h1> through <h6>) and all <a> tags on your web page. Such code will affect all of these tags on your web page, including those used in the gallery. There is no way to isolate the gallery from such CSS and the gallery has no option but to inherit these CSS rules.

It looks like the problem with the 'VIEW GALLERY' text is being caused by the following code in your 'homecss.css' file:

#wrapper #subgallerymain table {
    width: auto;
    height: 40px;
}

If you have a table on your web page which requires these CSS rules, then assign the table an id (or class) and apply the rules to the id (or class) rather than all <table> tags within '#wrapper #subgallerymain'.

You can set up a certain style under a CSS class (using whatever CSS properties you like) for the selected link and then add or remove the class for the links as appropriate using JavaScript in your loadGallery() function (when a specific gallery has been selected).

Here's an example which switches between two galleries on the same page.
To see the example in action, create a couple of sample galleries with JuiceboxBuilder-Lite and name the gallery folders 'gallery1' and 'gallery2'.
Now, use the following code to create a new HTML file, put the file in the same directory as your gallery folders and open the HTML file in a browser.
The cursor will change to a pointer when the user hovers over a gallery link and the link corresponding to the selected gallery will be underlined.
The example is basic but demonstrates the required functionality which I hope you can incorporate into your own web pages.

<!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;
            }

            /* Add pointer cursor to all gallery links */
            .gallery {
                cursor: pointer;
            }

            /* Create style for selected gallery link */
            .gallery.selected {
                text-decoration: underline;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function loadGallery(base) {
                new juicebox({
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "400",
                    galleryWidth: "600"
                });
                $('.gallery').removeClass('selected'); // Remove 'selected' class from all gallery links
                $('#' + base).addClass('selected'); // Add 'selected' class to only the selected gallery link
            }
            $(document).ready(function() {
                $('.gallery').click(function() {
                    var base = $(this).attr('id');
                    loadGallery(base);
                });
                loadGallery('gallery1');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="links">
            <span id="gallery1" class="gallery">Gallery 1</span>
            <span>&nbsp;</span>
            <span id="gallery2" class="gallery">Gallery 2</span>
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope these notes help you to resolve your problems.

WP-Juicebox (the dedicated Juicebox plugin for WordPress) allows you to create and embed Juicebox galleries from within the WordPress Dashboard.
If you want to embed a Juicebox gallery created with the Lightroom plugin into a WordPress page or post, then you'll need to do so manually using the baseUrl method of embedding documented here.

Here are the steps involved.

(1) Create your Juicebox gallery with the Lightroom plugin and save the gallery to a new empty folder of its own.
(2) Upload the complete gallery folder (not just the contents) to your web server without any modification to the contents within. (See note below regarding location.)
(3) Create or edit a WordPress page or post and select 'Text' as the input method (rather than 'Visual) for the editor.
(4) Paste the baseUrl embedding code into the editor.
(5) Click 'Publish' (or 'Update').

I would recommend that you upload your gallery folders to your web space's root directory for convenience but it does not matter where you upload your gallery folder to on your web server as long as the two paths within the baseUrl embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

For example, if your gallery folder is named 'gallery123' and you upload the complete gallery folder to your web space's root directory, then you could use the following embedding code (changing the background color and gallery dimensions as necessary).

<script src="/gallery123/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: '/gallery123/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="juicebox-container"></div>

Incidentally, if you plan to embed multiple galleries into your website, the 'juicebox.js' file should be loaded only once per web page rather than once per gallery so you might like to add the <script> tag loading the 'juicebox.js' file into your theme's header and them omit it from each gallery's embedding code.

Also, in a WordPress page where the gallery's parent container is determined by the theme's layout, I would recommend setting the gallery's width to 100% (so that it fills the width of the parent container) and the height to a fixed pixel value such as 600px. The parent container is unlikely to have a height specified via CSS (the theme will not know how much content will be present on the page) so setting the gallery's height to a percentage could cause the gallery to have an unexpected height (Juicebox will not be able to determine what the gallery's actual height should be a percentage of). A fixed pixel gallery height is much safer in such a scenario.

I hope these notes help.

Set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and the URL in the browser's address bar will change (with the corresponding # identifier) as new images are selected in the gallery.

It's hard to know what might be wrong without seeing exactly what you are doing. It should certainly be possible to edit or replace a couple of icons at once.
If you upload the updated zip font file that you've created in IcoMoon somewhere (either your website or a file sharing service such as Dropbox) and provide a link, I'll take a look and see if I can find anything amiss.
Also, please let me exactly know what you are trying to do: whether you are editing or replacing the previous and next icons and, if you are replacing them, what icons are you trying to use (please let me know their codes).
Once I know a bit more about what you are doing and can see your customized font for myself, I should hopefully have a better idea of what the problem might be and how to solve it.
Thank you.

JuiceboxBuilder requires Adobe AIR v2.0 or higher (as noted in the JuiceboxBuilder User Guide).
Adobe no longer develop AIR for Linux but you can still download the last version of AIR for Linux (v2.6) from the Adobe Archived Adobe AIR SDK versions web page.
Scroll down the page to the Adobe AIR 2.6 runtime downloads section and click the Adobe AIR 2.6.0 Linux (15.4 MB) link.
This should hopefully allow you to install and run JuiceboxBuilder-Pro on your Linux system.

Looking at your embedding code, it appears that your 'myfreebies' folder should be a complete Juicebox gallery folder but there is no 'jbcore' folder inside it.

If you have a complete gallery folder named 'myfreebies' on your computer's hard drive at the moment, then just upload the complete folder (not just the contents) to your website's root directory (alongside your 'mygallery' folder from this forum thread) and the gallery should show up on your 'Freebies.htm' page.

Incidentally, you can use an absolute path for your baseUrl but if you hardcode a 'www' subdirectory in the path, your gallery might not display if the URL in the browser's address bar does not contain the 'www' subdirectory.
Please see this FAQ:
My gallery works on 'www.example.com' but not on 'example.com' (or vice versa). Why?

It would be safer to use relative paths (and your gallery will display on both 'chrissyclark.com' and 'www.chrissyclark.com'.

Once you've uploaded your complete 'myfreebies' folder to your website's root directory, use the following <script> section.

<script src="/myfreebies/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl:  "/myfreebies/",
containerId: "juicebox-container",
galleryWidth: "600",
galleryHeight: "650",
backgroundColor: "FFFFFF"
});
</script>

The leading slashes in the paths above denote your root directory so the code above will work in any web page throughout your site without modification.

One more thing that might be useful to know...
If you plan to embed multiple galleries throughout your site, you can have them all share a single 'jbcore' folder (instead of having one 'jbcore' folder per gallery).
You can upload a single 'jbcore' folder to anywhere on your web server and, for each gallery, just load the 'juicebox.js' file from there. (For example, you could use the 'jbcore' folder from your 'myfreebies' folder for all your galleries.)
This means that you can upgrade all your galleries at once (for example when a new version of Juicebox is released) by replacing just one 'jbcore' folder on your web server.
Documentation for having galleries share a 'jbcore' folder can be found here.
(Having galleries share a 'jbcore' folder does not affect the baseUrl paths that your galleries use.)

By default (if you do not specify a configUrl or a baseUrl in your gallery's embedding code), Juicebox will look for a file named 'config.xml' in the same directory as the web page containing the embedding code.
Therefore, Juicebox is looking for your gallery's configuration file to be here: www.chrissyclark.com/config.xml
... but it is not there.

I notice that you have uploaded a complete gallery folder to your 'mygallery' directory (and you already load the 'juicebox'js' file from this location).
All you now need to do is point Juicebox towards this gallery folder by adding a baseUrl entry to your embedding code.
Change:

<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "600",
galleryHeight: "650",
backgroundColor: "rgba(255,255,255,1)"
});
</script>

... to:

<script>
new juicebox({
baseUrl: "mygallery/",
containerId: "juicebox-container",
galleryWidth: "600",
galleryHeight: "650",
backgroundColor: "rgba(255,255,255,1)"
});
</script>

Juicebox will now look for the configuration file inside the 'mygallery' folder (and will find it there).

For reference, the baseUrl can be relative (to the web page containing the embedding code) or absolute (in the form 'http://www.chrissyclark.com/mygallery/').

There are short descriptions of Embed Options (such as configUrl and baseUrl) here.

The baseUrl method of embedding is documented here.