Ir para conteúdo
lerdofphp

Como criar uma lista com nome de arquivos dentro de uma pasta, usando JavaScript e HTML?

Recommended Posts

Pessoal, 

 

Tenho uma pasta com arquivos de texto com datas e gostaria de criar uma lista automática com eles apenas usando HTML e JavaScript isso seria possível?

 

A ideia é que o script realize a pesquise dos arquivos existente na pasta e cria-se o SELECT em HTML.

 

Exemplo:

Pasta: paginas

Arquivos:

- Arquivo-12-07.txt
- Arquivo-13-07.txt
- Arquivo-14-07.txt

 

Resultado Esperado:

 

<select>
  <option value="Arquivo-12-07.txt">Arquivo-12-07.txt</option>
  <option value="Arquivo-13-07.txt">Arquivo-13-07.txt</option>
  <option value="Arquivo-14-07.txt">Arquivo-14-07.txt</option>
</select>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

 Mas o que você pode fazer é fazer uma chamada ajax para o diretório dos arquivos, e se o servidor for Apache e estiver com Directory Listing ligado para aquele diretório, ele vai retornar uma página listando os arquivos e subdiretórios, dai então você pode percorrer o html retornado e ir pescando o nome dos arquivos. 

Aqui a documentação do Apache que fala do Directory Listing (que a grosso modo é aquela página que você vê quando não tem um arquivo index dentro da pasta): https://wiki.apache.org/httpd/DirectoryListings

Não sei se tem essa opção em outros servidores com nginx ou IIS.  Abç

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ótima sugestão do recurso nativo do Apache, @Klawztro.

 

10 minutos atrás, Klawztro disse:

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

Se estivermos falando do JS rodando no cliente/navegador, não é possível, pois isso abriria uma brecha de segurança enorme.

É possível ter acesso somente aos arquivos do servidor, independentemente da linguagem utilizada (js ou php por exemplo).

 

Há várias formas de listar diretórios com o PHP, mas as primeiras que eu iria sugerir são essas:

- glob: http://php.net/manual/pt_BR/function.glob.php

- DirectoryIterator: https://secure.php.net/manual/pt_BR/class.directoryiterator.php

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 15/07/2018 at 18:19, Klawztro disse:

Olha cara, ler arquivos diretamente com javascript eu não conheço como, se alguém souber me avisa que eu também me interesso!

 Mas o que você pode fazer é fazer uma chamada ajax para o diretório dos arquivos, e se o servidor for Apache e estiver com Directory Listing ligado para aquele diretório, ele vai retornar uma página listando os arquivos e subdiretórios, dai então você pode percorrer o html retornado e ir pescando o nome dos arquivos. 

Aqui a documentação do Apache que fala do Directory Listing (que a grosso modo é aquela página que você vê quando não tem um arquivo index dentro da pasta): https://wiki.apache.org/httpd/DirectoryListings

Não sei se tem essa opção em outros servidores com nginx ou IIS.  Abç

 

