• I’m using Image Map Pro, Popup Maker and MaxGalleria and running into issues with conflicting z indices.

    I want to be able to bring the Image Map Pro imagemap up fullscreen, click on an icon to launch a Popup Maker popup and then click on a MaxGalleria gallery within the popup causing the selected image to appear on top. In other words, the layers should be (from bottom to top) site -> full screen image map -> popup -> MaxGalleria image.

    Is it possible to adjust the z-index used by MaxGalleria when it opens an image? I can adjust the Popup Maker z index to whatever I like, but I can’t adjust the Image Map Pro z-index, which is hardwired at 999999. If I can specify the MaxGalleria z index I could assign it and the Popup Maker z-index to play nicely together.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author AlanP57

    (@alanp57)

    Are you using the image tiles gallery?

    Is it correct to assume that you are viewing the gallery from the front end of the site?

    When MaxGalleria opens an image are you referring to the lightbox?

    Thread Starter MarkOlbert

    (@markolbert)

    Yes, I am using the image tiles gallery.
    Yes, I am viewing the gallery from the front end of the site (if I’m understanding “front end” correctly).
    Yes, I am referring to the lightbox.

    I’d like the lightbox z-index to be greater than the popup z-index which in turn I’d like to be greater than the image map pro full screen z-index. To do this I need to control two out of the three of the z-indices. I can control the popup z-index, but not the image map pro z-index. I’m hoping you can show me how to control the lightbox z-index.

    BTW, I am a subscriber to your suite of plugins. If I should be posting this question in one of your subscription-based help forums please let me know.

    Plugin Author AlanP57

    (@alanp57)

    We use the Magnific Popup. The structure of the lightbox HTML is as follows

    <div class="mfp-content">
      <div class="mfp-figure">
        <figure> .    
          <img class="mfp-img" alt="" src="...">

    Looking at the z-indexs they all seem to be ‘auto’. You could try setting any of the class elements to the max:

    .mfp-content {
      z-index: 9999999;
    }
    Thread Starter MarkOlbert

    (@markolbert)

    Thanx, Alan, I tried your suggestion but the “final” image display is still hidden by the Image Map Pro full screen display.

    I looked at the html source in chrome via F12, and I can see that the div tagged with the mfp-content class does, in fact, have the very high z-index value I assigned to it via an entry in the theme’s additional css file.

    Interestingly, the full screen Image Map Pro image map did not show up anywhere in the chrome source code display that I could see. It appears to be some kind of separate overlay outside of the “structure” of the WP-generated page…which I didn’t even know was possible.

    I realize I’m now outside of the MaxGalleria space, but if you have any thoughts or suggestions about how I can “see” what Image Map Pro is doing behind the scenes I’d appreciate it. Alternatively, if you know of another image map plugin that plays more nicely with others I’d appreciate a recommendation.

    Plugin Author AlanP57

    (@alanp57)

    Probably you cannot see the Image Map Pro because if it has been added after the source code for the page was loaded. Recent changes to the DOM are not necessary reflected in the page source code.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing Z Index’ is closed to new replies.