2

Utilizo em meu site Carousel e Material Box para que o usuário possa clicar numa imagem e ela ser expandida. Percebi portanto que é possível o usuário arrastar (com mouse no pc ou dedo no mobile) para ir para a próxima imagem sem que o Material Box tenha sido fechado, fazendo com que a imagem que estava clicada fique com bordas acinzentadas.

Como poderia resolver esse caso?

Segue código para análise, mas caso seja melhor conferir diretamente do meu site, só ir na aba Galeria: 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>

1 Resposta 1

1

Insira este código na página:

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

Não é a solução mais elegante, mas ele força o fechamento da visualização da foto quando o mouse é pressionado sobre a foto ou sobre o fundo escuro após meio segundo (500 = 500 milissegundos). Desta forma, caso o usuário arraste a foto em vez de clicar para fechar, o código força o fechamento, evitando ele ficar aberto na galeria com o overlay escuro.

3
  • no desktop realmente deu certo, mas percebi que no mobile isso não funcionou, tentei portanto utilizar .carousel-item.active junto com .materialboxed.active da função, mas ainda não foi, o que recomenda para que funcione? 3/03/2020 às 12:03
  • 1
    Vou dar uma olhada e te dou uma resposta.
    – Meu ovo
    3/03/2020 às 12:16
  • 1
    É só adicionar o evento touchstart, ficando assim: "mousedown touchstart"
    – Meu ovo
    3/03/2020 às 12:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .