Increase image when user click on JS

Question

I’d like some help for a problem I’m having:

I’m doing something similar to a gallery, and when the user clicks on the image it has to open in large size, not the entire screen, but covering much of the page. Also, I need her to become.

I’ve tried that code here:

$(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">

But it didn’t work. I tried some variations of the above code, but I still didn’t succeed. Thanks in advance

Answer 1

I believe that just for a view of the images a simple zoom in out effect would solve, if you need to permanencer the photo it would be advisable to create a modal and insert an image inside it.

Example with zoom out effect:

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>

Answer 2

Try it this way.

$(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/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">

Answer 3

Example using 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>

The variable fator_lupa increases and decreases the image in pixels.

To call the function just assign an id to the desired image, so:

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

OBS: this example uses onmouseover, to adapt to your case, just use Onclick.

Answer 4

Instead of just changing the class, it puts an effect to make it more pleasant. I made a jsFiddler for you to see how it would be done.

Use and abuse the .Animate() to make your application smooth.

$(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);
        });

});