Hopefully a future 'jbcore' upgrade will solve the problem but I'll post back here if and when I have any more news on this issue.

@biped

Thank you for your suggestions.

With regard to your first suggestion, perhaps you could use one of the following ideas.

(1)
You could use the Open Image button (set showOpenButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) to point to your custom pages instead of the gallery images.
By default the Open Image button on the Button Bar opens the current image's imageURL in a new tab.
However, if the current image has been given a linkURL (which you can enter in JuiceboxBuilder-Pro's 'Images' tab), the Open Image button will open the linkURL instead.
Therefore, you could enter a unique linkURL for each image (pointing towards the corresponding custom page).
The linkURL entries can be relative (to the page containing the gallery's embedding code) or absolute (in the form http://www.example.com/gallery/custom.html).
You could then change the icon for the Open Image button to something more appropriate by following the instructions here.
You could also change the rollover text associated with the button using the languageList configuration option.

(2)
An alternative solution would be to use custom purchase URLs as noted here.
(This would leave the Open Image button free for its original intended purpose.)
This functionality was designed with e-commerce in mind but essentially, if an image has been given a purchaseURL (which you would need to add manually to your gallery's XML file), then the shopping cart icon will be displayed on the Button Bar and when the shopping cart icon is clicked, the purchaseURL page is opened in a new tab.
Any image which has not been given a purchaseURL will not have the shopping cart icon displayed.
You could set the purchaseURL paths to point to your custom pages and change the shopping cart icon and rollover text as required (as noted in the links in Suggestion #1 above).

(3)
A further suggestion would be to simply include a link to each image's corresponding custom page in the image captions.
You can use HTML formatting (such as <a> tags to link to other pages or documents) in image captions by following the notes in this FAQ:
How do I add HTML formatting to image captions and titles?

I hope this helps.

Unfortunately, your problem is quite difficult to troubleshoot.
Your hover image appears only when you hover over a link and the gallery's caption area appears only when you hover over the gallery.
In addition to this, the hover plugin you use seems to be using JavaScript to control the hover behavior (rather than just CSS) so enabling :hover in a browser's developer tools does not help.

A Juicebox gallery comprises many different elements, each of which is assigned an appropriate z-index value (so that the correct elements are always visible when they should be) so reducing the z-index value for the caption area alone might not work. (It might need to be lowered below a certain threshold value (in order to be stacked below your hover image) to a point where the caption area is no longer visible at all.)

I still think the best solution would be to increase the z-index value of your hover image. It has fewer components than a Juicebox gallery so, in theory, should be the easier of the two to change.

Unfortunately, I am not familiar with your hover plugin and the best source of help for finding out which of its CSS classes you would need to target with a high z-index value would be its author.

This is a long shot but at the end of your 'hover.js' file, try changing:

function hover_images(in_options)
{
    var elements = domLib_getElementsByTagNames(['img'], true);
    for (var i = 0; i < elements.length; i++)
    {
        var title = hover_image_map[elements[i].src];

        if (undefined != title)
        {
            elements[i].title = title;
        }
    }
}

... to:

function hover_images(in_options)
{
    var elements = domLib_getElementsByTagNames(['img'], true);
    for (var i = 0; i < elements.length; i++)
    {
        elements[i].style.zIndex = '10000';
        var title = hover_image_map[elements[i].src];

        if (undefined != title)
        {
            elements[i].title = title;
        }
    }
}

I do not know if this will work but it might be worth trying.

Juicebox-Lite has a limit of 50 images per gallery. Juicebox-Pro does not have a limit to the number of images you can have in a gallery. It sounds like you have not updated the Drupal module to use your Juicebox-Pro files.

Follow the 'Installation' instructions here: https://www.drupal.org/node/2000300#installation
... and make sure that you use the 'jbcore' folder from the Juicebox-Pro download zip package.

If you continue to experience difficulties, please post back with the URL to your gallery's web page so that I can take a look at the problem and hopefully help further.

Looking at your screenshots, it looks like the caption area is visible in both horizontal and vertical modes. It's just the layout which (almost) hides the problem in vertical mode. You can see the top of the caption area overlapping the lower part of your image frame. The rest of the caption area just overlaps the gallery background so the problem cannot be seen in this area.

captionBackTopArea has a different default value for Small Screen Mode: rgba(0,0,0,0.3) instead of rgba(0,0,0,0).
However, explicitly setting it to rgba(0,0,0,0) does not seem to help.

This certainly looks like a bug. I'll notify the developers.

In the meantime, a suitable workaround should be to set captionBackTopColor to a fully transparent color other that black, as well as setting captionBackColor="rgba(0,0,0,0)". For example:

captionBackColor="rgba(0,0,0,0)"
captionBackTopColor="rgba(255,0,0,0)"

I hope this works OK.
Thank you for reporting this problem.

The z-index for your menu is not quite high enough. It is currently set to 100 (in your 'slidingdoors-2.css' file) but it needs to be greater than 500 in order to be stacked on top of the gallery when a visitor hovers over a menu entry which overlaps the gallery.

This is exactly the issue that I first saw and that my code above should fix.
As I mentioned, I tried the code in Firefox's developer's tools (setting z-index: 9999; dynamically on the #dropmenuexp.dropmenudiv_c container) and it solved the problem.

Please try adding the code to your web page and then clear your browser's cache before reloading your web page.
Be sure to add the code to the end of your web page's <head> section (so that it is not overwritten by the menu's own CSS).
If in any doubt, try adding CSS !important as follows:

<style type="text/css">
    #dropmenuexp.dropmenudiv_c {
        z-index: 9999 !important;
    }
</style>

This issue has been logged.

In the meantime, as the sourcePath entries are not going to be correct (or useful) when opening a gallery on a different computer, perhaps the best course of action would be to simply remove them all from the gallery's XML file before opening the gallery in JuiceboxBuilder-Pro on your Mac.
This can be done in a single search and replace action in a text editor which supports regular expressions, for example Notepad++.

• Open your gallery's XML file in Notepad++.

• Go to 'Search -> Replace...' from the drop-down menu at the top.

• Select 'Regular expression' for the Search Mode.

• Search for: sourcePath=".*?"

• Replace with nothing (empty string).

• Click 'Replace All'.

All sourcePath entries will be removed with this single action.
You can also load multiple XML files into Notepad++ at the same time and remove all sourcePath entries from all files at once.
This might save you some time if you have a large gallery (or multiple galleries) that you need to open on your Mac.

Before making any changes to any files, I recommend that you make backup copies first, just in case anything goes wrong and you need to reinstate the original files at a later date.

I don't see a Juicebox gallery (or any Juicebox gallery embedding code) on the web page whose URL to provided.
However, I have found a few SimpleViewer galleries on your website.

If the problem you are experiencing is with your SimpleViewer-Pro galleries, then please see this FAQ in case it helps.
How do I display SimpleViewer under other elements on my HTML page, for example a drop-down menu?

Also, I notice that your SimpleViewer-Pro galleries are v2.2.0.
Please try upgrading your galleries to the latest version of SimpleViewer-Pro (v2.3.2) as many bugs have been fixed since v2.2.0.
Please see the Version History for a list of changes between versions.
Instructions for downloading the latest version and for upgrading existing galleries can be found on the Upgrading SimpleViewer-Pro support page.

If you are having trouble with embedding a Juicebox gallery on a web page, then please post the relevant URL so that IO can see the problem for myself and hopefully help further. Thank you.

@gfs

Thank you for posting your suggestion here. (It's certainly the best place for all ideas for future versions.)

If anyone reading gfs's post above is looking for similar functionality, then you might like to take a look at the solution I've suggested in this forum thread. Hopefully it will prove to be useful.

You're welcome.

I've now modified the code to accept individual images.
You can identify images to be in fixed positions in one of two ways:
(1) You can use a comma-separated list of images to be in fixed positions via the $fixed array at the top of the script.
(2) You can mark images to be in fixed positions within JuiceboxBuilder-Pro by adding the following code anywhere within an image title.

<span class="fixed"></span>

The script just looks for the term 'fixed' and the code added to the image title will not be visible in the gallery itself.

You can use either of these methods (or a combination of both at the same time).

<?php
header('Content-Type: application/xml');

$filename = 'config.xml';
$fixed = array(1, 2, 3, 8, 11, 12);

if (is_file($filename)) {

    $dom_doc = new DOMDocument('1.0', 'UTF-8');
    $dom_doc->load($filename);

    $settings_tags = $dom_doc->getElementsByTagName('juiceboxgallery');
    $settings_tag = $settings_tags->item(0);

    if (!is_null($settings_tag)) {

        $new_dom_doc = new DOMDocument('1.0', 'UTF-8');
        $new_dom_doc->formatOutput = true;

        $new_settings_tag = $new_dom_doc->createElement('juiceboxgallery');

        $values = array();

        foreach ($settings_tag->attributes as $attribute) {
            $name = $attribute->nodeName;
            $value = $attribute->nodeValue;
            $values[$name] = $value;
        }

        foreach ($values as $key=>$value) {
            $new_settings_tag->setAttribute($key, $value);
        }

        $images = $settings_tag->getElementsByTagName('image');

        $marked = array();
        $all = array();

        for ($i = 0; $i < $images->length; $i++) {
            $image = $images->item($i);
            $title = $image->getElementsByTagName('title');
            $text = $title->item(0);
            if (!is_null($text)) {
                if (stripos($text->nodeValue, 'fixed') !== false) {
                    $marked[] = $i + 1;
                }
            }
            $all[] = $image;
        }

        $remainder = $all;

        $clean = array_values(array_unique(array_merge($fixed, $marked)));

        for ($i = 0; $i < count($clean); $i++) {
            $key = intval($clean[$i]) - 1;
            unset($remainder[$key]);
        }

        shuffle($remainder);

        $counter = 0;

        for ($i = 0; $i < count($all); $i++) {
            $image = in_array($i + 1, $clean) ? $all[$i] : $remainder[$counter++];
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        $new_dom_doc->appendChild($new_settings_tag);

        echo $new_dom_doc->saveXML();

    }

}
?>

Unfortunately, only Google can answer your questions with any authority. They are the only ones that know what algorithms they use to index and rank pages.

I notice that the pages ranked above yours in the search results include YouTube, Facebook and Twitter pages.
They are very large websites with a huge number of backlinks and, as such, they will probably always be ranked above your own website. Unfortunately, there is little that you can do to combat this when dealing with subject matter that crops up on popular websites and media sharing platforms.

The best you can do is provide information regarding your images in your web page (which is what the SEO Content Code generated by JuiceboxBuilder-Pro does) and follow Google's own guidelines and suggestions in their Search Engine Optimization Starter Guide: http://static.googleusercontent.com/med … -guide.pdf
Here's a one-page version: https://storage.googleapis.com/support- … 97B2C885BD

If you have not already done so, then I would recommend submitting your site to Google to be indexed via their Search Console: https://www.google.com/webmasters/tools/submit-url
If there are few (or no) links to your own web site from other web sites, then Google may not be able to find or index your site.

I would think that Google are more likely to index your gallery pages based on the static HTML code on the page itself rather than the code generated dynamically by the 'juicebox.js' file. I would certainly think it is unlikely that Google would ignore the static HTML code in favor of the dynamically generated code (although, again, only Google would know this for sure).