I understand your request for a simple 'Mail' Button Bar button but, working with what is currently available, the following workaround may suit your needs better (though is a little more complex that my first suggestion).
It uses the 'Open Image' button (displayed on the Button Bar) so if you currently use this button for its intended purpose, you will not be able to implement the following.

• Set every image's linkURL to 'mailto:email@address.com'.

• Set every image's linkTarget to '_self'.

• Set showOpenButton="TRUE" in your gallery's XML file.

• Change the icon for the 'Open Image' button using the technique in the Using Custom Icons support section.

• Change the toolip text for the 'Open Image' button using the languageList configuration option (so as not to confuse users).

The imageShadowColor configuration option in your gallery's XML file is currently set to:

imageShadowColor="rgba(0,0,0,1
0
0)"

The 4th parameter of the rgba(r,g,b,a) value should be set to 0 for the color to be fully transparent so change it to the following:

imageShadowColor="rgba(0,0,0,0)"

For others reading this thread, you can remove the drop shadow on the main images by either setting imageShadowBlur="0" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) or by setting the opacity of the imageShadowColor to zero, e.g. imageShadowColor="rgba(0,0,0,0)" ('Customize -> Color').
The 4th parameter of the rgba(r,g,b,a) value is the opacity (the alpha channel).

There are two separate issues causing your problems, both of which look to be caused by global CSS on your web page that the Juicebox gallery is inheriting.
It looks like your web page uses the border-box model for all elements on the page (which affects the icons and thumbnail frames being offset) and sets a global font (which overrides the main image navigation buttons).

Try adding the following CSS to your gallery's 'jbcore/classic/theme.css' page which should solve the second issue (with the main image navigation buttons):

.jb-navigation .jbn-left-button, .jb-navigation .jbn-right-button {
    font-family: juicebox;
}

With regard to the first issue, try searching through the CSS on your web page for an entry such as:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If you find such an entry, change it to:

