I initially posted over in the Simpleviewer forums to try and get an answer, but it seems like it is more appropriate here. I've been trying to fix an issue I've been having with my Superfish menus and Juicebox galleries where the menus wouldn't be accessible when hovering over the gallery. I was able to fix this using the same solution that was found here, however I have uncovered another bug that seems to be a bit more difficult to solve.

When I open a full screen version of a Juicebox gallery (I do this through my photo gallery which is built off displaying images through Juicebox + Views), the menus will display over the gallery. You can take a look at my post on the Simpleviewer forums for some sample images to understand what I'm talking about.

Changing the z-index back to their original values does not change this. It looks like I either need to change the background to opaque instead of transparent OR remove the full screen option altogether, but I would need to change the default settings from the Drupal Juicebox module so that Views could display these photo galleries properly. How would I be able to accomplish this?

Comments

rjacobs’s picture

rjacobs commented
Category: Bug report » Support request
Priority: Major » Normal

Hi xopherus,

Yes, these display layering issues can be something of a pain to address. However, I don't think this actual Drupal module could be a significant variable in your situation. My guess is that there is some incompatible layering happening because of interactions between superfish z-indexing, the nesting of items (specifically the menu divs) in your theme, and the Juicebox javascript library itself.

Though this Drupal module does a lot of things under the hood, most of it is related to the generation of Juicebox XML, as ultimately that's what most of the Drupal-specific image data is expressed as when building a gallery. The Juicebox javascript library handles the "unpacking" of that XML and its final display as markup. Though this module does generate some embed html markup, it's quite simple in structure, and no special CSS or z-index settings are manipulated. Here's what that embed markup looks like:

<div class="juicebox-parent">
<div id="gallery-specific-id" class="juicebox-container">
<noscript>
<!-- Image gallery content for non-javascript devices -->
... some aux markup here for SEO non-javascript devices ...
</noscript>
</div></div>

That markup then makes its way to the page via whatever "thing" the gallery is based on (inside wrappers for a field or a view), and it's then up to the Juicebox javascript library to take it from there, "injecting" all the gallery markup inside that embed code. So typically layering issues can be addressed by alerting some CSS for the juicebox-parent class or some other higher-level wrappers.

In the case of a fullscreen expand, well, I'm actually not sure about the details. How that's handled is all part of the javascript library. From what I can see, it places a <div id="jb-glry-dlg"> at the very end of the <body>, with absolute positioning and 100% width/height, and then "injects" the galley markup there. Perhaps that other jb-glry-dlg div needs to be factored-in to your z-index settings in relation to the superfish menu?

You might also be able to get more guidance on the library-specific layering of fullscreen mode over in: http://juicebox.net/support/

I hope that helps a bit.

rjacobs’s picture

rjacobs commented

This looks like the matching issue in the Juicebox javascript library's forum:

http://juicebox.net/forum/viewtopic.php?id=1389

The details there may be of use to anyone else having this kind of issue.

@xopherus, did you resolve this locally?

rjacobs’s picture

rjacobs commented
Assigned: Xopherus » Unassigned
Status: Active » Closed (works as designed)

I have not heard anything back on this in a while, so I'm assuming that points from the Juicebox javascript library forum addressed this (http://juicebox.net/forum/viewtopic.php?id=1389).

If there is any reason to believe that this Drupal module could still be related to the problem, don't hesitate to re-open.

Xopherus’s picture

Xopherus commented

@rjacobs

That link you provided from juicebox.net was in fact my post. I was able to use the expandInNewPage workaround to avoid having to adjust too much CSS. After updating my superfish library I'm still having some issues related to this https://www.drupal.org/node/2221831 but I'm going to try and figure out what nsjski did. It's funny that you posted my link to that thread because that was one of the first issues I encountered.

rjacobs’s picture

rjacobs commented

xopherus, if you make any specific modifications to your CSS (to fix menu layering issues) can you share them here when you are done? I don't personally use superfish or nice menus alongside Juicebox, but there are certainly other users out there who do. I'm sure they would be interested to reference any details that you can provide.

Xopherus’s picture

Xopherus commented

Sure! I was able to find the containers for the superfish menu AND the main content area. I just added some z-index values to these containers so that the menu would always appear on top of the content area. For my theme (AdaptiveTheme + Mix-and-Match Subtheme) I was able to make changes to the following containers:

/* Horizontal Menu */
#menu-bar {
  position: relative;
  z-index: 2;
}

/* Content Area */
.region { 
  position: relative; 
  z-index: 1;
}

I hope this helps anyone else with the same issue.

rjacobs’s picture

rjacobs commented
Version: 7.x-2.0-beta6 » 7.x-2.0

Thanks xopherus! I'm sure that will be a useful reference for some other users.

muranod’s picture

muranod commented

Thanks, xopherus. Tried that, but it keeps my sub-menu items from displaying across the site. Only option I've found so far is to disable fullscreen gallery display. Otherwise, the menu displays across the middle of the gallery in fullscreen mode.

BUT - just tooling around with it a bit more. I used your css above, but without the z-index values, then in Juicebox config options set:

expandInNewPage="TRUE"
showExpandButton="TRUE"

and now it seems to be working fine.

Thanks again for the help! I also cross-posted in the Juicebox forum. Hope that's ok:

http://juicebox.net/forum/viewtopic.php?pid=6700#p6700

Dan