Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paulo Ladeira

Trocar fotos no evento Onclick

Por , em Javascript

Recommended Posts

Paulo Ladeira    0

Paulo Ladeira
Postado

Preciso trocar as fotos que estão no vetor 1, 2 e 3 no evento de um click. Assim como está troca da foto 1 para 3.

Tentei fazer rodar o vetor, mas não estou conseguindo.

Alguém pode refazer esse código na parte do javascript, de forma que troque essas fotos quando no evento de click?

 

$codigo = $_GET['codigo']; 

?>
           <div class="row mt-4 ml-5"> 
                <?php
                 $sql = "SELECT * FROM $arquivo_pd WHERE id = '$codigo'" 
                                                             or die('Erro de seleção  na tb_veiculos');            
        
                $result_pd= mysqli_query($strcon,$sql)       or die('Erro de consulta na tb_veiculos');
                while ($row = mysqli_fetch_array($result_pd)) { 
                       $id          = $row['id'];
                       $modelo      = $row['modelo'];
                       $marca       = $row['marca'];
                       $cor         = $row['cor'];
                       $url_foto[1] = $row['url_foto01'];
                       $url_foto[2] = $row['url_foto02'];
                       $url_foto[3] = $row['url_foto03']; 
                       $ano_fabricacao = $row['ano_fabricacao'];
                       $ano_modelo  = $row['ano_modelo']; 
                       $valor       = $row['valor']; 
               ?>

               <div class="card">
                    <div class="inner">
                         <img class="card-img-top" src=<?php echo $url_foto[1];?> id="trocaimg" alt="modelo">
                    </div>
                         <div class="card-header">  
                              <input type="button" value=">" onclick="img01();" />
                              <script>
                                function img01 () {
                                  document.getElementById("trocaimg").src=<?php                                                                  
                                  echo json_encode($url_foto[3]);?>;
                               }
                              </script>
                         </div>
               </div>
            <?php
            } 
            ?> 
          </div>
</div><!--container-->
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

washalbano    54

washalbano
Postado

Olá!
segue sugestão para "Trocar imagens ao clicar":
  

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
    <figure>
        <!-- defina no atributo data-images, um array com as imagens a seram usadas -->
        <img src="https://loremflickr.com/320/140/dog" data-images='["dog","bird","cat"]' data-index="0">
        <figcaption>dog</figcaption>
    </figure>
    <figure>
        <!-- no data-index, guardamos o índice da imagem atual -->
        <img src="https://loremflickr.com/320/140/beauty" data-images='["beast","beauty","fantasy", "bike", "river", "programming"]' data-index="0">
        <figcaption>beauty</figcaption>
    </figure>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
  // quando o elemento figure for clicado:
    $('figure').click(function () {

        // o elemento img
        var img = $(this).find('img');

        // os retratos no array em data-images
        var retratos = img.data('images');

        // a quantidade de retratos
        var size = retratos.length;

        // o índice do retrato atual
        var index = img.data('index');

        // próximo retrato/índice
        index += 1;

        // se index for maior que size
        if (index >= size) {
            // volta pra posição zero
            index = 0;
        }

        // a imagem a ser carregada
        var imageNow = retratos[index];

        // troca a imagem
        img.prop('src', 'https://loremflickr.com/320/140/' + imageNow);

        // troca o index
        img.data('index', index);

        // troca o caption
        $(this).find('figcaption').html(index + ' -> ' + imageNow);
    });
</script>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Ladeira    0

Paulo Ladeira
Postado

Caro Washalbano!

Executei o seu código! Ficou travado, não troca imagens. 

Colei seu código em um arquivo html no meu domínio, e fiz as edições de imagens. Não deu certo!

Esse é o link : https://syncpl.com.br/dsv/trocafotos.html