body {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

... and then add the following CSS to your gallery's 'jbcore/classic/theme.css' page. This should fix the problem.

.juicebox-gallery a, .juicebox-gallery div, .juicebox-gallery h1, .juicebox-gallery h2, .juicebox-gallery h3, .juicebox-gallery h4, .juicebox-gallery p, .juicebox-gallery span, .juicebox-gallery u {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Bug reports have been logged for both issues so the gallery elements affected should hopefully be better protected against global CSS in the next version of Juicebox.

If you plan to embed multiple galleries on a single page, you can do the following:
(1) Create your galleries and keep each one in its own folder.
(2) Upload the complete gallery folders (not just the contents) to your web server.
(3) Embed each gallery in your web page using the baseUrl method documented here.

Here are a few tips:

• It does not matter where on your web server you upload your gallery folders to as long as the two paths within the baseUrl embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.

• Each gallery must be embedded in a <div> with a unique 'id'.

• It is necessary to load the 'juicebox.js' file only once per page (not once per gallery).

For example, if you were to embed two galleries on a single page, the embedding code for the two galleries might look something like this.

<script src="http://www.example.com/gallery1/jbcore/juicebox.js"></script>

<script>
  new juicebox({
    baseUrl: 'http://www.example.com/gallery1/',
    containerId: 'juicebox-container1',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container1"></div>

<script>
  new juicebox({
    baseUrl: 'http://www.example.com/gallery2/',
    containerId: 'juicebox-container2',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container2"></div>

If you are embedding multiple galleries on different pages (i.e. only one gallery per page, then you can follow the standard embedding instructions here or the baseUrl method. Either will work equally well.
CSS (Cascading Style Sheets) is a method of styling web pages. It is not possible to embed a gallery 'in another CSS'. Do you perhaps mean a CMS (Content Management System) such as WordPress, Joomla or Drupal? If so, you can embed Juicebox galleries in any web page in the same way.

You can embed a Juicebox gallery in Drupal by either:
(1) Using the Juicebox module for Drupal. (Please note that we did not write the module ourselves and support for the module should be directed towards the Drupal forums where the author of the module should be able to help you out.)
... or:
(2) Following the manual embedding instructions here.

If you want to be able to open an image from within a gallery in a lightbox-style modal window, then this can be achieved by following the instructions in this forum post.

I expect it would be rather complex to try to incorporate such functionality into the Juicebox module and it would probably be easier to try to implement it manually.

First, create the gallery as required (with the necessary linkURLs and linkTargets in the gallery's 'config.xml' file).
Next, you would need to include all the necessary external JavaScript and CSS files (from the code in the forum post linked to above) into the <head> section of your page.
These two links should be able to help with this:
https://drupal.org/node/171209
https://drupal.org/node/304255

Then, the embedding code that you would need to add to your page would look something like this:

<script type="text/javascript">
    Shadowbox.init({
        skipSetup: true
    });
    var jb;
    $(document).ready(function () {
        jb = new juicebox({
            containerId: 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '600'
        });
    });
    function func() {
        var index = jb.getImageIndex();
        var info = jb.getImageInfo(index);
        var url = info.imageURL;
        var title = info.title;
        Shadowbox.open({
            content: url,
            player: 'img',
            title: title
        });                
    }
</script>
<div id="juicebox-container"></div>

The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.

The gallery sizing issue in iOS 7 has now been fixed in Juicebox v1.3.3. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.

The easiest solution (if both the backButton and galleryTitle are positioned on the OVERLAY) would be to set backButtonHAlign="LEFT" and galleryTitleHAlign="CENTER" (or vice versa). (An alternative solution would be to set backButtonPosition="TOP" and galleryTitlePosition="OVERLAY".)

You should be able to tweak the position of either the Back Button or the Gallery Title via CSS as follows:

<style type="text/css">
    /* Back Button */
    .jb-go-back {
        margin-left: 100px !important;
    }

    /* Gallery Title */
    .jb-area-large-mode-title {
        margin-left: 150px !important;
    }
</style>

No. This is not possible.

We did not write the Juicebox module for Drupal ourselves and, unfortunately, I am unfamiliar with its code.
Please post your query in the Drupal forums where the author of the module should be able to help you out.

@guuz

If you just want the image to open in a new tab/window when clicked, set imageClickMode="OPEN_URL".
When an image is clicked, the corresponding linkURL will be opened in a tab/window specified by the linkTarget attribute.
You might like to take a look at this forum post which details how to have each image appear in a lightbox-style overlay when clicked.

Thank you for providing the URL to your gallery.
It looks like your problem is caused by global CSS rules in your 'style.css' file. In this file you have the following code:

img, object, embed, video {
    max-width: 100%;
    left: 75px;
    right: auto;
    margin-top: 10px;
    margin-left: 5px;
    position: relative;
    float: left;
}

These CSS rules will apply to all images on your web page (including those in your Juicebox gallery). Juicebox has no option but to inherit such global rules.
These rules should be applied only to those elements on your web page which require them through use of CSS classes and ids.
If you were to remove the code above (just as a test), you should hopefully see that the gallery functions correctly and your images are no longer shifted to the right (resulting in cropping).

Give each 'juicebox-container' <div> a unique 'id' and refer to that 'id' in the gallery's containerId configuration options.
For example:

<!--START JUICEBOX EMBED-->
<script src="http://www.mywebsite.com/_juicebox/First-Gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/First-Gallery/",
containerId : "juicebox-container-one",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-one"></div>
<!--END JUICEBOX EMBED-->

Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.

<!--START JUICEBOX EMBED-->
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/Gallery-Two/",
containerId : "juicebox-container-two",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-two"></div>
<!--END JUICEBOX EMBED-->

Incidentally, you need to load only one instance of the 'juicebox.js' file on your page and your baseUrls should end with a trailing slash.