Jump to content
Sapinn

Janela Modal com Slide Show

Recommended Posts

Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:

 

CSS:

* {
  box-sizing:border-box;
  font-family: Arial;
}


.slideshow-container {
  max-width: 800px;
 
  position: relative;
  margin: auto;
}


.mySlides {
  display: none;
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #4285f4;
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 10px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #4285f4;
}


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
.img_slide{
    width: 100%;
    height: 500px;
}

/* ----------------MODAL--------------------------------- */
.modal-container{
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}
.modal-container.mostrar{
    display: flex;
}

@keyframes modal{
    from{
        opacity: 0;
        transform: translate3d(0, -60px, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.mostrar .modal-content{
    animation: modal .3s;
}
.fechar{
    position: absolute;
    top: 8px;
    right: 3px;
    width: 30px;
    height: 30px;
    font-weight: bold;
    color: #4285f4;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    background: transparent;
    border: none;
}
@media (max-width: 600px) {

    .img_slide{
        width: 100%;
        height: 300px;
}

}

 

 

JAVASCRIPT:

var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (> slides.length) {slideIndex = 1} 

  if (< 1) {slideIndex = slides.length}

  for (= 0; i < slides.length; i++) {

      slides[i].style.display = "none"; 

  }

  for (= 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block"; 

  dots[slideIndex-1].className += " active";

}



function iniciaModal(modalID){

    const modal = document.getElementById(modalID);

    if(modal){

        modal.classList.add('mostrar');

         modal.addEventListener('click',(e)=>{

        if(e.target.id == modalID || e.target.className == 'fechar'){

            modal.classList.remove('mostrar');

        }

    });

    }

    

}

const botaoChama = document.querySelector('#botaoChama'); 

botaoChama.addEventListener('click',()=>{

    iniciaModal('modal');



    

});

const botaoChama2 = document.querySelector('#botaoChama2'); 

botaoChama2.addEventListener('click',()=>{

    iniciaModal('modal2');

});

 

 

HTML:

<div id="modal" class="modal-container">

        

 <button class="fechar">X</button>



<div class="slideshow-container">



    

    <div class="mySlides fade">

      

      <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">

     

    </div>

  

    <div class="mySlides fade">

     

      <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">

      

    </div>

  

    <div class="mySlides fade">

     

      <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">

     

    </div>

  

    

    <a class="prev" onclick="plusSlides(-1)"></a>

    <a class="next" onclick="plusSlides(1)"></a>



    <div style="text-align:center">

        <span class="dot" onclick="currentSlide(1)"></span> 

        <span class="dot" onclick="currentSlide(2)"></span> 

        <span class="dot" onclick="currentSlide(3)"></span> 

      </div>

  </div>

  

</div>



 <div id="modal2" class="modal-container">

        

 <button class="fechar">X</button>



<div class="slideshow-container">



    

    <div class="mySlides fade">

      

      <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">

     

    </div>

  

    <div class="mySlides fade">

     

      <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">

      

    </div>

  

    <div class="mySlides fade">

     

      <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">

     

    </div>

  

    

    <a class="prev" onclick="plusSlides(-1)"></a>

    <a class="next" onclick="plusSlides(1)"></a>



    <div style="text-align:center">

        <span class="dot" onclick="currentSlide(4)"></span> 

        <span class="dot" onclick="currentSlide(5)"></span> 

        <span class="dot" onclick="currentSlide(6)"></span> 

      </div>

  </div>

  

</div>



<button id="botaoChama">Modal</button>

<button id="botaoChama2">Modal 2</button>

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 Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
    • By rafa-martin
      Pessoal, boa noite. 
       
      Estou tendo problemas ao passar um  parâmetro do tipo cursor no java no momento que chamo uma proc no oracle. 
       
      Tenho uma procedure que o parâmetro é um cursor. 
       
      create or replace minhaproce(p_result OUT SYS_REFCURSOR)
       
      begin
        open p_result for select * from tabela;
      end;
       
      Até aqui beleza. 
       
      quando chamo no java não está aceitando o tipo cursor.
       
      @Query(value = "{call minhaproce(?)}", nativeQuery = true)
      Collection<Coche> minhaproce(@Param("p_result") OracleTypes.CURSOR) 
       
      não é aceita. mesmo eu colocando como collection Collection<Coche> listaProcedure(@Param("p_result") List<Coche> p_result2), também não aceita. Agora seu eu fizer o select direto com abaixo retorna. 
       
      @Query(value = "SELECT * FROM tabela", nativeQuery = true)
      Collection<Coche> minhaproce();
       
      Por que funciona fazendo o select direto e não funciona pela procedure? Não acho nada na internet alguma coisa parecida.
    • By KBAlbuquerque
      Estou tentando salvar o nome da imagem no banco de dados com um FormData;
      porém está dando que a imagem está nula no Servidor Node JS da API.
       
      Uso React Native e Express File Upload e Node JS.
       
      Muito obrigada.
       
      Segue o código:
       
      Constantes:
           
      const [nome, setNome] = useState('');       const [marca, setMarca] = useState('');       const [modelo, setModelo] = useState('');       const [foto, setFoto] = useState('');       const [fotoNome, setFotoNome] = useState('');       const [fotoType, setFotoType] = useState('');       const [usuarioId, setUsuarioId] = useState('');  
      Código da API:
         
      const nome = req.body.nome;     const marca = req.body.marca;     const modelo = req.body.modelo;     const foto = req.files;     const usuarioId = req.body.usuario_id;      const file = Date.now().toString() + '_' + foto.myfile;      const filePath = path.join(__dirname, 'public', 'imagens');      foto.mv(`${filePath}/${file}`, err => {           if (err) {               return res.send('Imagem não salva!');           } else {               return res.send('Imagem salva com sucesso!');           }     });  
      Escolhe a Imagem:
           
      const escolhaImagem = (response) => {         if (response.didCancel) {             console.log('Cancelado!');         } else if (response.error) {             console.log("Erro na Imagem: " + response.error);         } else if (response.customButton) {             console.log('Botão customizado' + response.customButton);         } else {             setFoto(response);             setFotoUri(response.uri);             setFotoNome(response.fileName);             setFotoType(response.type);         }     }  
      Função FormData no Cadastro:
              
      const formData = new FormData();         formData.append('nome', nome);         formData.append('marca', marca);         formData.append('modelo', modelo);         formData.append('myfile', fotoNome);         formData.append('usuario_id', usuarioId);         console.log(formData);         const headers = {             method: "post",             body: formData,             headers: {                 "Content-Type": "multipart/form-data",                 "Accept": "application/json",             },         }         await fetch(URL_SERVIDOR + '/salvar-veiculo', headers)             .then(response => response.json())             .then(result => {                 console.log(result)             }).catch((err) => {                 console.log("ERRO: " + err);             });  
    • By Dsdaa
      Olá estou fazendo uma tela de login com flask,html,css e js E estou tentando pegar dados para validar se o usuário está cadastrado ou não Como nenhum usuário tem cadastro, então queria que aparecesse uma mensagem dizendo para o usuário se cadastrar e redirecionar para nova tela - mas isso aí eu me viro -, gostaria mesmo de ajuda para pegar esses dados através do button e onclick pois não estou conseguindo :/ . Irei postar o código .html
      Obs: O arquivo de javascript não tem nada
      <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="../Flask-Login/estilo.css"> <title>Login Page</title> <script src="js/scripts.js" defer></script> </head> <body> <div class="row align-items-center h-100 "> <div class="col-8 col-md-3 col-xs-8 mx-auto l-form"> <form id="login-form"> <img class="row mx-auto" src="https://i.imgur.com/RhJpe7c.png" width="150"> <div class="form-group "> <input type="text" name="email" placeholder="Email" class="form-control i-form"> </div> <div class="form-group"> <input type="password" name="password" placeholder="Password" class="form-control i-form"> </div> <div class="form-group"> <button type="button" onclick="userLogin()" class="btn btn-dark btn-md btn-block">Login</button> </div> </form> </div> </div> <script> </script> </body> </html>
×

Important Information

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