0

Bom dia pessoal, preciso clicar em 2 imagens e elas devem se abrir lado a lado para que o cliente possa fazer um comparativo do antes e depois.

Observem que estou usando o materialboxed do materialize até ai ok se ele clicar em 1 só imagem, mas quando ele seleciona 2 imagens queria fazer o mesmo efeito...

<div class="col s2" style="width: 110px">
    <img src="<?php echo Url::getBase().'img/varizes2.jpg'?>" width="105" class="materialboxed"/>
    <label>
        <input type="checkbox" />
        <span>&nbsp;</span>
    </label>
</div>

1 Resposta 1

0

Nem a documentação nem o código especificam que é necessário que o HTML seja um <img>.

Então você pode simplesmente criar um container e aplicar o plugin no container ao invés das imagens.

Exemplo:

$('.compare').materialbox();
.compare {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     
<div class="compare">
  <img src="https://via.placeholder.com/200">
  <img src="https://via.placeholder.com/200/fff000/ffffff">
</div>

JSFiddle funcionando...

5
  • Fernando tinha pensado assim também, mas, acho que o que ele quer é no clique do check abre as imagens, não sei, parece que é isto!
    – LeAndrade
    Commented 19/09/2018 às 17:52
  • 1
    Mas se for isso que ele quer é só ver a documentação e ativar usando método .open(). Acho que essa não seria uma grande barreira.. espero.. Commented 19/09/2018 às 17:53
  • Fernando, obrigado pela resposta, ainda não é assim amigo, e como o LeAndrade falou, eu irei "checar 2" imagens e terei um terceiro botão digamos assim que ao clicar neste terceiro botão as duas imagens checadas iriam abrir igual ao slider ai mesmo... consegui ser claro? valeu Commented 19/09/2018 às 21:01
  • Hmmm.. então as imagens dentro do materialbox serão dinâmicas? Vai depender do input do usuário? Commented 19/09/2018 às 21:05
  • Sim, serão dinamicas, mas estarão salvas em um bd... Commented 20/09/2018 às 13:25

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 .