<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<title>Animations + Transitions | Jcrop Demo</title>
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
|
<script src="../js/jquery.min.js"></script>
|
<script src="../js/jquery.Jcrop.js"></script>
|
<script src="../js/jquery.color.js"></script>
|
<script type="text/javascript">
|
jQuery(function($){
|
|
var jcrop_api;
|
|
$('#target').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-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();
|
|
});
|
|
|
</script>
|
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
|
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
|
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
|
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
|
|
</head>
|
<body>
|
|
<div class="container">
|
<div class="row">
|
<div class="span12">
|
<div class="jc-demo-box">
|
|
<div class="page-header">
|
<ul class="breadcrumb first">
|
<li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
|
<li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
|
<li class="active">Animations + Transitions</li>
|
</ul>
|
<h1>Animations + Transitions</h1>
|
</div>
|
|
|
<div class="row-fluid">
|
<div class="span9">
|
<img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />
|
|
<div class="description">
|
<p id="shadetxt" style="display:none; color:#900;">
|
<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.
|
</p>
|
|
<p>
|
<b>Animation/Transitions.</b>
|
Demonstration of animateTo API method and transitions for bgColor
|
and bgOpacity options. Color fading requires inclusion of John Resig's
|
jQuery <a href="http://plugins.jquery.com/project/color">Color
|
Animations</a> plugin. If it is not included, colors will not fade.
|
</p>
|
</div>
|
|
</div>
|
<div class="span3" id="interface">
|
<label class="checkbox">
|
<input type="checkbox" id="fadetog" /> Enable fading (bgFade: true)
|
</label>
|
<label class="checkbox">
|
<input type="checkbox" id="shadetog" /> Use experimental shader (shade: true)
|
</label>
|
</div>
|
</div>
|
|
<div class="tapmodo-footer">
|
<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
<div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br />
|
Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
|
</div>
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