Aqui vai o código do link, e antecipando, fico grato pela sua ajuda...!

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
    <figure>
        <!-- defina no atributo data-images, um array com as imagens a seram usadas -->
        <img src="../imagens/ford01.jpg" data-images='["ford02.jpg","ford03.jpg","ford04.jpg"]' data-index="0">
        <figcaption>ford</figcaption>
    </figure>
    <figure>
        <!-- no data-index, guardamos o índice da imagem atual -->
        <img src="../imagens/renault01.jpg"
        data-images='["renault02.jpg","renault03.jpg","renault04.jpg"]' data-index="0">
        <figcaption>renault</figcaption>
    </figure>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
  // quando o elemento figure for clicado:
    $('figure').click(function () {

        // o elemento img
        var img = $(this).find('img');

        // os retratos no array em data-images
        var retratos = img.data('images');

        // a quantidade de retratos
        var size = retratos.length;

        // o índice do retrato atual
        var index = img.data('index');

        // próximo retrato/índice
        index += 1;

        // se index for maior que size
        if (index >= size) {
            // volta pra posição zero
            index = 0;
        }

        // a imagem a ser carregada
        var imageNow = retratos[index];

        // troca a imagem
        img.prop('src', '../imagens/' + imageNow);

        // troca o index
        img.data('index', index);

        // troca o caption
        $(this).find('figcaption').html(index + ' -> ' + imageNow);
    });
</script>
</body>
</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

washalbano    54

washalbano
Postado

Quando copiei o script daqui pra testar no meu pc, o browser acusou alguns caracteres mágicos que impedem que o script funcione.
veja: https://prnt.sc/ll7utz

Todos aqueles pontos em vermelho são caracteres mágicos(não são visíveis, mas estragam o script)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • violin101
      PHP - Agradecimento e uma Dúvida
      Por violin101
      Caros amigos,  saudações. 
       
      Primeiramente agradeço ao auxílio e ajuda que os amigos têm me dado. 
       
      Minha dúvida:
      - para emissão de nota fiscal eletrônica precisa de um CERTIFICADO e SENHA.
      Como ou onde consigo esses dois itens, para fazer teste de emissão de nota fiscal  ?
       
      Grato, 
       
      Cesar
    • violin101
      PHP - Agradecimento e uma Dúvida
      Por violin101
      Caros amigos,  saudações. 
       
      Primeiramente agradeço ao auxílio e ajuda que os amigos têm me dado. 
       
      Minha dúvida:
      - para emissão de nota fiscal eletrônica precisa de um CERTIFICADO e SENHA.
      Como ou onde consigo esses dois itens, para fazer teste de emissão de nota fiscal  ?
       
      Grato, 
       
      Cesar
    • violin101
      PHP - Abrir e Fechar janela
      Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida.
       
      Estou escrevendo um Sistema que tem vários Módulos.
       
      O módulo principal tem:
      Estoque | Compras | Expedição | Vendas

      Minha dúvida:
      como faço após Acessar o Módulo Principal e Escolher o Módulo que quero trabalhar,
      eu possa fechar o Módulo aberto por exemplo: Estoque, sem alterar o Módulo principal e outros se estiver aberto ?


      Grato,
       
      Cesar
    • douglas79
      Problemas com a última versão do MYSQL
      Por douglas79
      Bom dia,

      Há alguns dias que venho instalar o apache, o php, mysql e o phpmyadmin manualmente e sem obter sucesso. Até consegui rodar o php, porém, quando vou baixar a úitima versão do MYSQL, não tem todos os pacotes nele instalados, inclusive no completo, só encontro o Router.
      Alguém pode me dizer o porquê que isso está ocorrendo?
      Desde já agradeço a ajuda de vocês, que será bem vinda!
      No aguardo!

      Uso a versão 8.3.9 do PHP
      Meu SO é o Windows 10 32 bits
    • violin101
      PHP + Codeigniter - Instalar Biblioteca NFephp
      Por violin101
      Caros amigos, saudações.
       
      Por favor, me perdoa em postar mais uma dúvida minha.

      Através de ajuda e orientação dos membros do Grupo, tenho conseguido resolver muitos problemas que tenho encontrado.
       
      Gostaria de saber dos amigos do grupo, se tem algum vídeo aula, orientando a Instalação das Biblioteca para Emissão de Nota Fiscal Eletrônica.
       
      Tenho feito várias busca e tenho encontrado a maioria das vezes tudo em LARAVEL.

      Sei que para instalar as Biblioteca, precisa do Composer, até aqui tudo bem.

      Minha dúvida: 
      após fazer o download da  sped-nfe  e  sped-da, essas biblioteca devem ser gravada em qual pasta ?  ----   na C:\  ou dentro da pasta do Sistema ?
      quando dou o comando: COMPOSER INSTALL esse comando já instala todas as bibliotecas, ou 1 por 1 ?

      Grato,
       
      Cesar
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito