1

estou tentando fazer uma página de relatos e estou quebrando cabeça.. rs. O código abaixo funciona, porém são mais de 100 relatos e criar um por um fica complicado.

O que eu gostaria: que tivesse uma única função javascript para abrir a imagem sem ter que identificar pelo ID... ou seja, no caso do código abaixo abrir a imagem1.jpg quando clicar na miniatura dela e abrir a imagem2 ao clicar na miniatura também dela. Estou utilizando um modal para isso.

Outra coisa é que gostaria de não precisar fazer o css para as mais de 100 imagens na miniatura para ficar arredondadas. Isso é possível?

Javascript:

  $(function(){
    $("#abrir-img1").click(function(){
      $("#aberto-img1").modal();
    });
  });
  $(function(){
    $("#abrir-img2").click(function(){
      $("#aberto-img2").modal();
    });

Css (para deixar somente as bordas dessas imagens arredondadas):

#abrir-img1{border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}
#abrir-img2{border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}

E o HTML:

                        <h4>Janaína</h4>
                        <p>
                        <img class="btn-primary" id="abrir-img1" src="img/imagem1.jpg"></a><Br><br>
                            Texto 1

                           <div class="modal" id="aberto-img1">
                           <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                 <h2>Enviado por Janaína</h2>
                                </div>
                                <div class="modal-body">
                                  <p align="center"><img src="img/imagem1.jpg" style="width: 100%;">
                              <br><BR>"Texto 1 que vai para o modal"</p>
                                </div>
                                <div class="modal-footer">
                                  <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
                                 </div>
                             </div>
                              </div>
                         </div>

                        <h4>Marcos</h4>
                        <p>
                        <img class="btn-primary" id="abrir-img2" src="img/imagem2.jpg"></a><Br><br>
                            Texto 1

                           <div class="modal" id="aberto-img2">
                           <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                 <h2>Enviado por Janaína</h2>
                                </div>
                                <div class="modal-body">
                                  <p align="center"><img src="img/imagem2.jpg" style="width: 100%;">
                              <br><BR>"Texto 2 que vai para o modal"</p>
                                </div>
                                <div class="modal-footer">
                                  <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
                                 </div>
                             </div>
                              </div>
                         </div>
1
  • Você esqueceu da tag css. Eu acabei editado e sem querer apaguei uma parte do html,edite se ver esse comentário. Desculpe-me. Commented 20/07/2019 às 21:51

1 Resposta 1

0

Uma coisa errada no seu HTML é que você não pode colocar divs dentro da tag <p> como está fazendo.

Em relação a uma função genérica, você pode colocar cada bloco do HTML referente aos modais dentro de uma div pai e adicionar uma classe específica em cada miniatura. Por exemplo, adicionei a classe .abrirmodal em cada miniatura:

<img class="btn-primary abrirmodal" src="img/imagem1.jpg"></a><Br><br>
                             ↑

Desta forma fica fácil pegar o clique em todas em miniaturas e abrir a modal referente à ela pela classe .modal que está dentro da mesma div pai. Veja:

$(function(){
   $(".abrirmodal").click(function(){
      $(this).closest("div").find(".modal").modal();
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div>
   <h4>Janaína</h4>
   <img class="btn-primary abrirmodal" src="img/imagem1.jpg"></a><Br><br>
   Texto 1
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Enviado por Janaína</h2>
            </div>
            <div class="modal-body">
               <p align="center"><img src="img/imagem1.jpg" style="width: 100%;"></p>
               <br><BR>"Texto 1 que vai para o modal"</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
            </div>
         </div>
      </div>
   </div>
</div>

<div>
   <h4>Marcos</h4>
   <img class="btn-primary abrirmodal" src="img/imagem2.jpg"></a><Br><br>
   Texto 1
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Enviado por Marcos</h2>
            </div>
            <div class="modal-body">
               <p align="center"><img src="img/imagem2.jpg" style="width: 100%;"></p>
               <br><BR>"Texto 2 que vai para o modal"</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
            </div>
         </div>
      </div>
   </div>
</div>

1
  • 1
    Sam, perfeito!!! Eu já tinha feito o código com as 100 funções, hahahaha. Me serviu perfeitamente. Agora vou em busca do CSS. Muitíssimo obrigado, mestre.
    – Felipe
    Commented 20/07/2019 às 22: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 .