This looks like it might be a timing issue caused by setting imageTransitionTime="1". If you use the default value of 0.3 instead, you should hopefully find that a URL ending with something like #21expanded displays the expected image.
I have notified the developers of this issue. However, please note that Juicebox was not designed to jump straight into expanded mode and it is not advisable to manually add #expanded to a URL. Juicebox should be expanded using the Expand Button (from a non-expanded gallery) so that it can be expanded appropriately depending on the device being used and configuration options such as expandInNewPage and useFullscreenExpand.

If you set debugMode: 'TRUE' in your gallery's embedding code, then you can set configuration options via a query string in the URL as noted in the Setting Config Options support section.
Your gallery's embedding code would look something like:

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

... and you could use a URL such as the following to set autoPlayOnLoad to FALSE:
http://www.example.com/gallery/index.ht … 21expanded

As you are using WP-Juicebox, you can add the debugMode configuration option to all of your galleries by opening the plugin's 'wp-juicebox.php' file in a plain text editor and changing line 285 from:

$string_builder .= '    var jb_' . $clean_gallery_id . ' = new juicebox({' . PHP_EOL;

... to:

$string_builder .= '    var jb_' . $clean_gallery_id . ' = new juicebox({ debugMode: "TRUE",' . PHP_EOL;

Please note that the line number above refers to the current version of WP-Juicebox (v1.4.4.2).

You're welcome!
I'm glad you've got it working.
Thank you for letting me know.

