Open Material Box when dragging to next image

Asked

Viewed 84 times

2

I use on my website Carousel and Material Box so that the user can click on an image and it can be expanded. I therefore realized that it is possible for the user to drag (with mouse on the pc or finger on the mobile) to go to the next image without the Material Box has been closed, causing the image that was clicked to have gray edges.

How could I solve this case?

Follow code for analysis, but if it is better to check directly from my site, just go to the Gallery tab: https://modelo.sampa.br/ 

<!DOCTYPE html>
<html lang="pt-br">

<head>

    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>
    <!-- ABA GALERIA -->
    <div id="galeria" class="container">

        <div class="wrapper-carousel">
            <h5 class="espaco_acima">Galeria 1</h5>

            <div id="carousel-1" class="carousel">

                <div class="carousel-item">
                    <img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
                </div>
                <div class="carousel-item">
                    <img class="materialboxed" src="https://materializecss.com/images/sample-1.jpg">
                </div>

            </div>
        </div>
    </div>

    <!-- DEPENDÊNCIAS -->
    <!-- Materialize JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Inicializar Materialize -->
    <script>
        M.AutoInit();
    </script>
</body>

javascript jquery materialize

1 answer

1


Enter this code on the page:

$(document).on("mousedown", ".materialboxed.active, #materialbox-overlay", function(){
   setTimeout(function(){
      if($(".materialboxed.active").length){
         var instance = M.Materialbox.getInstance($(".materialboxed.active"));
         instance.close();
      }
   }, 500);
});

It is not the most elegant solution, but it forces the closing of the photo view when the mouse is pressed on the photo or on the dark background after half a second (500 = 500 milliseconds). This way, if the user drags the photo instead of clicking to close, the code forces the closure, avoiding it to stay open in the gallery with the dark overlay.

  • on the desktop really worked, but I realized that on mobile this didn’t work, I tried to use .carousel-item.active along with .materialboxed.active function, but not yet, what it recommends to work?

  • 1

    I’ll take a look and give you an answer.

  • 1

    Just add the event touchstart, being like this: "mousedown touchstart"

Browser other questions tagged javascript jquery materialize

You are not signed in. Login or sign up in order to post.