overlapping issue when using the magnificent popup plug in for lightbox overlay

229
July 24, 2017, at 6:13 PM

i am using the lighbtox overlay from http://dimsemenov.com/plugins/magnific-popup/ in my website. in that page there is a "lightbox gallery" example

i used that example in http://37.60.251.65/~esoluti3/maximo/newseventsx.php. i copied the source code of the example exactly as it is

the problem is if you click on a small thumbnail then the enlarged image is coming under the main menu (it is overlapping and the main menu is covering the picture)

how do i fix this issue? i need the enlarged image to come on top of the main menu (picture covers main menu and not main menu cover image)

i also need the light grey overlay which shows when thumbnail is clicked to come on top of the main menu and not under it

i am using a readymade layout to make my website and i think the style rules of the layout are conflicting with the lightbox overlay. the logo of site and main menu are in a header tag. if i remove that tag then the lightbox overlay works perfectly

also in the website that has the original example when you hover over a thumbnail the mouse icon will change to a magnifying glass with a + in it

in my website if you hover over a thumbnail the finger icon shows and not the magnifying glass with a + in it. if you click on a thumbnail and the enlarged image shows the icon will change to a magnifying glass with a - in it

i need the magnifying glass with a + in it to show in my website if you hover over the thumbnail. how do i fix this issue?

thanks :)

Answer 1

There is mistakes in z-index

Lookout this property in your css file

header {
    background: url(../images/body-bg.png) repeat;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    -o-box-shadow: box-shadow:0 0px 3px rgba(0, 0, 0, 0.8);
    padding: 15px 0 0 0;
    color: #bec9d5;
    position: relative;
    z-index: 10000;
}

Replace your z-index with 100

Like z-index: 100;

Look this

EDIT

Add this 3 new properties in your css

.mfp-figure button.mfp-close {
    cursor: pointer;
}
.popup-gallery a {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mfp-figure figure {
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    cursor: zoom-out;
}

Hope this will helps you.

READ ALSO
How to fix Leverage Browser Caching issue on google insights using MVC .Net

How to fix Leverage Browser Caching issue on google insights using MVC .Net

I'm unable to fix Leverage Browser Caching issue on google PageSpeed Insight by the way i'm using this code in Webconfig file but not fixed yet

198
Multi direction full page slider / carrousel

Multi direction full page slider / carrousel

I'm looking for a solution for fullpagejs which could implement this :

282
Invalid or unexpected token html/php [on hold]

Invalid or unexpected token html/php [on hold]

I am printing a php variable with html and the results are as follows:

402