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>