[Resolvido] Recuperar id com click (javascript)

[pedrobslisboa 0]

Olá a todos,

 

Então, sou iniciante e já vasculhei a internet inteira para resolver minha duvida.

 

Estou fazendo uma galeria  e gostaria de mostrar as imagens por modal e de modo simples, tenho o código de um modal que está funcionando perfeitamente, porém é especifico para aquela imagem como podem ver no código abaixo. Gostaria de ter um código simples que ao clicar na imagem, recupera-se a id dela aplicando no getElementById(). A principio tenho o var img = document.getElementById('myImg'), gostaria de saber se tem como ter um var img = document.getElementById(x); onde x vai ser recuperado por código.

Tentei de varias formas, por jQuery fazendo var x = this.id com uma função click, porém nada.

 

Desde já agradeço.

 

<img class="imagem" id="myImg" src="imagem.png" alt="Legenda" width="300" height="200">

<!-- Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

 

[Eziquiel 96]

Uma dica aí pra você, companheiro...

Atribua a mesma classe para suas imagens e ID diferentes. Exemplo:

<img class="imagem" id="Img-1" src="imagem1.png" alt="Legenda" width="300" height="200">
<img class="imagem" id="Img-2" src="imagem2.png" alt="Legenda" width="300" height="200">
<img class="imagem" id="Img-3" src="imagem3.png" alt="Legenda" width="300" height="200">

Depois substitua todo o seu script por esse: (usando JQuery)...

$(document).ready(function(){

  $('.imagem').click(function(){
    var modalImg    = $(this).attr('src');
    var captionText = $(this).attr('alt');
    $('#myModal .modal-content').attr('src', modalImg);
    $('#myModal #caption').html(captionText);
    $('#myModal').show();
  })

  $('#myModal .close').click(function(){
    $('#myModal').hide();
  });
  
});

 

 

[pedrobslisboa 0]

Muito obrigado, Eziquiel, funcionou perfeitamente.

 

Para eu entender melhor o código e não apenas copia-lo.

 

var modalImg    = $(this).attr('src'); Recupera o src da imagem clicada

var captionText = $(this).attr('alt'); Recupera a legenda

$('#myModal .modal-content').attr('src', modalImg); Aplica a imagem no modal-content

$('#myModal #caption').html(captionText); Aplica a legenda no capiton

 

$('#myModal').hide(); Esconde o modal.

 

Muito obrigado pela sua ajuda.

[Eziquiel 96]

De nada.

 

Se você quiser um efeito de entrada e saída, poderá usar o "fadeIn" e "fadeOut" no lugar do "show" e "hide".

Exemplo:

 

$('#myModal').fadeIn(); //Exibe o modal com efeito de aparecer

$('#myModal').fadeOut(); //Oculta o modal com efeito de desaparecer


// PODE TAMBÉM ATRIBUIR O TEMPO DE EFEITO, CASO QUEIRA

$('#myModal').fadeIn(1000); //Exibe o modal com efeito de aparecer em 1 segundo

$('#myModal').fadeOut(2000); //Oculta o modal com efeito de desaparecer em 2 segundos

 

[pedrobslisboa 0]

Para não abrir um outro tópico vou escrever aqui mesmo.

 

Alem de fazer a galeria, agora estou tentando fazer com que mude de foto com botões, isso ja no modal.

 

Fiz o código abaixo para o botão de voltar:

 

//Imagens
<img class="imagem" id="1" src="images/img1.jpg" alt="Legenda" >
<img class="imagem" id="2" src="images/img2.jpg" alt="Legenda" >
<img class="imagem" id="3" src="images/img3.jpg" alt="Legenda" >

// modal

<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption">
    // botoes before e after
    <span id="before" class="btn btn-default glyphicon glyphicon-triangle-left"></span><span id="legenda"></span><span id="after" class="btn btn-default glyphicon glyphicon-triangle-right"></span>
  </div>
</div>
<script>

$(document).ready(function(){

        $('.imagem').click(function(){
        var idImg    = $(this).attr('id');
        var modalImg    = $(this).attr('src');
        var captionText = $(this).attr('alt');
        $('#myModal .modal-content').attr('src', modalImg);
        $('#myModal #legenda').html(captionText);
        $('#myModal').show();
          
        // Clicando no botão Befour


$('#before').click(function(){
          var before = idImg - 1;

          switch(before) {
            case 1:
                $('#myModal .modal-content').attr('src', 'images/img'+before+'.jpg');
                idImg--;
                break;
            case 2:
            $('#myModal .modal-content').attr('src', 'images/img'+before+'.jpg');
                idImg--;
                break;

            case 3:
            $('#myModal .modal-content').attr('src', 'images/img'+before+'.jpg');
                idImg--;
                break;
          }
         });

o que acontece é que quando eu inverto a situação, querendo um botão 'after' nada acontece, mesmo utilizado o mesmo código só alterando a operação para +

$('#after').click(function(){
          var after = idImg + 1;

          switch(after) {
            case 1:
                $('#myModal .modal-content').attr('src', 'images/img'+after+'.jpg');
                idImg++;
                break;
            case 2:
            $('#myModal .modal-content').attr('src', 'images/img'+afterr+'.jpg');
                idImg++;
                break;

            case 3:
            $('#myModal .modal-content').attr('src', 'images/img'+after+'.jpg');
                idImg++;
                break;

          }
         });

O estranho é que caso eu coloque o after e o before juntos o after só começa a funcionar caso o before tenha sido clicado. Se eu colocar o after sozinho ele não funciona.

[Eziquiel 96]

Isso deve te ajudar. Dê uma estudada aí no código.

 

$(document).ready(function(){
  var imgQuant  = $('.imagem').length;  // pega a quantidade de imagens na sua galeria
  var imgId = 0;                    
  
  $('.imagem').click(function(){
    var modalImg    = $(this).attr('src');
    var captionText = $(this).attr('alt');
    imgId           = parseInt($(this).attr('id'));
    
    $('#myModal .modal-content').attr('src', modalImg);
    $('#myModal #legenda').html(captionText);
    $('#myModal').show();
  })

  $('#myModal .close').click(function(){
    $('#myModal').hide();
  });
  
  
  $('#after').click(function(){
    imgId = (imgId < imgQuant)? imgId+1 : 1;   // operador ternário para definir o id da próxima imagem
    $('#myModal .modal-content').attr('src', "images/img"+imgId+".jpg");
    $('#myModal #legenda').html($('.imagem#'+imgId).attr('alt'));
  })
  
    $('#before').click(function(){
    imgId = (imgId > 1)? imgId-1 : imgQuant;  // operador ternário para definir o id da imagem anterior
    $('#myModal .modal-content').attr('src', "images/img"+imgId+".jpg");
    $('#myModal #legenda').html($('.imagem#'+imgId).attr('alt'));
  })
  
});