Foundry V1.1.0 Nav Bar and CosCulture's Responsive Lightbox Stack

Foundry
1

Folks,

Just installed the latest version of Foundry (V1.1.0) on my test machine, to check out the new features (thanks, Adam!). Opened up a project that I’d created using Foundry V1.0, and have observed one issue:

When using a lightbox (I’m using the “Responsive Lightbox” from CosCulture), the sticky Nav Bar that I have on each page is still displayed when the lightbox is “activated” (i.e., when the image being highlighted is being shown, and the rest of the page has the selected overlay background color obscuring it). Depending on where the selected image is on the page, this can lead to the Nav Bar lying on top of the light-boxed image, as shown here:

Foundry_V1.1.0_Lightbox.jpeg1242×945 213 KB

With Foundry V1.0, this did not occur; the light-boxed image is shown as expected, and the rest of the page (Nav Bar included) is covered by the overlay background and the light-boxed image:

Foundry_V1.0_Lightbox.jpeg1242×945 197 KB

I’ve uploaded the site (built with Foundry V1.1.0) to a staging area, if you want to check out the behavior for yourself: go to

http://www.bobscustomremodel.com/FoundryV110/What-We-Do/Custom-Kitchen-Remodeling-Services/ and click on the very first image (alt tag “Bob Inspects His Work!”).

Compare this to the behavior with Foundry V1.0, the results of which can be seen on the corresponding page on the “live” site: http://www.bobscustomremodel.com/What-We-Do/Custom-Kitchen-Remodeling-Services/

This issue does not occur when using Nick Cates’ “Photo” stack (as I am doing in each of the pages under the "Photo Galleries"link. I haven’t tried any other lightbox stacks yet, to see if similar behavior/interactions occur.

The “Responsive Lightbox” stack from CosCulture does have a field for specifying the z-index, but increasing the value does not seem to change the behavior.

Other items that may be relevant:
Running RapidWeaver V7.1.3
Mac OS 10.11.6

Any info you can provide would be appreciated. THANKS!

Javier Garriz
javier@rightbraincomm.com

2

It is likely that the z-index value of the lightbox is lower than that of the navigation bar. I’ve had to adjust the z-index a bit to allow its sticky navigation to operate better on mobile devices.

If you want to send me the project file and the associated stack, via a private message or email, I can have a look at it and troubleshoot it better for you to see if it is a conflict, bug, etc.

3

Thanks for your lightning-quick response, Adam.

I’ve posted the files (the project file and the CosCulture Responsive Lightbox stack) to Dropbox, and would be glad to send you the links–what’s your email address?

Again, thanks!

Javier Garriz
javier@rightbraincomm.com

4

My email address is adam at elixirgraphics dot com or you can use the private messaging system of the forum. Up to you.

5

Just sent the links via email. Thanks!

6

Just had a look at it. The lightbox’s background overlay has a z-index of 502 and the Navigation Bar uses a z-index of 999. This means the Navigation Bar is going to be on top of the lightbox, as you’re seeing in your usage.

I’m a little surprised to see a lightbox with a z-index in the 500s. This doesn’t mean that it is wrong, just that usually with a lightbox you want to ensure it is on top of everything.

I needed to up the z-index for the Navigation Bar to make it play well with some other things in Foundry and make it more robust on mobile devices like I said. If you’re really set on using that particular lightbox I can give you a bit of CSS to up the z-index on the lightbox’s overlay… but this CSS is not going to be limited to that particular stack. They’re using a lightbox library called Magnific Popup, so anything else you place on your page in the future, that may also be using that library, would be affected.

1 Like
7

Just to close the loop on this discussion: I checked with Eric Boo (developer of CosCulture stacks) and he provided me with an update to his Responsive Lightbox stack. The z-index value field in the stack now works as expected (as in, if you specify a value higher than, say, the z-index value of the Nav Bar, the light boxed image and background will indeed sit over top of the Nav Bar). Eric then pushed out the version as an update to all owners of the stack.

BUT….and this is a relatively minor point, as I mentioned to Eric…I noticed that if you have multiple instances of the Responsive Lightbox stack on a page (as I do in the project mentioned above), in order for the lightbox to work properly, the z-index value for ALL the Responsive Lightbox stacks on the page must have the very same z-index value.

Regardless, things all work now, without any custom CSS. Just wanted to put add this to the discussion, in case anyone else was running into the same issue.

Thanks again, Adam.

Javier Garriz
javier@rightbraincomm.com

1 Like
8

Glad you got it all sorted out!