You can set the height for a gallery in the JuiceboxBuilder-Pro interface (in the 'Customize -> Lite' section).
The chosen height will be included in the embedding code presented on the 'Publish' tab (and in the gallery's 'index.html' page after the gallery has been saved) which you can copy and paste into your own web page.

You can certainly have multiple galleries with different heights embedded into a single web page.

Here's sample code for two galleries (with different heights) being embedded into the same page.
The first gallery on the page has a height of 400px whereas the second gallery on the page has a height of 600px.

<script src="gallery1/jbcore/juicebox.js"></script>

<script>
    new juicebox({
        baseUrl: 'gallery1/',
        containerId: 'juicebox-container-1',
        galleryHeight: '400px',
        galleryWidth: '100%'
    });
</script>
<div id="juicebox-container-1"></div>

<script>
    new juicebox({
        baseUrl: 'gallery2/',
        containerId: 'juicebox-container-2',
        galleryHeight: '600px',
        galleryWidth: '100%'
    });
</script>
<div id="juicebox-container-2"></div>

I hope this helps.

However, if you continue to experience difficulties, please post the URL to your web page so that I can see the problem for myself and hopefully help further.
Thank you.

Due to the nature of how Facebook works (taking the share image from an og:image tag in the web page), it would be very difficult for a gallery which is displayed from a single web page (such as a Juicebox gallery) to have the share image correspond to the image being shared.

As I mentioned above, although the share image (the thumbnail displayed in the Facebook pop-up share window) will always be the same one, the link being shared will still point towards the correct image in the gallery (the image currently being displayed in the gallery when the Facebook button is clicked).

For Juicebox, you really need to think of the share image as representing the gallery as a whole.
With this in mind, you could change the og:image tag in your gallery's web page to have the share image be any image you like. It does not need to be an image in your gallery.

If you really want to have the share image correspond to the image being shared, then you would need to find a gallery type which creates a separate web page for each image (so that each page/image can have its own og:image entry).
The downside to this type of gallery would be that it would likely be a standalone set of web pages rather than something that you could embed in an existing web page alongside other content (like you can with Juicebox).
Ideally, you would need to find a gallery that not only creates a separate web page for each image but also one that has built-in Facebook support so that og:image entries are generated automatically. Otherwise, it might be quite a time-consuming task to add an og:image entry manually for each image in your gallery.

Unfortunately, off the top of my head, I do not know of such a gallery type and a web search might be helpful.

Three weeks have passed and I have had not heard directly from ClamAV regarding the false positive reports I filed but there have been 23 ClamAV virus database updates in this period so, if you have not tried recently, it might be worth uploading a Juicebox album to your web server now to see if it works.
If you do try again, please let me know how you get on.
Thank you.

It is not possible to have the shared image's thumbnail displayed in the pop-up Facebook share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail image can be used per web page. (The link will still point towards the correct image within your gallery, though.)

The image used in the pop-up Facebook share window is set using an Open Graph og:image meta tag in the <head> section of your web page, such as the following:

<meta property="og:image" content="http://www.example.com/images/thumbnail.jpg" />

Please see here for more details on the Open Graph protocol.

If you create a gallery with JuiceboxBuilder-Pro, an og:image meta tag will be automatically generated and included in the gallery's 'index.html' file (pointing towards the first image in the gallery). If you are embedding your gallery in an existing web page alongside other content, then you will need to add an og:image meta tag manually.

Although the thumbnail image displayed in the pop-up Facebook share window will always be the same one (specified via the og:image meta tag), the link being shared will still point correctly towards the shared image in the gallery. You should notice that the URL being shared ends with something like #2 or #17 where the number represents the image in the gallery. When a user clicks on a shared link, the corresponding shared image will be opened in the gallery.

No problem!

In order to not get the "Juicebox can not display locally in this browser." message, the gallery's web page must be viewed over http:// or https:// (or viewed in Firefox or Safari). If the file:/// protocol is used (as it would be for local use), the gallery will fail to display in any browser other than Firefox and Safari.

The gallery structure and location of the 'config.xml' and 'juicebox.js' files (and images) does not matter for this error message.

I'm guessing your mobile app is not loading the web page containing the gallery's embedding code over http:// or https:// (it sounds like everything is hosted locally within the app) which is probably where the problem originates.

No problem.
I'm glad you've got it working. Thank you for letting me know.

Yes, you'll need to edit the 'index.html' file that JuiceboxBuilder-Pro creates in a plain text editor.
Put the entire 'juicebox-container' <div> inside another <div>.
In your case, change the embedding code portion of the code you posted to the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->

10% of the screen width (to the right-hand side of your gallery) will be empty space (the same color as your gallery's background).
Change the gallery's width from 90% to change the amount of space to the right-hand side of your gallery.

If you wanted to horizontally center the gallery in the parent container (so that there is 5% of the screen width empty at both sides of the gallery), then you could use the following embedding code (adding style="margin: 0 auto;" as an attribute to the 'juicebox-container' <div>).

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        galleryHeight: '90%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
    <div id="juicebox-container" style="margin: 0 auto;">
        <!-- Image gallery content for non-javascript devices -->
        <noscript>
            <h1>Current Work</h1>
            <p>Corrent Work</p>
            <p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red  " alt="" /><br>Abstraction in Red   </p>
            <p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
            <p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
        </noscript>
    </div>
</div>
<!--END JUICEBOX EMBED-->

The presets are just different combinations of configuration options and JuiceboxBuilder settings (such as gallery and image dimensions).
They are essentially quick ways of replicating some of the demo galleries found here.
You could achieve any preset by starting off with all default settings and changing values in JuiceboxBuilder's interface.

There is a short description of maxCaptionHeight in the Caption section of the Config Options page.

So when captionPosition is set to BELOW_IMAGE, BELOW_THUMBS or BOTTOM, the value of maxCaptionHeight is always used as the actual caption height. When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the value of maxCaptionHeight is used as the maximum caption height (the actual caption height might be smaller if the maximum is not required to display the caption in full).

It is not possible to increase the space just at the right-hand side of a gallery (at least not by using the available configuration options) but you could increase the space surrounding all gallery elements by increasing the value of the stagePadding configuration option (in JuiceboxBuilder-Pro's 'Customize -> General section'.

Alternatively, if you just want to add some space to the right-hand side of your gallery, you could wrap the gallery in a parent container, reduce the gallery's width (to perhaps 90%) and make the parent container's background color the same as the gallery.
Here is an example.

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        backgroundColor: 'acc2e3',
        containerId: 'juicebox-container',
        galleryWidth: '90%',
        maxThumbColumns: '3',
        maxThumbRows: '3',
        thumbsPosition: 'RIGHT'
    });
</script>
<div id="parent" style="background-color: #acc2e3; width: 800px;">
    <div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->

If you want to horizontally center the gallery container within a parent container, then replace:

<div id="juicebox-container"></div>

... with:

<div id="juicebox-container" style="margin: 0 auto;"></div>

Yes, absolutely.
The demo galleries are just examples of what can be achieved. They are not the only layouts that can be used.
You can use any or all of the available Configuration Options to customize your gallery as you like.

That's just because the gallery has fixed dimensions of 1000px x 1000px. You can choose the width and height for your own gallery using either fixed pixel values or percentages (of the gallery's parent container) and choose where to position the gallery on your own web page.

Yes. Set thumbsPosition="LEFT". You can then also set maxThumbColumns and maxThumbRows.
A complete list of all Thumbnail Options can be found here.

Yes. You just set your galleryWidth and galleryHeight to both be 100% (and make sure that there is no other content on your web page).

The Simple demo actually uses quite small images (the first image is only 640px x 415px) and the default value of imageScaleMode="SCALE_DOWN", which scales donw large images (if necessary) but does not scale up small images.
If you were creating a gallery of your own, you could use larger images or set imageScaleMode="SCALE" to reduce the space between the thumbnails and the main images.
Depending on gallery dimensions and page layouts, Juicebox galleries are usually responsive and the gallery elements are positioned automatically depending on the size and shape of the gallery (which can often be determined by the size and shape of the user's browser window). For this reason, it is not possible to specify exact dimensions for gaps between gallery elements.