Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This script requires PHP to run. (optional: MySQL to save the images to database)
Extract from the downloaded archive the entire imgPicker folder or the contents of it you your server. Make sure the files/ directory has 777 permission.
UserID - As default the script has the userID set to 1, to change this edit api.php and change the $userID variable to the userID of the logged user. You can use the session for that.
Optional: (save images to database): Import the imgpicker.sql, then edit includes/functions.php and look at the imgPickerDB() function. Change the database connection details there ( and customize it how you want).
Now you can run the script in your browser.
First you make sure you have included the css & javascript files:
<link rel="stylesheet" href="assets/imgPicker.css"> <script src="assets/js/jquery.js"></script> <script src="assets/js/imgPicker.min.js"></script>
If you have an image tag for the avatar (with the class of avatar) and a edit button (with the class of edit):
<img src="assets/img/default_avatar.jpg" class="avatar"/> <button class="edit">Edit avatar</button>
To apply the plugin for that use it like this:
<script>
$(function() {
$('.edit').imgPicker({ // Apply the plugin to edit button
el: '.avatar', // Image selector
type: 'avatar' // Image identificator
});
});
</script>
Now when you click the edit button the plugin will open a modal from where you can upload or take a photo with your webcam, then crop it and save it.
The script comes with few examples so you can pick one and start from there:
index.php - avatar, cover & background.
example2.php - Avatar only
example3.php - Avatar only (inline display)
example4.php - Change background (auto upload)
example5.php - Integration with Bootstrap modal
This sections describes the options of the imgPicker plugin (client side).
$([button selector]).imgPicker({
[list of options]
});
[button selector] - The selector of an element, that when you click on it a modal box will open.
[list of options] - Options to inlcude to the plugin.
This sections describes the config settings from includes/config.php.
'types' => array(
// Settings for an avatar
'avatar' => array(
'crop_width' => 150, // Crop image to this width
'crop_height' => 150, // Crop image to this height
'force_crop' => true,
'min_width' => 100, // Minimum width required
'min_height' => 100, // Minimum height required
// 'max_width' => null, // Maximum width allowed (null - not set)
// 'max_height' => null, // Maximum height allowed (null - not set)
'original' => false, // If you want to keep the full size image
),
// Settings for a cover image
'cover' => array(
// Add settings here
),
),
If you want to make changes to the css you just have to edit assets/imgPicker.css. The script does not require any other css frameworks.
The javascript can be found in assets/imgPicker.js. As default the script uses imgPicker.min.js which is a compressed version. But for development you shoud use imgPicker.js.
The script follows the standard jQuery plugin definition.
In imgPicker.js first are defined all functions then at the bottom is the initialization & some events. Each function has a description & comments so you can keep track how this script works.
The only php files are:
To save the uploaded images to database, import the imgpicker.sql, then edit includes/functions.php and look at the imgPickerDB() function. Change the database connection details there ( and customize it how you want).
The imgPickerDB has 4 parameters that you can use to save the images:
If your website is using www (www.mywebsite.com) then you might want to add some headers in api.php. Edit includes/api.php and add:
header('Access-Control-Allow-Origin: mywebsite.com');
header('Access-Control-Allow-Origin: www.mywebsite.com');
I've used the following libraries:
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. Also if you have any suggestions for new features that you want please let me know.
Cretu Eusebiu,
HazzardWeb