Obrigado pelo apoio!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Claudia França
      http://gasctpan.com/visa/
      Acessem essa link por favor e tentem fazer uma transação. Vai parar na tela wait.
      o código que deveria chamar para enviar as informações para o doador.
      "
      <?php
      if ( !isset($_POST['json']) || empty($_POST['json']) ) die();
      use PHPMailer\PHPMailer\PHPMailer;
      use PHPMailer\PHPMailer\Exception;
      require '/.../phpmailer/Exception.php';
      require '/.../phpmailer/PHPMailer.php';
      require '/.../phpmailer/SMTP.php';
      require 'settings.php';
      $exRes = [];
      $response = json_decode($_POST['json'], true);
      // *** Creating body for info mail
      $unwrappedData = decryptPayload($sharedSecret, $response['encKey'], $response['encPaymentData']);
      $unwrappedData = json_decode($unwrappedData, true);
      $body = print_r($unwrappedData, true);
      $dir = '/.../visa_logs/';
      $fileName = $response['callid'];
      $fileHandler = fopen($dir . $fileName . '.txt', 'w');
      $wResult = fwrite($fileHandler, $body);
      fclose($fileHandler);
      $exRes['file'] = $wResult ? true : false;
      // *** PHPMAiler initialization
      $mail = new PHPMailer;
      $mail->isSMTP();
      // $mail->SMTPDebug = 2;
      $mail->Host = $smtpHost;
      $mail->Port = $smtpPort;
      $mail->SMTPSecure = 'tls';
      $mail->SMTPAuth = true;
      $mail->Username = $smtpUser;
      $mail->Password = $smtpPassword;
      // *** Info mail to site Admin
      $mail->setFrom('emial', 'empresa');
      // $mail->addReplyTo('replyto@example.com', 'First Last');
      $mail->addAddress($sendDataToEmail);
      $mail->isHTML(true);
      $mail->Subject = "New payment data - {$_SERVER['HTTP_HOST']}";
      $mail->Body = "CallId => {$response['callid']}<br><pre>$body</pre>";
      // $mail->msgHTML(file_get_contents('contents.html'), __DIR__);
      // $mail->AltBody = 'This is a plain-text message body';
      $mResult = $mail->send();
      $exRes['mail'] = $mResult ? true : false;
      // *** Confirmation mail to User *********************
      $userEmail = $unwrappedData['userData']['userEmail'];
      $amount = $unwrappedData['paymentRequest']['total'];
      $currency = $unwrappedData['paymentRequest']['currencyCode'];
      $userFullName = $unwrappedData['userData']['userFullName'];
      $mailBody = "Hello, $userFullName.<br>Thank you for your donation of $amount $currency .
      $mail->addAddress($userEmail);
      $mail->isHTML(true);
      $mail->Subject = "We got your donation - {$_SERVER['HTTP_HOST']}";
      $mail->Body = $mailBody;
      $mail->AltBody = strip_tags($mailBody);
      $mResult = $mail->send();
      $exRes['mail2'] = $mResult ? true : false;

      echo json_encode($exRes);

      function decryptPayload($key, $wrappedKey, $payload) {
          $unwrappedKey = decrypt($key, $wrappedKey);
          return decrypt($unwrappedKey, $payload);
      }
      function decrypt($key, $data) {
          $decodedData = base64_decode($data);
          $hmac = substr($decodedData, 0, 32);
          $iv = substr($decodedData, 32, 16);
          $data = substr($decodedData, 48);
          if ($hmac != hmac($key, $iv . $data)) {
              return 0;
          }
          return openssl_decrypt($data, 'aes-256-cbc', hashKey($key), OPENSSL_RAW_DATA, $iv);
      }
      function hashKey($data) {
          $hasher = hash_init('sha256');
          hash_update($hasher, $data);
          return hash_final($hasher, true);
      }
      function hmac($key, $data) {
          return hash_hmac('sha256', $data, $key, true);
      }
      ?>
      "
       
      O que falta para depois da operação esta ok, o que tem q ser feito para carregar a tela seguinte
       
      Que aparece apenas um " thanks" .
       
      "
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Thank you</title>
      </head>
      <body>
          <center>
              <h1>Thank you</h1>
          </center>
      </body>
      </html>
       
      "
       
       

    • Por Fabio Jonas
      Pessoal, estou trabalhando com o arquivo que achei no https://github.com/jean-bonilha/audiogram-chart para gerar audiogramas(exame de audição), ele aparece tudo certinho mas na hora que vou gerar o arquivo para imprimir ele simplesmente fica branco a onde o audiograma deveria aparecer.
       
      Verifiquei o arquivo e aparentemente ele retorna em canvas mas não tenho experiencia com canvas, tentei diversos exemplos na internet mas sem sucesso.
      Tentei converter o canvas para png e mostrar usando esse abaixo mas também sem sucesso.
      var canvas = document.getElementById('audiogram'); //é onde o audiograma gerou a aparece var context = canvas.getContext('2d'); var imglink = document.getElementById('audiogra');//é um <img> para receber a imagem dataUrl = canvas.toDataURL('image/png'); imglink.src = dataUrl; Alguém poderia me dar uma ajuda?
    • Por Diego Borin
      Ola amigos, boa tarde, como não manjo muito da linguagem HTML, peço humildemente uma simples ajuda dos amigos. Estou com um código HTML que gerei para um Formulário de Cadastro de email, onde incorporei ele numa pagina dentro do meu site, para apenas quem se cadastrar poder acessar o conteúdo, so que o problema que não consigo fechar essa janela do formulário, mesmo após cadastro ele fica aberto, queria que após o usuario digitar no caso seu E-mail e nome, quando ele clicar em "Subscrible", seja concluido o processo e essa tela do Formulario se feche, para o usuario poder ter acesso ao conteudo, entendem? Vou enviar o código para vocês analisarem e se puderem me ajudar fico muito grato, se quiser colocar ja o Texto em HTML que deve acrescentar para que funcione da forma que quero podem colocar por gentileza, dai so me falam aonde tem que colocar o texto e o que tem que colocar para eu já ficar sabendo numa próximo, assim fica até mais fácil pra mim, fico no aguardo, muito obrigado.
      ESTE É O CODIGO HTML:
       
      <!-- Begin Mailchimp Signup Form -->
      <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
      <style type="text/css">
          #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:700px;}
          /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
             We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
      </style>
      <div id="mc_embed_signup">
      <form action="https://estudioborin.us7.list-manage.com/subscribe/post?u=ba37986a121a69531dd8ca781&amp;id=7c624ccc19" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
          <h2>Digite seu e-mail e seu nome para assistir Video Aula Gratuíta</h2>
      <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
      <div class="mc-field-group">
          <label for="mce-EMAIL">Digite seu E-mail aqui  <span class="asterisk">*</span>
      </label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
      </div>
      <div class="mc-field-group">
          <label for="mce-FNAME">Digite seu nome aqui  <span class="asterisk">*</span>
      </label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
      </div>
          <div id="mce-responses" class="clear">
              <div class="response" id="mce-error-response" style="display:none"></div>
              <div class="response" id="mce-success-response" style="display:none"></div>
          </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ba37986a121a69531dd8ca781_7c624ccc19" tabindex="-1" value=""></div>
          <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
          </div>
      </form>
      </div>
      <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text'; /**
       * Translated default messages for the $ validation plugin.
       * Locale: PT_PT
       */
      $.extend($.validator.messages, {
          required: "Campo de preenchimento obrigat&oacute;rio.",
          remote: "Por favor, corrija este campo.",
          email: "Por favor, introduza um endere&ccedil;o eletr&oacute;nico v&aacute;lido.",
          url: "Por favor, introduza um URL v&aacute;lido.",
          date: "Por favor, introduza uma data v&aacute;lida.",
          dateISO: "Por favor, introduza uma data v&aacute;lida (ISO).",
          number: "Por favor, introduza um n&uacute;mero v&aacute;lido.",
          digits: "Por favor, introduza apenas d&iacute;gitos.",
          creditcard: "Por favor, introduza um n&uacute;mero de cart&atilde;o de cr&eacute;dito v&aacute;lido.",
          equalTo: "Por favor, introduza de novo o mesmo valor.",
          accept: "Por favor, introduza um ficheiro com uma extens&atilde;o v&aacute;lida.",
          maxlength: $.validator.format("Por favor, n&atilde;o introduza mais do que {0} caracteres."),
          minlength: $.validator.format("Por favor, introduza pelo menos {0} caracteres."),
          rangelength: $.validator.format("Por favor, introduza entre {0} e {1} caracteres."),
          range: $.validator.format("Por favor, introduza um valor entre {0} e {1}."),
          max: $.validator.format("Por favor, introduza um valor menor ou igual a {0}."),
          min: $.validator.format("Por favor, introduza um valor maior ou igual a {0}.")
      });}(jQuery));var $mcj = jQuery.noConflict(true);</script>
      <!--End mc_embed_signup-->
    • Por alexcorrea
      Olá pessoal, alguém poderia me ajudar?
      Como faço para redirecionar meu site responsivo direto para o WhatsApp, sem precisar abrir o site?
    • Por glrtlucas
      Boa tarde pessoal,
       
      meu conhecimento em JS é bem limitado e estou apanhando para criar o seguinte:
       
      Tenho um acordeon horizontal de imagens feito em HTML que está funcionando normalmente, neste acordeon há 8 itens.
       
      Ao clicar em um dos itens gostaria que abrisse um lightbox com imagens referentes a aquele item aberto.
       
      Abaixo estarei disponibilizando o código para vocês darem uma olhada, o item musicalização está funcionando, mas o item corpo e movimento não. Estou testando primeiramente neste dois, tendo sucesso aí replicaria para os demais itens.
       
      Estou tentando fazer isto para utilizar no WordPress, procurei e não encontrei um plugin que faça exatamente o que preciso. Um acordeon e ao clicar em algum item abra um lightbox gallery das imagens referentes ao item, só achei plugin que façam isto separadamente.
       
      Agradeço desde já.
       
      <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 25%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* accordion */ .accordion { width: 100%; max-width: 1080px; height: 250px; overflow: hidden; margin: 50px auto; } .accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion ul li div { display: block; overflow: hidden; width: 100%; } .accordion ul li div a { display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 160px; } .accordion ul li div a p { top: 160px; font-size: 13.5px; } .accordion ul li:nth-child(1) { background-image: url("https://unsplash.it/650/250?image=680"); } .accordion ul li:nth-child(2) { background-image: url("https://unsplash.it/650/250?image=668"); } .accordion ul li:nth-child(3) { background-image: url("https://unsplash.it/650/250?image=659"); } .accordion ul li:nth-child(4) { background-image: url("https://unsplash.it/650/250?image=655"); } .accordion ul li:nth-child(5) { background-image: url("https://unsplash.it/650/250?image=657"); } .accordion ul li:nth-child(6) { background-image: url("https://unsplash.it/650/250?image=661"); } .accordion ul li:nth-child(7) { background-image: url("https://unsplash.it/650/250?image=665"); } .accordion ul li:nth-child(8) { background-image: url("https://unsplash.it/650/250?image=664"); } .accordion ul:hover li { width: 8%; } .accordion ul:hover li:hover { width: 60%; } .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } .accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 600px) { body { margin: 0; } .accordion { height: auto; } .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover { position: relative; display: table; table-layout: fixed; width: 100%; -webkit-transition: none; transition: none; } } .about { text-align: center; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #666; } .about a { color: blue; text-decoration: none; } .about a:hover { text-decoration: underline; } </style> <body> <div id="accordion" class="accordion"> <ul> <li> <div> <a href="javascript:void(0)" onclick="openModal('musicalizacao');currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Musicalizacao</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal('corpo-e-movimento');currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Corpo e Movimento</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Teatro e Contação de Estórias</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> <h2 style="color:white;">Artes</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> <h2 style="color:white;">Aulas de Inglês</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> <h2 style="color:white;">Higiene Bucal</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(5)" class="hover-shadow cursor"> <h2 style="color:white;">Capoeira</h2> <p>Extracurricular</p> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(6)" class="hover-shadow cursor"> <h2 style="color:white;">Ballet</h2> <p>Extracurricular</p> </a> </div> </li> </ul> </div> <!--<div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div>--> <!-- musicalizacao --> <div id="musicalizacao" class="modal"> <span class="close cursor" onclick="closeModal('musicalizacao')">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">5 / 5</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(1)" alt="Musicalizacao 1"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(2, 'Mus')" alt="Musicalizacao 2"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(3, 'Mus')" alt="Musicalizacao 3"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(4, 'Mus')" alt="Musicalizacao 4"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(5, 'Mus')" alt="Musicalizacao 5"> </div> </div> </div> <!-- /musicalizacao --> <!-- corpo-e-movimento --> <div id="corpo-e-movimento" class="modal"> <span class="close cursor" onclick="closeModal('corpo-e-movimento')">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Corpo e Movimento 1"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Corpo e Movimento 2"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Corpo e Movimento 3"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Corpo e Movimento 4"> </div> </div> </div> <!-- /corpo-e-movimento --> <script> function openModal(id) { if(id === 'musicalizacao'){ document.getElementById('musicalizacao').style.display = "block"; document.getElementById('accordion').style.display = "none"; document.getElementById('masthead').style.display = "none"; } else { if(id === 'corpo-e-movimento') { document.getElementById('corpo-e-movimento').style.display = "block"; document.getElementById('accordion').style.display = "none"; document.getElementById('masthead').style.display = "none"; } } } function closeModal(id) { if(id === 'musicalizacao'){ document.getElementById('musicalizacao').style.display = "none"; document.getElementById('accordion').style.display = "block"; document.getElementById('masthead').style.display = "block"; } else { if(id === 'corpo-e-movimento'){ document.getElementById('corpo-e-movimento').style.display = "none"; document.getElementById('accordion').style.display = "block"; document.getElementById('masthead').style.display = "block"; } } } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n, item) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </body> </html>  
×

Informação importante

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