These examples will use server/upload_avatar.php
for uploading the images.
The fist option is to have the ImagePicker as a modal. For this you have to define the modal html a button that will open the modal and of course the JavaScript. The button that will open the modal must have this attribute data-ip-modal="#myModal"
and the modal must have id="myModal"
.
<!-- CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.css"> <!-- optional -->
<link rel="stylesheet" href="assets/css/imgpicker.css">
<!-- JavaScript -->
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script src="assets/js/jquery.Jcrop.min.js"></script>
<script src="assets/js/jquery.imgpicker.js"></script> <!-- for production use jquery.imgpicker.min.js-->
<!-- Image -->
<img src="assets/img/default-avatar.png" id="avatar" width="200" height="200">
<!-- Button trigger modal -->
<button data-ip-modal="#myModal">Launch modal</button>
<!-- Modal -->
<div class="ip-modal" id="myModal">
<div class="ip-modal-dialog">
<div class="ip-modal-content">
<div class="ip-modal-header">
<a class="ip-close" title="Close">×</a>
<h4 class="ip-modal-title">Change avatar</h4>
</div>
<div class="ip-modal-body">
<div class="btn btn-primary ip-upload">Upload <input type="file" name="file" class="ip-file"></div>
<button class="btn btn-primary ip-webcam">Webcam</button>
<button type="button" class="btn btn-info ip-edit">Edit</button>
<button type="button" class="btn btn-danger ip-delete">Delete</button>
<div class="alert ip-alert"></div>
<div class="ip-info">To crop this image, drag a region below and then click "Save Image"</div>
<div class="ip-preview"></div>
<div class="ip-rotate">
<button type="button" class="btn btn-default ip-rotate-ccw" ><i class="icon-ccw"></i></button>
<button type="button" class="btn btn-default ip-rotate-cw" ><i class="icon-cw"></i></button>
</div>
<div class="ip-progress">
<div class="text">Uploading</div>
<div class="progress progress-striped active"><div class="progress-bar"></div></div>
</div>
</div>
<div class="ip-modal-footer">
<div class="ip-actions">
<button class="btn btn-success ip-save">Save Image</button>
<button class="btn btn-primary ip-capture">Capture</button>
<button class="btn btn-default ip-cancel">Cancel</button>
</div>
<button class="btn btn-default ip-close">Close</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
//Call .imgPicker()
$('#myModal').imgPicker({
url: 'server/upload_avatar.php',
aspectRatio: 1,
deleteComplete: function() {
// Restore default avatar
$('#avatar').attr('src', 'assets/img/default-avatar.png');
// Hide modal
this.modal('hide');
},
cropSuccess: function(image) {
// Set #avatar src
$('#avatar').attr('src', image.versions.avatar.url);
// Hide modal
this.modal('hide');
}
});
});
</script>
The entire HTML is customizable BUT make sure you keep the classes that start with ip-
.
With the inline option you can display ImagePicker anywhere you want. For this you have to define a container with all the HTML and of course the JavaScript.
<!-- Container -->
<div id="myContainer">
<div class="btn btn-primary ip-upload">Upload <input type="file" name="file" class="ip-file"></div>
<button type="button" class="btn btn-primary ip-webcam">Webcam</button>
<button type="button" class="btn btn-info ip-edit">Edit</button>
<button type="button" class="btn btn-danger ip-delete">Delete</button>
<div class="alert ip-alert"></div>
<div class="ip-info">To crop this image, drag a region below and then click "Save Image"</div>
<div class="ip-preview"></div>
<div class="ip-rotate">
<button type="button" class="btn btn-default ip-rotate-ccw"><i class="icon-ccw"></i></button>
<button type="button" class="btn btn-default ip-rotate-cw"><i class="icon-cw"></i></button>
</div>
<div class="ip-progress">
<div class="text">Uploading</div>
<div class="progress progress-striped active"><div class="progress-bar"></div></div>
</div>
<div class="ip-actions">
<button class="btn btn-success ip-save">Save Image</button>
<button class="btn btn-primary ip-capture">Capture</button>
<button class="btn btn-default ip-cancel">Cancel</button>
</div>
</div>
<script>
$(function() {
//Call .imgPicker()
$('#myContainer').imgPicker({
url: 'server/upload_avatar.php',
aspectRatio: 1,
deleteComplete: function() {
$('#avatar').attr('src', 'assets/img/default-avatar.png');
this.modal('hide');
},
cropSuccess: function(image) {
$('#avatar').attr('src', image.versions.avatar.url);
this.modal('hide');
}
});
});
</script>
The entire HTML is customizable BUT make sure you keep the classes that start with ip-
.