1 Topic by arnolfo (edited by arnolfo 2018-04-23 17:24:16)

  • Registered: 2018-04-23
  • Posts: 2

Topic: Z-index (tried 9999 on main Nav)

I looked this up first but could not find the solution. My main nav is set to a z-index of 1000. However the juicebox gallery navigation div obstructs the navigation menu - the user can see the menu items but the overly large div area for the Juicebox nav arrows are above my menu items. And the thumbnail will move overtop the main as the page is scrolled down. So, I set my main nav (w-nav) to 9999 but the condition still occurs. What can i do in this instance?

https://ebandlmarketing.com/arnica/gallery.html

Also is there anyway to control the space between the thumbnails and the main image? I can't seem to make it fixed to about 30px max.

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,917

Re: Z-index (tried 9999 on main Nav)

What can i do in this instance?

It looks like you should set z-index: 9999; on your .header CSS class.

<style type="text/css">
    .header {
        z-index: 9999;
    }
</style>

This should hopefully solve your problem.

Also is there anyway to control the space between the thumbnails and the main image?

No, at least not directly.
The thumbnails are positioned via the thumbsPosition configuration option and the main images within the gallery are dynamically scaled (within the gallery's image area) via the imageScaleMode configuration option. As such, there is no configuration option available to simply adjust the distance between the thumbnails and the main images.
If you want to reduce the space between the thumbnails and the main images, then try reducing the height of your gallery slightly. (Try a fixed height of '600px' or '800px' initially and see how things look.) The same vertical space as before will be reserved for the thumbnails so, reducing the height of your gallery will result in less height being available for the gallery's image area and there should be less space above and below the main images.
Please see this FAQ for further details.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

I hope this helps.

  • Registered: 2018-04-23
  • Posts: 2

Re: Z-index (tried 9999 on main Nav)

Thank you, that worked.

Also, I'll try reducing the height to bring the thumbnails closer. Seems to me the thumbnails by default are placed too far from the main image.

Thanks again...

  • Registered: 2012-04-24
  • Posts: 5,917

Re: Z-index (tried 9999 on main Nav)

Thank you, that worked.

That's great! Thank you for letting me know.

Also, I'll try reducing the height to bring the thumbnails closer. Seems to me the thumbnails by default are placed too far from the main image.

It's probably just that your gallery is too tall and that the images cannot be scaled any larger within the gallery without being cropped at the left and right sides (which you could try by setting imageScaleMode="FILL").
Hopefully reducing your gallery's height will help to minimize the space between the images and thumbnails.

Thanks again...

You're welcome!