Increase image when user clicks JS

Navigation
6

I would like help with 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 full size, not the whole screen, but it covers a good part of the page. Also, I need it to center.

I've tried this 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><imgclass="img-responsive" src="img/teste.png">

But it did not work. I tried some variations of the above code, but still I did not succeed. Thank you in advance

    
asked by anonymous 06.01.2016 / 14:53

4 answers

4

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

Example with effect 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>
    
06.01.2016 / 16:24
1

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, like this: 

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

OBS: This example uses onmouseover, to adapt to your case, just use OnClick.

    
06.01.2016 / 16:15
1

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

Use and abuse .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);
        });

});
    
06.01.2016 / 16:28
1

Try this. 

$(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><imgclass="img-responsive" src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
    
06.01.2016 / 15:24
If the field has DEFAULT should it be NOT NULL? What are PEP's in Python?