0

Estou utilizando jquery / php para acessar a câmera do usuário e tirar foto para um cadastro. E na pagina alterar dados usuário preciso que ao ser carregada mostre a foto gravada no banco em uma div "photodb" e quando clicar no botão tirar foto apareça a nova imagem em outra div "photo" escondendo a div da foto gravada no banco. Como está o código abaixo eu consigo carregar a página com a foto do BD porém ao clicar em tirar foto eu desativo e não sei como fazer aparecer a div photo que está escondida por default.

    <?php
  <div class='contentarea'>
  <div class='camera'>
    <video id='video'>WEBCAM não encontrada!</video>
    <button id='startbutton' class='btn-toggle' data-element='#photodb'>Tirar foto</button> 
  </div>
  <canvas id='canvas'>  </canvas>
  <div id='photobd'>
    <img src='gera.php?id=$id' border='1'>
  </div>
  <div id='photo' class='output' style="display: none">
    <img src='' border='1'>
  </div>
 </div> 
?>

Não posso usar o evento onclick pois na função do jquery já capta o click e tentei usar o evento ferrou o que está funcionando. Utilizei uma função encontrada aqui no forum mostrar/esconder div e consigo esconder a div photodb mas não sei como fazer aparecer a div photo.

   <script>
   $(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
    });
  });
 </script>

após isso como faço pra mudar o display:none da div photo para aparecer?

1
  • Se o photobd é id, nenhuma necessidade de localizar a div a ser escondida usando um data-element no botão. Você estar gerando atributos desnecessários. Commented 31/08/2017 às 20:44

2 Respostas 2

0

Para ocultar uma div, basta utilizar o método .hide() e, para exibir a div que está oculta, utilizar o método .show(), conforme exemplo abaixo:

$(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
        //Oculta a div com id photobd
        $('#photobd').hide();
        //Exibe a div com id photo
        $('#photo').show();
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='contentarea'>
  <div class='camera'>
    <video id='video'>WEBCAM não encontrada!</video>
    <button id='startbutton' class='btn-toggle' data-element='#photodb'>Tirar foto</button> 
  </div>
  <canvas id='canvas'>  </canvas>
  <div id='photobd'>
    <img src='http://www.iconsdb.com/icons/preview/gray/screenshot-xxl.png' border='1'>
  </div>
  <div id='photo' class='output' style="display: none">
    <img src='https://lh3.googleusercontent.com/3qybHqE4ff9MOts7v5l4S09W3HtOymwDic4LYzNVU-PhDIFvYAbju8qfRKB7AoxeWA=w170' border='1'>
  </div>
 </div>

1
  • 1
    Valeu Leandro... funcionando perfeitamente.. Commented 1/09/2017 às 16:39
0

Não há nenhum problema em inserir mais de um evento click no mesmo elemento.

$("#startbutton").on("click", function(){
    $("#photobd").hide();
    $("#photo").show();
});

Simples assim.

Outra coisa: seu código não funciona porque você está referenciando "photodb" no data-element, mas o id da div é "photobd". Esse é o problema em usar atributos e código em acesso. Faça sempre o mínimo.

2
  • Estava fazendo evento onclick(mudar); dentro do botão tirar foto... javascript puro. Ai dava conflito com o jquery, pois não funcionava mais nada. Commented 1/09/2017 às 16:41
  • Se essa resposta ajudou você, favor aceita-la, @JeanSemensi Commented 1/09/2017 às 17:03

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 .