Response title
This is preview!
Crop
and resize images is a common issue build cms, so i found great plugin
here
that
plugin working well in desktop and mobile touch screen but i have last
issue in my project how can i make multiple preview in this page !
already
look at the issue there and found someone post same like me issue,
so i digging on here but not working, issue here
then
i checked jquery.cropit.js line 927 has class cropit-image-preview
means will load images, so i make
-
<form action="#"> <div class="image-editor"> <input type="file" class="cropit-image-input"> <div class="cropit-image-preview"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <input type="hidden" name="image-data" class="hidden-image-data" /> <button type="submit">Submit</button> </div> <!--diffrent class with cropit-image-preview with diffrent height and width--> <div class="image-editor-test"> <input type="file" class="cropit-image-input"> <div class="cropit-image-preview-test"></div> <div class="image-size-label"> Resize image </div> <input type="range" class="cropit-image-zoom-input"> <input type="hidden" name="image-data" class="hidden-image-data" /> <button type="submit">Submit</button> </div> </form>
Then
i copy the jquery.cropit.js and rename it and also change line 927 become
cropit-image-preview-test
and
also the css is here
-
.cropit-image-preview { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 250px; height: 250px; cursor: move; } .cropit-image-preview-test { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 300px; height: 300px; cursor: move; }
and
this is my js
-
$(function() { $('.image-editor').cropit(); $('form').submit(function() { var imageData = $('.image-editor').cropit('export'); $('.hidden-image-data').val(imageData); var formValue = $(this).serialize(); $('#result-data').text(formValue); return false; }); <!--test preview image--> $('.image-editor-test').cropit(); $('form#test').submit(function() { var imageData = $('.image-editor-test').cropit('export'); $('.hidden-image-data-test').val(imageData); var formValue = $(this).serialize(); $('#result-data-test').text(formValue); return false; }); });
1