Pure CSS3 LightBox on Mobile

  • Resolved darylmcmullen

    (@darylmcmullen)


    10 years ago

    Added the plugin – works great on a normal page (laptop/desktop/tablet) except it isn’t popping up centered – begins to the left of the site. Also – zooms from small to large instead of large down to small like in your demo.

    Also, on mobile phones the lightbox image is smaller than the thumbnail itself. Pretty much useless.

    Not sure if this is a bug in CSS3 Lightbox plugin or a conflict arising with the WP Theme I’m using.

    Any way to tell? I can get you the link to a demo/test page so you can see what I’m talking about.

    Let me know and thanks!

    Daryl

    https://www.ads-software.com/plugins/css3lightbox/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Rene Hermenau

    (@renehermi)

    A link to demo testpage would be great, so i can check this and fix your issues

    > Also – zooms from small to large instead of large down to small like in your demo.

    This style is delivered as an add-on https://www.wpmarketplace.net/downloads/css3-lightbox-transition-add/

    Best,
    René

    Thread Starter darylmcmullen

    (@darylmcmullen)

    https://promastervocationaltrucks.com/tester/

    Plugin Author Rene Hermenau

    (@renehermi)

    Put this in your custom css:

    .lb-overlay:target {
    z-index: 999;
    }

    I use chrome browser and the image is centered.
    Which browser are you using?

    Thread Starter darylmcmullen

    (@darylmcmullen)

    I use Chrome too.

    The strange thing is that most of my images work fine (centering). It1s
    just the one on this page that is having that issue.

    The bigger thing is the lightbox on mobile devices – it pops up a very
    small thumbnail rather than the larger image.

    I added the code – not sure if the mobile has had time to clear it1s
    cache.

    Will keep checking throughout the day.

    Thanks!

    Daryl

    Thread Starter darylmcmullen

    (@darylmcmullen)

    Rene,

    Not sure why the string is marked as “Resolved.” The code you gave me broke the menu on the mobile site so I had to remove it.

    Also – it never ended up working for the lightbox effect on mobile – still look like tiny little thumbnail images when the pop up.

    Will most likely remove this plugin and go back to one of my traditional lightbox plugins.

    Sorry!

    Daryl

    Plugin Author Rene Hermenau

    (@renehermi)

    Use this additional code for mobile devices and the image will be full size:

    @media only screen and (max-width: 500px) {
.lb-overlay:target {
padding: 10px 10px 10px 10px !important;
z-index:9999;
}
}

    Btw. i resolve a thread at the moment when i am working on it, this helps me to see new threads which are untouched by me on a glance.

    Plugin Author Rene Hermenau

    (@renehermi)

    edit: see the code above.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Pure CSS3 LightBox on Mobile’ is closed to new replies.