Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 17, 2016 at 12:57 am #633388
    Kahil

    I don’t know if anyone else noticed this, but if I have my site set to use a sticky header that doesn’t shrink…then click on a lightbox linked image, the preview size is just a little too large to the point where the header overlaps and hides the close button. Maybe the theme should have an “if” statement built in to account for a sticky header height and settings?

    May 17, 2016 at 5:08 pm #633847
    Yigit

    Hey Kahil,

    Can you please post the link to your website and point out the issue? :)

    Best regards,
    Yigit

    May 17, 2016 at 8:57 pm #633971
    Kahil

    Here is a link in the private content section.

    May 17, 2016 at 8:59 pm #633973
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .mfp-wrap {
    z-index: 99999;
}

    Best regards,
    Yigit

    May 17, 2016 at 9:21 pm #634007
    Kahil

    That worked so you can see the “X”….but I still think that maybe the background overlay should be darker and the max image size should be a little smaller. The “X” is right up there against the top of the browser, which can make it less noticeable. A slighter darker overlay would help to make it stand out a little better as well.

    It does help to also add the z-index setting to the background overlay. Here are the changes I made in order to make it so that the lightbox image stands out a little better:

    .mfp-wrap, .mfp-zoom-in.mfp-ready.mfp-bg  {z-index: 99999;}

.mfp-zoom-in.mfp-ready.mfp-bg {opacity:0.85!important;}

div.avia-popup .mfp-close {border:2px solid #808080!important; right:30px!important;}

img.mfp-img {max-width:90%!important;}

    On a slightly related note….any idea why the hover overlay for the thumbnail only shows as a thin bar across the top of the image the first time you hover over it after the page loads? It will show if you hover over it again. You can test this on that page by hitting refresh.

    May 19, 2016 at 4:54 am #634891
    Ismael

    Hi,

    Change the opacity of the lightbox background with this:

    .mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.2!important;
}

    On a slightly related note….any idea why the hover overlay for the thumbnail only shows as a thin bar across the top of the image the first time you hover over it after the page loads? It will show if you hover over it again. You can test this on that page by hitting refresh.

    I can’t seem to reproduce the issue on Chrome, Windows 7. What is your browser?

    Best regards,
    Ismael

    May 19, 2016 at 4:56 am #634894
    Kahil

    Chrome on Windows 10

    May 19, 2016 at 5:30 am #634903
    Basilis

    Hey!

    On chrome, windows 10 loaded to all image, but it just requires for all the page to load.
    if I hovered, before all page loaded then it shows as small yes

    Regards,
    Basilis

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.