Jump to content
Roberio123

Ajuda com script de imagens

Recommended Posts

Olá, sou novo no fórum e estou começando a aprender o básico de programação.

 

Estou querendo fazer um Widget com imagens aleatórias que são mudadas cada vez que a pagina do site é carregada... Na verdade já tenho um código para isso, porém, gostaria de simplificar com javascript, por exemplo, tenho o seguinte script:

<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://meusite.com/link-1"target="_blank"><img src="http://meusite.com/imagem-1" width="300" height="250"></a>'
quotes[1]='<a href="http://meusite.com/link-2"target="_blank"><img src="http://meusite.com/imagem-2" width="300" height="250"></a>'
quotes[2]='<a href="http://meusite.com/link-3"target="_blank"><img src="http://meusite.com/imagem-3" width="300" height="250"></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
Colocando esse código na minha Widget tudo funciona muito bem, porém, eu gostaria de adicionar cerca de 500 links e ficaria um código imenso pra carregar...
Chegando ao ponto, eu gostaria de criar um arquivo.js com esse script, contendo os 500 links ou mais, fazer o upload desse arquivo no servidor e somente no meu Widget eu iria chamar esse arquivo, por exemplo:
<script type='text/javascript' src='http://meusite.com/scripts/imagens.js'></script>
Não sei se é assim, é somente um exemplo.
O problema é que não sei como fazer a ligação entre o script e o arquivo e não encontro em lugar algum, não me parece ser tão complicado de se fazer.
É isso, espero que alguém entenda o que eu quero fazer e que possa me ajudar.
Grato desde já.
Edited by Ted k'
Adicionado o BBCode

Share this post


Link to post
Share on other sites

Não entendi a sua dúvida "O problema é que não sei como fazer a ligação entre o script e o arquivo".

Share this post


Link to post
Share on other sites

Não entendi a sua dúvida "O problema é que não sei como fazer a ligação entre o script e o arquivo".

É que se eu só copiar o meu script pra um arquivo e salvar como "imagens.js" e colocar no servidor, na hora de chamar esse arquivo la no widget do site (wordpress), tem que ter alguma função junto com meu script lá no arquivo do servidor, pra poder chamar o arquivo corretamente, não?

Share this post


Link to post
Share on other sites

Dentro do arquivo JS, coloque seu script dentro de:

window.onload = function(){



aqui vai seu script


}

Desse jeito, assim que a página for completamente carregada, seu script será executado.

