%PDF-
%PDF-
Mini Shell
Mini Shell
<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">
<!-- col -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1 class="page-title txt-color-blueDark"><!-- PAGE HEADER --><i class="fa-fw fa fa-pencil-square-o"></i> Forms <span>>
Image Editor </span></h1>
</div>
<!-- end col -->
</div>
<!-- end row -->
<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->
<!-- widget grid -->
<section id="widget-grid" class="">
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="alert alert-danger hidden-lg hidden-md hidden-sm">
<b>Please note:</b>
This plugin is non-responsive
</div>
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget jarviswidget-sortable" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false" role="widget" style="">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header role="heading">
<span class="widget-icon"> <i class="fa fa-file-image-o txt-color-darken"></i> </span>
<h2 class="hidden-xs hidden-sm">jcrop </h2>
<ul class="nav nav-tabs pull-right in" id="myTab">
<li class="active">
<a data-toggle="tab" href="#s1"><i class="fa fa-crop text-success"></i> <span class="hidden-mobile hidden-tablet">API</span></a>
</li>
<li>
<a data-toggle="tab" href="#s2"><i class="fa fa-crop text-primary"></i> <span class="hidden-mobile hidden-tablet">Default</span></a>
</li>
<li>
<a data-toggle="tab" href="#s3"><i class="fa fa-crop text-warning"></i> <span class="hidden-mobile hidden-tablet">Basic</span></a>
</li>
<li>
<a data-toggle="tab" href="#s4"><i class="fa fa-crop text-danger"></i> <span class="hidden-mobile hidden-tablet">Aspect Ratio</span></a>
</li>
<li>
<a data-toggle="tab" href="#s5"><i class="fa fa-crop txt-color-purple"></i> <span class="hidden-mobile hidden-tablet">Animations</span></a>
</li>
<li>
<a data-toggle="tab" href="#s6"><i class="fa fa-crop txt-color-pink"></i> <span class="hidden-mobile hidden-tablet">Styling</span></a>
</li>
</ul>
<span class="jarviswidget-loader"><i class="fa fa-refresh fa-spin"></i></span>
</header>
<!-- widget div-->
<div role="content">
<!-- widget edit box -->
<div class="widget-body">
<!-- content -->
<div id="myTabContent" class="tab-content">
<!-- new tab: API interface -->
<div class="tab-pane fade active in" id="s1">
<h4 class="margin-bottom-10">API Interface — real-time API example</h4>
<div class="alert alert-info">
<b>Experimental shader active.</b>
Jcrop now includes a shading mode that facilitates building
better transparent Jcrop instances. The experimental shader is less
robust than Jcrop's default shading method and should only be
used if you require this functionality.
<br>
View jcrop's documentation by going to: <a href="http://deepliquid.com/content/Jcrop.html" target="_blank">http://deepliquid.com/content/Jcrop.html</a>
</div>
<style type="text/css">
.optdual {
position: relative;
}
.optdual .offset {
position: absolute;
left: 18em;
}
.optlist label {
width: 16em;
display: block;
}
#dl_links {
margin-top: .5em;
}
</style>
<img src="img/superbox/superbox-full-7.jpg" id="target-5" alt="[Jcrop Example]" class="pull-left" />
<div class="pull-left padding-gutter padding-top-0 padding-bottom-0">
<fieldset>
<legend>
Option Toggles
</legend>
<span class="requiresjcrop">
<button id="setSelect" class="btn btn-default btn-sm">
setSelect
</button>
<button id="animateTo" class="btn btn-default btn-sm">
animateTo
</button>
<button id="release" class="btn btn-default btn-sm">
Release
</button>
<button id="disable" class="btn btn-default btn-sm">
Disable
</button>
</span>
<button id="enable" class="btn btn-default btn-sm" style="display:none;">
Re-Enable
</button>
<button id="unhook" class="btn btn-default btn-sm">
Destroy!
</button>
<button id="rehook" class="btn btn-default btn-sm" style="display:none;">
Attach Jcrop
</button>
</fieldset>
<fieldset class="optdual requiresjcrop">
<legend>
Option Toggles
</legend>
<div class="optlist offset">
<label class="checkbox margin-top-0">
<input type="checkbox" class="checkbox style-0" id="ar_lock">
<span>Aspect ratio</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox style-0" id="size_lock">
<span>minSize/maxSize setting</span>
</label>
</div>
<div class="optlist">
<label class="checkbox margin-top-0">
<input type="checkbox" class="checkbox style-0" id="can_click">
<span>Allow new selections</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox style-0" id="can_move">
<span>Selection can be moved</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox style-0" id="can_size">
<span>Resizable selection</span>
</label>
</div>
</fieldset>
<fieldset class="requiresjcrop">
<legend>
Change Image
</legend>
<div class="btn-group">
<button class="btn btn-default" id="img2">
Lego
</button>
<button class="btn btn-default active" id="img1">
Breakdance
</button>
<button class="btn btn-default" id="img3">
Dragon Fly
</button>
</div>
</fieldset>
</div>
</div>
<!-- end s1 tab pane -->
<!-- new tab: Default -->
<div class="tab-pane fade" id="s2">
<h4 class="margin-bottom-10">Default Behaviour</h4>
<div class="alert alert-info">
<b>This example demonstrates the default behavior of Jcrop.</b>
<br />
Since no event handlers have been attached it only performs
the cropping behavior.
</div>
<img src="img/superbox/superbox-full-11.jpg" id="target" alt="[Jcrop Example]" />
</div>
<!-- end s1 tab pane -->
<!-- new tab: Basic handler -->
<div class="tab-pane fade" id="s3">
<h4 class="margin-bottom-10">Basic Handler — basic form integration</h4>
<div class="alert alert-info">
<b>An example with a basic event handler.</b> Here we've tied
several form values together with a simple event handler invocation.
The result is that the form values are updated in real-time as
the selection is changed using Jcrop's <em>onChange</em> handler.
</div>
<!-- This is the image we're attaching Jcrop to -->
<img src="img/superbox/superbox-full-10.jpg" id="target-2" alt="[Jcrop Example]" />
<!-- This is the form that our event handler fills -->
<form id="coords"
class="coords margin-top-10"
onsubmit="return false;"
action="http://example.com/post.php">
<div class="inline-labels">
<label>X1
<input type="text" size="4" id="x1" name="x1" />
</label>
<label>Y1
<input type="text" size="4" id="y1" name="y1" />
</label>
<label>X2
<input type="text" size="4" id="x2" name="x2" />
</label>
<label>Y2
<input type="text" size="4" id="y2" name="y2" />
</label>
<label>W
<input type="text" size="4" id="w" name="w" />
</label>
<label>H
<input type="text" size="4" id="h" name="h" />
</label>
</div>
</form>
</div>
<!-- end s2 tab pane -->
<!-- new tab: Aspect ratio -->
<div class="tab-pane fade" id="s4">
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 200;
right: -280px;
padding: 3px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 250px;
height: 170px;
overflow: hidden;
}
</style>
<h4 class="margin-bottom-10">Aspect Ratio w/ Preview Pane — nice visual example</h4>
<div class="alert alert-info">
<b>An example implementing a preview pane.</b>
Obviously the most visual demo, the preview pane is accomplished
entirely outside of Jcrop with a simple jQuery-flavored callback.
This type of interface could be useful for creating a thumbnail
or avatar. The onChange event handler is used to update the
view in the preview pane.
</div>
<img src="img/superbox/superbox-full-9.jpg" id="target-3" alt="[Jcrop Example]" />
<div id="preview-pane">
<div class="preview-container">
<img src="img/superbox/superbox-full-9.jpg" class="jcrop-preview" id="target-3" alt="Preview" />
</div>
</div>
</div>
<!-- end s3 tab pane -->
<!-- new tab: animation/transitions -->
<div class="tab-pane fade" id="s5">
<h4 class="margin-bottom-10">Animation/Transitions — animation/fading demo</h4>
<div class="alert alert-info">
<b>Experimental shader active.</b>
Jcrop now includes a shading mode that facilitates building
better transparent Jcrop instances. The experimental shader is less
robust than Jcrop's default shading method and should only be
used if you require this functionality.
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="img/superbox/superbox-full-7.jpg" id="target-4" alt="Jcrop Image" class="pull-left" />
<div id="interface" class="pull-left padding-gutter padding-top-0 padding-bottom-0">
<label class="checkbox">
<input type="checkbox" class="checkbox style-0" id="fadetog">
<span>Enable fading (bgFade: true)</span>
</label>
<label class="checkbox">
<input type="checkbox" class="checkbox style-0" id="shadetog">
<span>Use experimental shader (shade: true)</span>
</label>
</div>
</div>
</div>
</div>
<!-- end s4 tab pane -->
<!-- new tab: Styling -->
<div class="tab-pane fade padding-10 no-padding-bottom" id="s6">
<h4 class="margin-bottom-10">Styling Example — style Jcrop dynamically with CSS</h4>
<img src="img/superbox/superbox-full-16.jpg" id="target-6" alt="[Jcrop Example]" />
<div class="pull-left pull-left padding-gutter padding-top-0 padding-bottom-0">
<fieldset>
<legend>
Manipulate classes
</legend>
<div class="btn-group" id="buttonbar">
<button class="btn btn-default active" data-setclass="jcrop-light" id="radio1">
jcrop-light
</button>
<button class="btn btn-default" data-setclass="jcrop-dark" id="radio2">
jcrop-dark
</button>
<button class="btn btn-default" data-setclass="jcrop-normal" id="radio3">
normal
</button>
</div>
</fieldset>
</div>
</div>
<!-- end s6 tab pane -->
</div>
<!-- end content -->
</div>
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</article>
<!-- WIDGET END -->
</div>
<!-- end row -->
</section>
<!-- end widget grid -->
<script type="text/javascript">
/* DO NOT REMOVE : GLOBAL FUNCTIONS!
*
* pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
*
* // activate tooltips
* $("[rel=tooltip]").tooltip();
*
* // activate popovers
* $("[rel=popover]").popover();
*
* // activate popovers with hover states
* $("[rel=popover-hover]").popover({ trigger: "hover" });
*
* // activate inline charts
* runAllCharts();
*
* // setup widgets
* setup_widgets_desktop();
*
* // run form elements
* runAllForms();
*
********************************
*
* pageSetUp() is needed whenever you load a page.
* It initializes and checks for all basic elements of the page
* and makes rendering easier.
*
*/
pageSetUp();
/*
* ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
* eg alert("my home function");
*
* var pagefunction = function() {
* ...
* }
* loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
*
* TO LOAD A SCRIPT:
* var pagefunction = function (){
* loadScript(".../plugin.js", run_after_loaded);
* }
*
* OR
*
* loadScript(".../plugin.js", run_after_loaded);
*/
var pagefunction = function() {
//console.log("load and ready");
// api_handler
var api_handler = function() {
// The variable jcrop_api will hold a reference to the
// Jcrop API once Jcrop is instantiated.
var jcrop_api;
// The function is pretty simple
var initJcrop = function(){
// Hide any interface elements that require Jcrop
// (This is for the local user interface portion.)
$('.requiresjcrop').hide();
// Invoke Jcrop in typical fashion
$('#target-5').Jcrop({
onRelease : releaseCheck
}, function() {
jcrop_api = this;
jcrop_api.animateTo([100, 100, 400, 300]);
// Setup and dipslay the interface for "enabled"
$('#can_click,#can_move,#can_size').attr('checked', 'checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked', false);
$('.requiresjcrop').show();
});
};
// In this example, since Jcrop may be attached or detached
// at the whim of the user, I've wrapped the call into a function
initJcrop();
// Use the API to find cropping dimensions
// Then generate a random selection
// This function is used by setSelect and animateTo buttons
// Mainly for demonstration purposes
function getRandom() {
var dim = jcrop_api.getBounds();
return [Math.round(Math.random() * dim[0]), Math.round(Math.random() * dim[1]), Math.round(Math.random() * dim[0]), Math.round(Math.random() * dim[1])];
};
// This function is bound to the onRelease handler...
// In certain circumstances (such as if you set minSize
// and aspectRatio together), you can inadvertently lose
// the selection. This callback re-enables creating selections
// in such a case. Although the need to do this is based on a
// buggy behavior, it's recommended that you in some way trap
// the onRelease callback if you use allowSelect: false
function releaseCheck() {
jcrop_api.setOptions({
allowSelect : true
});
$('#can_click').attr('checked', false);
};
// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
// Sets a random selection
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Animates to a random selection
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release method clears the selection
jcrop_api.release();
});
$('#disable').click(function(e) {
// Disable Jcrop instance
jcrop_api.disable();
// Update the interface to reflect disabled state
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Re-enable Jcrop instance
jcrop_api.enable();
// Update the interface to reflect enabled state
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// This button is visible when Jcrop has been destroyed
// It performs the re-attachment and updates the UI
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
return false;
});
$('#unhook').click(function(e) {
// Destroy Jcrop widget, restore original state
jcrop_api.destroy();
// Update the interface to reflect un-attached state
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
return false;
});
// Hook up the three image-swapping buttons
$('#img1').click(function(e) {
$(this).addClass('active').closest('.btn-group').find('button.active').not(this).removeClass('active');
jcrop_api.setImage('img/superbox/superbox-full-7.jpg');
jcrop_api.setOptions({
bgOpacity : .6
});
return false;
});
$('#img2').click(function(e) {
$(this).addClass('active').closest('.btn-group').find('button.active').not(this).removeClass('active');
jcrop_api.setImage('img/superbox/superbox-full-24.jpg');
jcrop_api.setOptions({
bgOpacity : .6
});
return false;
});
$('#img3').click(function(e) {
$(this).addClass('active').closest('.btn-group').find('button.active').not(this).removeClass('active');
jcrop_api.setImage('img/superbox/superbox-full-20.jpg', function() {
this.setOptions({
bgOpacity : 1,
outerImage : 'img/superbox/superbox-full-20-bw.jpg'
});
this.animateTo(getRandom());
});
return false;
});
// The checkboxes simply set options based on it's checked value
// Options are changed by passing a new options object
// Also, to prevent strange behavior, they are initially checked
// This matches the default initial state of Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({
allowSelect : !!this.checked
});
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({
allowMove : !!this.checked
});
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({
allowResize : !!this.checked
});
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked ? {
aspectRatio : 4 / 3
} : {
aspectRatio : 0
});
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked ? {
minSize : [80, 80],
maxSize : [350, 350]
} : {
minSize : [0, 0],
maxSize : [0, 0]
});
jcrop_api.focus();
});
}
// end api_handler
// default
var default_handler = function(){
$('#target').Jcrop();
}
// basic handler
var basic_handler = function() {
var jcrop_api;
$('#target-2').Jcrop({
onChange : showCoords,
onSelect : showCoords,
onRelease : clearCoords
}, function() {
jcrop_api = this;
});
$('#coords').on('change', 'input', function(e) {
var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1').val(), y2 = $('#y2').val();
jcrop_api.setSelect([x1, y1, x2, y2]);
});
// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c) {
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords() {
$('#coords input').val('');
};
};
// end basic_handler
// aspect ratio
var aspect_ratio = function() {
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height();
console.log('init', [xsize, ysize]);
$('#target-3').Jcrop({
onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : xsize / ysize
}, function() {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width : Math.round(rx * boundx) + 'px',
height : Math.round(ry * boundy) + 'px',
marginLeft : '-' + Math.round(rx * c.x) + 'px',
marginTop : '-' + Math.round(ry * c.y) + 'px'
});
}
};
}
// end aspect_ratio
// animation_handler
var animation_handler = function() {
var jcrop_api;
$('#target-4').Jcrop({
bgFade : true,
bgOpacity : .2,
setSelect : [60, 70, 540, 330]
}, function() {
jcrop_api = this;
});
$('#fadetog').change(function() {
jcrop_api.setOptions({
bgFade : this.checked
});
}).attr('checked', 'checked');
$('#shadetog').change(function() {
if (this.checked)
$('#shadetxt').slideDown();
else
$('#shadetxt').slideUp();
jcrop_api.setOptions({
shade : this.checked
});
}).attr('checked', false);
// Define page sections
var sections = {
bgc_buttons : 'Change bgColor',
bgo_buttons : 'Change bgOpacity',
anim_buttons : 'Animate Selection'
};
// Define animation buttons
var ac = {
anim1 : [217, 122, 382, 284],
anim2 : [20, 20, 580, 380],
anim3 : [24, 24, 176, 376],
anim4 : [347, 165, 550, 355],
anim5 : [136, 55, 472, 183]
};
// Define bgOpacity buttons
var bgo = {
Low : .2,
Mid : .5,
High : .8,
Full : 1
};
// Define bgColor buttons
var bgc = {
R : '#900',
B : '#4BB6F0',
Y : '#F0B207',
G : '#46B81C',
W : 'white',
K : 'black'
};
// Create fieldset targets for buttons
for (i in sections)insertSection(i, sections[i]);
function create_btn(c) {
var $o = $('<button />').addClass('btn btn-default btn-small');
if (c)
$o.append(c);
return $o;
}
var a_count = 1;
// Create animation buttons
for (i in ac) {
$('#anim_buttons .btn-group').append(create_btn(a_count++).click(animHandler(ac[i])), ' ');
}
$('#anim_buttons .btn-group').append(create_btn('Bye!').click(function(e) {
$(e.target).addClass('active');
jcrop_api.animateTo([300, 200, 300, 200], function() {
this.release();
$(e.target).closest('.btn-group').find('.active').removeClass('active');
});
return false;
}));
// Create bgOpacity buttons
for (i in bgo) {
$('#bgo_buttons .btn-group').append(create_btn(i).click(setoptHandler('bgOpacity', bgo[i])), ' ');
}
// Create bgColor buttons
for (i in bgc) {
$('#bgc_buttons .btn-group').append(create_btn(i).css({
background : bgc[i],
color : ((i == 'K') || (i == 'R')) ? 'white' : 'black'
}).click(setoptHandler('bgColor', bgc[i])), ' ');
}
// Function to insert named sections into interface
function insertSection(k, v) {
$('#interface').prepend($('<fieldset></fieldset>').attr('id', k).append($('<legend></legend>').append(v), '<div class="btn-toolbar"><div class="btn-group"></div></div>'));
};
// Handler for option-setting buttons
function setoptHandler(k, v) {
return function(e) {
$(e.target).closest('.btn-group').find('.active').removeClass('active');
$(e.target).addClass('active');
var opt = { };
opt[k] = v;
jcrop_api.setOptions(opt);
return false;
};
};
// Handler for animation buttons
function animHandler(v) {
return function(e) {
$(e.target).addClass('active');
jcrop_api.animateTo(v, function() {
$(e.target).closest('.btn-group').find('.active').removeClass('active');
});
return false;
};
};
$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
$('#interface').show();
}
// end animation_handler
// styling_handler
var styling_handler = function () {
var api;
$('#target-6').Jcrop({
// start off with jcrop-light class
bgOpacity : 0.5,
bgColor : 'white',
addClass : 'jcrop-light'
}, function() {
api = this;
api.setSelect([130, 65, 130 + 350, 65 + 285]);
api.setOptions({
bgFade : true
});
api.ui.selection.addClass('jcrop-selection');
});
$('#buttonbar').on('click', 'button', function(e) {
var $t = $(this), $g = $t.closest('.btn-group');
$g.find('button.active').removeClass('active');
$t.addClass('active');
$g.find('[data-setclass]').each(function() {
var $th = $(this), c = $th.data('setclass'), a = $th.hasClass('active');
if (a) {
api.ui.holder.addClass(c);
switch(c) {
case 'jcrop-light':
api.setOptions({
bgColor : 'white',
bgOpacity : 0.5
});
break;
case 'jcrop-dark':
api.setOptions({
bgColor : 'black',
bgOpacity : 0.4
});
break;
case 'jcrop-normal':
api.setOptions({
bgColor : $.Jcrop.defaults.bgColor,
bgOpacity : $.Jcrop.defaults.bgOpacity
});
break;
}
} else
api.ui.holder.removeClass(c);
});
});
}
// end styling_handler
//run functions
api_handler();
default_handler();
basic_handler();
aspect_ratio();
animation_handler();
styling_handler();
};
loadScript("js/plugin/jcrop/jquery.Jcrop.min.js", function() {
loadScript("js/plugin/jcrop/jquery.color.min.js", pagefunction);
});
</script>
Zerion Mini Shell 1.0