Set Multiple image preview.

[HardikPatel88]

Hello Scottcheng,

Great Work on plugins.

I have one problem how can i set multiple image preview. I have one page in that there is four image selector so how can i use this plugins.

Please feedback on this mail id :- hardik.patel@mailinator.com

Thanks Hardik Patel

[Manmade]

This is something I also really need :-) Would be great!

[brentjm]

Excellent plugin Scottcheng. Made my work day!

One possible way for multiple images is to use just a bit AngularJS. Bind the inputs to some variable: <input type="range" class="cropit-image-zoom-input" ng-model="zoom">

Create a global slider: <input type="range" id="globalRange" min="0", max="1", step="0.01", ng-model="zoom" ng-change="rangeChange()">

Then trigger the cropit inputs: var app = angular.module('zoomApp', []); app.controller('zoomCtrl', function($scope) { $scope.rangeChange = function() { //var localRange = $( "#localRange1" ); var zoomImgs = $( ".cropit-image-zoom-input" ); zoomImgs.trigger("mousemove"); }; });

[scottcheng]

Not sure if I understand your question. If you want multiple cropit instances on the same page you can just individually instantiate cropit on multiple elements.

[Manmade]

scottcheng, thanks but do you have an example how to do it, it looks like a few guys have tried but not getting it to work! Thanks!

[scottcheng]

See the demo website for an example. Source code is here.

[Manmade]

Thanks. But I have looked at you demo page and tested some different things and I still don't know how to get it right. And Im not alone :-)

So if I have this, what do I have to do to be able to select two images on this page and save both when I click the save button?

 <div class="image-editor">
 <input type="file" name="file2" class="croiit-image-input">
<div id="image-preview" class="cropit-image-preview"></div>
<input type="range" class="cropit-image-zoom-input custom"></div>
<input type="hidden" name="image-data" class="hidden-image-data" />
<button type="button" >Save</button>
</div>

and the only js I have is:

$('.image-editor').cropit({
          exportZoom: 1.92307692,
    }); 
$('.select-image-btn').click(function() {
    $('.cropit-image-input').click();
});

Thanks for you help. :-)

[scottcheng]

If you want to have two cropper instances, you need two sets of markup. The HTML you pasted above is only one. BTW, there is a typo in your file input class name.

Now suppose you have two sets of markups, and the elements where you initialized cropit are .image-editor1 and .image-editor2, then when you click save you can export from both cropit instances and do whatever you want with them.

$saveBtn.click(function() {
  var image1 = $('.image-editor1').cropit('export');
  var image2 = $('.image-editor2').cropit('export');
  // Do whatever with image1 and image2
});

[Manmade]

Ok so it should be like this?

<div class="image-editor1">
 <input type="file" name="file2" class="cropit-image-input">
<div id="image-preview" class="cropit-image-preview"></div>
<input type="range" class="cropit-image-zoom-input custom"></div>
<input type="hidden" name="image-data" class="hidden-image-data" />
</div>
<div class="image-editor2">
 <input type="file" name="file2" class="cropit-image-input">
<div id="image-preview" class="cropit-image-preview"></div>
<input type="range" class="cropit-image-zoom-input custom"></div>
<input type="hidden" name="image-data" class="hidden-image-data" />
</div>
<button type="button" >Save</button>

Do I need to have two different hidden-image-data? like name="image-data1" and name="image-data2" or something?

[Manmade]

I have tested with my above and it is not showing the images in the preview?

[Manmade]

Ok it works with the above, my misstake!