6

Gostaria de uma ajuda para um problema que estou tendo:

Estou fazendo algo parecido com uma galeria, e quando o usuário clicar na imagem ela tem que abrir em tamanho grande, não toda a tela, mas que cubra boa parte da pagina. Além disso, preciso que ela centralize.

Já tentei esse código aqui:

$(document).ready(function(){
    $('#img-responsive').on( "click", function() {
    $('#cool').toggleClass('maxSize')
});
});
.maxSize {
    height: 70%;
    width: 70%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<br><img class="img-responsive" src="img/teste.png">

Mas não funcionou. Tentei algumas variações do código acima, mas mesmo assim não obtive sucesso. Desde já agradeço

5
  • 2
    Queres abrir a imagem dentro de um "dialog"? ou queres que ela cresça onde está?
    – Sergio
    6/01/2016 às 14:07
  • Não amigo, dialog não. Segundo o material design ela deve crescer de onde está.
    – MucaP
    6/01/2016 às 14:19
  • Você fez $('#cool').toggleClass('maxSize')... mas a imagem na otem o ID cool 6/01/2016 às 14:20
  • 1
    Tens de usar class e não ID. Testa assim: $('.img-responsive'), dá uma olhada aqui: jsfiddle.net/hw2jw753 e explica melhor o que não consegues fazer ainda.
    – Sergio
    6/01/2016 às 14:20
  • Usa .animate() e deixa isso mais bonitão!!!!
    – RBoschini
    6/01/2016 às 15:28

4 Respostas 4

5

Acredito que apenas para uma visualização das imagens um simples efeito de zoom in zoom out resolveria,caso tenha a necessidade de permanencer a foto seria aconselhavel criar uma modal e inserir uma imagem dentro dela.

Exemplo com efeito zoom in zoom out:

img {
  max-width: 100%;
  display: block;
}
.thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 240px;
  -webkit-transform: translate(-50%, -50%);
  /* Safari and Chrome */
  -moz-transform: translate(-50%, -50%);
  /* Firefox */
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -o-transform: translate(-50%, -50%);
  /* Opera */
  transform: translate(-50%, -50%);
}
.image {
  width: 100%;
  height: 100%;
}
.image img {
  -webkit-transition: all 1s ease;
  /* Safari and Chrome */
  -moz-transition: all 1s ease;
  /* Firefox */
  -o-transition: all 1s ease;
  /* IE 9 */
  -ms-transition: all 1s ease;
  /* Opera */
  transition: all 1s ease;
}
.image:hover img {
  -webkit-transform: scale(1.25);
  /* Safari and Chrome */
  -moz-transform: scale(1.25);
  /* Firefox */
  -ms-transform: scale(1.25);
  /* IE 9 */
  -o-transform: scale(1.25);
  /* Opera */
  transform: scale(1.25);
}
<div class="thumbnail">
  <div class="image">
    <img src="http://placehold.it/320x240" alt="image" />
  </div>
  <br>
  <div class="image">
    <img src="http://placehold.it/320x240" alt="image" />
  </div>
</div>

1
  • Thanks <3 Assim sim, vlw
    – MucaP
    6/01/2016 às 18:50
2

Tenta assim.

$(document).ready(function(){
    $('.img-responsive').on( "click", function() {
        $(this).toggleClass('maxSize')
    });
});
.maxSize {
    height: 70%;
    width: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img class="img-responsive" src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">

1

Exemplo usando JavaScript:

<script language="JavaScript">
window.onload = function(){
  var entidade = document.getElementById('imagem');

  // Altere o número para a apliação/redução desejada
  var fator_lupa = 6;

  entidade.onmouseover = function () { this.style.width = (this.clientWidth * fator_lupa) + "px"; };

  entidade.onmouseout = function () { this.style.width = (this.clientWidth / 2) + "px"; };
}

</script>

A variável fator_lupa aumenta e diminui a imagem em pixels.

Para chamar a função basta atribuir um id a imagem desejada, dessa forma:

<img id="imagem" src="imagem.png" align="center" />

OBS: esse exemplo usa onmouseover, para adaptar ao seu caso, basta usar o OnClick.

1

Em vez de apenas trocar a classe, coloca um efeito para deixar mais agradavel. Fiz um jsFiddler para vc ver como seria feito.

Use e abuse do .animate() para deixar sua aplicação suave.

$(document).ready(function(){

    $('.img-responsive').on( "click", function() {
        $(this).animate({
        width:'70%',
        height:'70%'
        },1000);
        });

    $('.img-responsive').mouseout(function() {
        $(this).animate({
        width:'50%',
        height:'50%'
        },1000);
        });

});

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 .