E claro, inserindo ele no cabeçalho do WP através do <script src="caminho do seu aruiqvo" type="text/javascript"></script>

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juliosertori
      Amigos, estou utilizando um sistema de FormValidation, e vem pronta algumas coisas, mas estou com dúvida:
       
      Como pego os dados desse POST no PHP?
       
      FormValidation.utils.fetch(formSubmitUrl, { method: 'POST', dataType: 'json', params: { name: form.querySelector('[name="username"]').value, email: form.querySelector('[name="password"]').value, }, }) Obrigado!
    • By Luis Fernando R. Valle
      Estou desenvolvendo um site de vinhetas, mas estou com o seguinte problema. Quando o cliente clica em um áudio ele toca normalmente, mas quando clica em um segundo com o primeiro ainda em execução, ficam os dois áudios executando ao mesmo tempo no sit.
      Gostaria que um executasse por vez.
       
      Lembrando que os áudios estão inseridos separadamente.
    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By acneto.frc
      Tenho uma aplicação WEB NodeJs+Javascript. Na minha view (FILTROS PARA RELATÓRIO) além dos inputs tenho um radio button onde seleciono o tipo de do relatório que será gerado. No meu Controller tenho acesso aos campos inputs (type=text) normalmente mas não tenho acesso aos inputs (type=radio). Abaixo vou colocar parte do código.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags --> <title><%= title %></title> <link rel="stylesheet" type="text/css" media="screen" href="/estilos/estilos.css" /> </head> <body> <header> <nav class="menuBase"> <ul> <li><a href="/">Início</a></li> <li><a href="/estagio/relatorios">Voltar</a></li> <li><a href=""> </a></li> </ul> </nav> </header> <main class=frmRelFiltros> <ul class="nav nav-tabs"> <li class="active" id="home-tab"><a data-toggle="tab" href="#pagina1">Relatório de Contratos</a></li> </ul> <div class="tab-content"> <div id="pagina1" class="tab-pane fade in active"> <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> <!-- primeira linha --> <br> <div class="filtros" style="margin:15px"> <div class="row"> <div class="form-group col-md-6 col-md-offset-0"> <label>Código Contrato.:</label> <input type="text" name="cod_ini" value="0"/> A <input type="text" name="cod_fim" value="999999" /> <br> <br> <label>Ativo/Inativo...:</label> <input type="text" name="atv_ini" value="A"/> A <input type="text" name="atv_fim" value="Z" /> <br> <br> <label>Data Cadastro...:</label> <input type="text" name="cad_ini" value="01/01/2000"/> A <input type="text" name="cad_fim" value="31/12/2090" /> <br> <br> <label>Data Vigência...:</label> <input type="text" name="vig_ini" value="01/01/2000"/> A <input type="text" name="vig_fim" value="31/12/2090" /> <br> <br> <label>Sit. Contrato...:</label> <input type="text" name="sit_ini" value="0"/> A <input type="text" name="sit_fim" value="99" /> <br> <br> <label>Código do Curso.:</label> <input type="text" name="cur_ini" value="1"/> A <input type="text" name="cur_fim" value="99" /> <br> <br> </div> <div class="form-group col-md-6 col-md-offset-0"> <label>Código da Empresa.:</label> <input type="text" name="emp_ini" value="1"/> A <input type="text" name="emp_fim" value="9999" /> <br> <br> <label>Centro Integração.:</label> <input type="text" name="cie_ini" value="1"/> A <input type="text" name="cie_fim" value="999"/> <br> <br> <label>Valor da Bolsa....:</label> <input type="text" name="vlr_ini" value="1"/> A <input type="text" name="vlr_fim" value="99999999"/> <br> <br> <br> <div id="opcoesRelContratos" > <p>Selecione o Tipo do Relatório:</p> <input type="radio" id="tipoRel" name="padrao" value="padrao" checked=true> <label for="padrao">Padrao-Conferência</label><br> <input type="radio" id="tipoRel" name="faixa" value="faixa"> <label for="faixa">Faixa Salarial-Estatístico</label><br> <input type="radio" id="tipoRel" name="alunos_empresas" value="alunos_empresas"> <label for="alunos_empresas">Identificação de Alunos por Empresa</label> <br> <input type="radio" id="tipoRel" name="entregas" value="entregas"> <label for="entregas">Pastas de Estágios Entregues</label><br> <input type="radio" id="tipoRel" name="contratos_vencer" value="contratos_vencer"> <label for="contratos_vencer">Contratos a Vencer 30 dias</label> <br> </div> </div> </div> </div> <br> <!-- botões de acão --> <div class="btn-acao" style="margin-bottom: 0px;"> <div class="row"> <div class="col-md-2 col-md-offset-1"> <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> </div> <div class="col-md-2 col-md-offset-1"> <button type="button" id="btn-cancelarRel" class="btn btn-primary btn-block">Voltar</button> </div> </div> </div> <br> </form> </div> <!-- tab pagina 1 --> </div> </main> <!-- JavaScript (Opcional) --> <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="/js/funcoesCliente.js"></script> <script type="text/javascript" src="/js/script.js"></script> </body> </html>  
       
      Agora o código do routes e controllers. No controllers preciso acessar um elemento radio da view
      *** botão para submeter a view <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> *** rota a ser executada ao sonfirmar a execução do relatório <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosRoutes.js var contratosControllers = require('../controllers/contratosControllers.js'); module.exports = (app) => { app.get('/contratos/relatorios/relContratos', contratosControllers.contratosRel); app.post('/contratos/relatorios/RelContratosPrint', contratosControllers.printContratosRel); } +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosControllers.js const alunosController = require('../models/contratosModels.js'); const cnf_ambiente = require('../../config/config.js'); const moment = require('moment'); module.exports = { printContratosRel, } function printContratosRel(req, res){ console.log("Data Inicial Normal: "+req.body.cad_ini) console.log("Data Final Normal..: "+req.body.cad_fim) console.log("++++++++++++++++++++ DATA NO FORMATO DE ENTRADA APÓS O POST ++########################") // ++++++++++++ BAIXO O ERRO document is not defined var radios = document.getElementsById("tipoRel"); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { console.log("Escolhido: " + radios[i].value); } } cod_i = req.body.cod_ini; cod_f = req.body.cod_fim; atv_i = req.body.atv_ini; atv_f = req.body.atv_fim; cad_i = req.body.cad_ini; cad_f = req.body.cad_fim; vig_i = req.body.vig_ini; vig_f = req.body.vig_fim; sit_i = req.body.sit_ini; sit_f = req.body.sit_fim; cur_i = req.body.cur_ini; cur_f = req.body.cur_fim; emp_i = req.body.emp_ini; emp_f = req.body.emp_fim; cie_i = req.body.cie_ini; cie_f = req.body.cie_fim; vlr_i = req.body.vlr_ini; vlr_f = req.body.vlr_fim; console.log("Relatório >>>>>>>>>>>>>>>>>>>>>>>> "+cad_i + ' - '+ cad_f); alunosController.buscarPrintContratosRel( cod_i, cod_f, vlr_i, vlr_f, sit_i, sit_f, cur_i, cur_f, emp_i, emp_f, cad_i, cad_f, vig_i, vig_f, atv_i, atv_f, cie_i, cie_f, function(err, result){ if(result){ console.log("Encontrei registro de contratos.... Vou tratar das datas.."); for(var i = 0; i < result.length; i++ ){ result[i].cea_dtcadastro = moment(result[i].cea_dtcadastro).format("DD/MM/YYYY"); result[i].cea_dtalteracao = moment(result[i].cea_dtalteracao).format("DD/MM/YYYY"); result[i].cea_vigenciainicial = moment(result[i].cea_vigenciainicial).format("DD/MM/YYYY"); result[i].cea_vigenciafinal = moment(result[i].cea_vigenciafinal).format("DD/MM/YYYY"); } } if (err) { throw err; } else{ res.render('estagios/relatorios/frm_relContratosPrint.ejs', {title: 'Contratos', nomeUsuario: global.nomeUsuario, codigoUsuario: global.codigoUsuario, nomeFormulario: req.originalUrl, obj_contratos: result, }); } }); }  
    • By Matheus Bispo
      Boa tarde colegas programadores, estou com uma dúvida tremenda.
       
      Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado?
       
      Segue abaixo o meu código:
       
      <!DOCTYPE html>  
       <html>
            <head>  
                 <title>Clientes</title>
                 <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" />
                 <form name="formulario" method="POST" action="">
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
                 <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
                 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
                 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                 <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
                     <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="../assets/js/bootstrap.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script type="text/javascript">
                  function Ir(pagina){
                    document.formulario.action = pagina
                    document.formulario.submit();
                  }
                </script>
            </head>  
      <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false"
        onMouseOver="window.status='..message perso .. '; return true;">
                 <div class="container">
                     
                      <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center>
                      <br />
                  <?php
                     if(!empty($Dados["btnNovoCad"])):
                         $NovoCad = new CreateCliente();
                         unset($Dados["btnNovoCad"]);
                    $Dados["cli_garagem"] = $_SESSION["id-garagem"];
                         $NovoCad->exeCreate('clientes', $Dados);
                         echo $NovoCad->getMsg();
                     endif;
                     ?>
                      <div class="table-responsive">  
                           <table id="employee_data" class="table table-striped table-bordered">  
                                <thead>  
                                     <tr>  
                                          <td>ID</td>  
                                          <td>Nome</td>
                                          <td>Ações</td>
                                     </tr>  
                                </thead>
                                <?php
                                  $ChamarLeitura = new ReadCliente();
                                  $ChamarLeitura->LerClientes();
                                 foreach($ChamarLeitura->getResultado() as $clientes){
                                       extract($clientes);
                                     echo '  
                                     <tr>  
                                         <td>'.intval($cli_id).'</td>                                      
                                          <td>'.utf8_decode($cli_nome).'</td>
                                          ';?>
                                          <td>
                                              <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button>
                                          </td>                                   
                                     </tr>    
                                   <?php
                                  }  
                                ?>
                           </table>  
                      </div>  
                 </div><br>
              <center>
                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button>
                  <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br>
              </center>
       
      <!-- Inicio Modal Novo Cadastro -->
      <div class="modal fade" data-backdrop="static" id="myModalNovo">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br>
                           *Campos obrigatórios
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
      <!-- Inicio Modal Editar Cadastro -->
        <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br>
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                      <input type="hidden" name="id-cliente" id="id-cliente" value="">
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
        <script type="text/javascript">
          $('#myModalEdit').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var recipientnome = button.data('whatevernome')
            var modal = $(this)
            modal.find('.modal-title').text('Editar Cliente')
            modal.find('#id-cliente').val(recipient)
            modal.find('#cli_nome').val(recipientnome)
            
          })
        </script>
         </form>
        </body>
       </html>  
       <script>  
       $(document).ready(function(){  
            $('#employee_data').DataTable();  
       });  
       </script>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.