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).

That's a good idea. (It's certainly the best place for all the suggestions for future versions. It keeps them all together and ensures that they are not overlooked by the developers.)

Here's a PHP script you can use to fix the position of the first few images in your gallery and then shuffle the rest.
(1) Create a regular gallery with JuiceboxBuilder-Pro.
(2) Save the code below in a file named 'config.php'.
(3) Place the 'config.php' file in your gallery folder.
(4) Use a configUrl in your gallery's embedding code to point towards the 'config.php' file:

configUrl: "config.php",

(5) Change the $fixed variable's value (at the top of the 'config.php' file) to be the number of fixed images at the start of the gallery.

Just be sure to not set randomizeImages="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) as this will randomize the images after the script sets the image order.

I hope this helps.

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

$filename = 'config.xml';
$fixed = 2;

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');

        $all = array();

        foreach ($images as $image) {
            $all[] = $image;
        }

        $integer = intval($fixed);
        $clean = $integer < 0 || $integer > $images->length ? 0 : $integer;

        $remainder = array_slice($all, $clean);

        shuffle($remainder);

        for ($i = 0; $i < $clean; $i++) {
            $image = $all[$i];
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        foreach ($remainder as $image) {
            $node = $new_dom_doc->importNode($image, true);
            $new_settings_tag->appendChild($node);
        }

        $new_dom_doc->appendChild($new_settings_tag);

        echo $new_dom_doc->saveXML();

    }

}
?>

As you are aware, there is currently no way to do this in Juicebox-Pro.
It might be quite a difficult thing to achieve.

One approach might be to create a regular Juicebox-Pro gallery with a static XML file but instead of using this XML file directly, use a configUrl to point towards a PHP (or other server-side scripting language) file which would generate a new XML file dynamically.
The PHP file could read the static XML file and load all the <image> tags into an array and you could then rearrange the elements in the array using PHP functions such as shuffle) before generating a new XML file on-the-fly.
For example, you could load only certain images into a new array to shuffle before writing them out around other images in fixed positions.
It would involve quite a bit of work (and knowledge of PHP) but it would be possible.
These three forum posts might be useful:
http://stackoverflow.com/questions/2671 … f-an-array
http://stackoverflow.com/questions/1775 … -it-in-php
http://stackoverflow.com/questions/2827 … e-elements