Cannot zoom small image in cropit.js

Question

After reading the documentation, I still didn't found the solution on how can I resize the image even if the image is small. But it is working on big images, but then again it is not working on small images. Please see my code below:

$(document).ready(function(){

  $('#image-cropper').cropit({
    'minZoom': 2,
    'allowDragNDrop': false,
    'smallImage': 'allow'
  });

});

.cropit-preview{

  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 400px;
  height: 400px;
  display: inline-block;

}

<div id="image-cropper">
  <div class="cropit-preview"></div>
  
  <input type="range" class="cropit-image-zoom-input" />
  
  <input type="file" class="cropit-image-input" />
  <div class="select-image-btn">Select new image</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>

Sample Image

Thu San · Accepted Answer · 2018-02-09T09:55:49.640

1

Try setting max zoom
reference

$(document).ready(function(){

  $('#image-cropper').cropit({
    'minZoom': 2,
    'allowDragNDrop': false,
    'smallImage': 'allow',
    'maxZoom' : 5
  });

  $(document).on('click','.zoomOut',function(){
   changeZoom();
  });

  $(document).on('click','.zoomIn',function(){
   changeZoom(true);
  });

  function changeZoom(increase){
   var elm = $('#image-cropper');
   var zoom = elm.cropit('zoom');
    zoom = increase ? zoom + 0.05 : zoom - 0.05;
    elm.cropit('zoom', zoom);
  }

});

.cropit-preview{

  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 400px;
  height: 400px;
  display: inline-block;

}

<div id="image-cropper">
  <div class="cropit-preview"></div>
  
  <button class="zoomOut">Zoom Out</button>
  <input type="range" class="cropit-image-zoom-input" />
  <button class="zoomIn">Zoom In</button>
  
  <input type="file" class="cropit-image-input" />
  
  <div class="select-image-btn">Select new image</div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>

edited Feb 09 '18 at 09:55

answered Feb 09 '18 at 08:41

Thu San

1,400
1
17
29

This is great, but the minZoom is affected, it is now not smooth and not more controllable when you upload a big image. – Blues Clues Feb 09 '18 at 09:02
When you zoom the image, it is stoping and stoping, not the smooth zooming. – Blues Clues Feb 09 '18 at 09:03
My other idea would be increase or decrease zoom little by little by adding zoom in and out buttons. ```cropitElm.cropit('zoom', cropitElm.cropit('zoom') + 0.05);``` – Thu San Feb 09 '18 at 09:23
Can you apply it in your answer? – Blues Clues Feb 09 '18 at 09:42
@Jonjie I've added zoom in and zoom out and changed the maxZoom to 5 – Thu San Feb 09 '18 at 09:56
This is a great idea. – Blues Clues Feb 09 '18 at 09:58
Glad it helps :D – Thu San Feb 09 '18 at 10:00

Cannot zoom small image in cropit.js

1 Answers1