biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
MIT License
2.03k stars 228 forks source link

Some options don't work on mobile #522

Open gipic opened 1 month ago

gipic commented 1 month ago

Hi, I am new to this library and I appreciate your work, because this is awesome! Anyway, I have found some little bugs:

I have tried on Chrome (last version) on Windows 10 and Linux (Kubuntu). About mobile phones: iphone 13 mini and an old Galaxy S7.

Maybe I don't know ho to configure it because I am very new to this library. If so, I apologize.

The gallery is the simplest one (images are on "img" folder).

THANK YOUR VERY MUCH.

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galleria con GLightbox</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .container img {
            margin-right: 5px;
        }

        @media screen and (max-width: 700px) {
            img {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="img/large/gm1.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm1.jpg" alt="image" />
        </a>

        <a href="img/large/gm2.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm2.jpg" alt="image" />
        </a>
        <a href="img/large/gm3.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm3.jpg" alt="image" />
        </a>

        <a href="img/large/gm4.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm4.jpg" alt="image" />
        </a>

        <a href="img/large/gm5.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm5.jpg" alt="image" />
        </a>

        <a href="img/large/gm6.jpg" class="glightbox" data-gallery="gallery1">
            <img src="img/small/gm6.jpg" alt="image" />
        </a>
    </div>

    <script>
        let lightbox = GLightbox({zoomable: false });
    </script>
</body>

</html>