File: /var/www/html/tmpr/..//tmpr/..//tmpr/../tmpr/../real/frameCrop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/engine.js"></script>
<link rel="stylesheet" href="css/movies-app.css">
<link rel="stylesheet" href="css/rangeslider.css">
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
$( document ).ready( function(){
$("#xincrement").click(function(){
var $n = $("#displacement");
$n.val(Number($n.val()) + 20);
moveIt();
});
$("#xdecrement").click(function(){
var $n = $("#displacement");
$n.val(Number($n.val()) -20);
moveIt();
});
$("#yincrement").click(function(){
var $n = $("#displacementy");
$n.val(Number($n.val()) + 50);
moveIt();
});
$("#ydecrement").click(function(){
var $n = $("#displacementy");
$n.val(Number($n.val()) -50);
moveIt();
});
function moveIt() {
loading_show();
var image = window.localStorage["picha"];
var x= encodeURI(document.getElementById('displacement').value);
var y= encodeURI(document.getElementById('displacementy').value);
var myaccount= window.localStorage["myaccount"];
$('#submitX').css("display","none");
$('#submit').css("display","none");
$("#check").html("Adjusting");
$("#notify").html("Adjusting...");
$('#picme').css("opacity","0.90");
$('#picme').css("filter","alpha(opacity=9)");
$('#preview img').load(function() {}).attr('src', Server+'cropMobile.php?y='+y+'&x='+x+'&color=red&width=500&height=666&nocache=1&cropratio=0.7507507507507508:1&image=/v/uploads/raw/'+image);
setTimeout( function(){
$('#submitX').css("display","none");
$('#submit').css("display","block");
$('#picme').css("opacity","1");
$('#picme').css("filter","alpha(opacity=100)");
$("#check").html("");
$("#notify").html("Adjusted");
loading_hide();
return;
},1500 );
}
var picha = localStorage.getItem('picha');
var myaccount= window.localStorage["myaccount"];
$('#submitX').css("display","none");
$('#submit').css("display","none");
$("#check").html("Adjusting");
$("#notify").html("Loading...");
$('#picme').css("opacity","0.00");
$('#picme').css("filter","alpha(opacity=0)");
$('#preview img').load(function() {}).attr('src', Server+ 'cropMobile.php?y=1&x=1&width=500&height=666&nocache=1&cropratio=0.7507507507507508:1&image=/v/uploads/raw/'+window.localStorage["picha"]);
loading_show();
setTimeout( function(){
$('#submitX').css("display","none");
$('#submit').css("display","block");
$('#picme').css("opacity","1");
$('#picme').css("filter","alpha(opacity=100)");
$("#check").html("");
$("#notify").html("auto");
loading_hide();
},1500 );
});
</script>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/mytv.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/font.css" type="text/css" charset="utf-8" />
<script type="text/javascript">
getPhoto4PreviewAjx(4);
function loadingIn()
{
$('.dialog-background').css('display','block') ;
$('.dialog-background').fadeIn('slow');
}
function loadingOut()
{
$('.dialog-background').css('display','none') ;
$('.dialog-background').fadeOut('slow');
}
// close photo preview block
function closePhoto4Preview() {
$('#photo_preview4').hide();
};
// display photo preview block
function getPhoto4PreviewAjx(id) {
loadingIn();
var myaccount = localStorage.getItem('myaccount');
$.post(Server+'service/account_ajx.php?who='+myaccount+'&isdisplay=5', {action: 'get_info', id: id},
function(data){
var form = $("#updateForm");
$("#name", form).val(data.name);
$("#email", form).val(data.email);
$("#tel", form).val(data.tel);
$("#catalogname", form).val(data.catalogname);
$('#photo_preview4').show();
}, "json"
);
loadingOut();
};
// init
$(function(){
// onclick event handlers
$('#photo_preview4 .photo_wrp').click(function (event) {
event.preventDefault();
return false;
});
$('#photo_preview4 .close').click(function (event) {
closePhoto4Preview();
});
// display photo preview ajaxy
$('.photo4').click(function (event) {
if (event.preventDefault) event.preventDefault();
getPhoto4PreviewAjx($(this).attr('id'));
});
})
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="onBodyLoad()" style=" background-image:url(images/bg.png); background-position:center; background-position:top ">
<div id="loadingReportaM"></div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<!-- <tr>
<td valign="top" width="100%" height="40" ><table border="0" cellpadding="0" cellspacing="0" height="40" width="100%" class="header-contX" >
<tr>
<td width="53" height="40" ><a href="index.html"><img src="images/homey.png" height="40" style="-webkit-transform: translate3d(0,0,0); "></a></td>
<td width="100%" height="40" align="right" style="color: #FFF" background="images/app_03.png" ><a href="#" class="reload" id="1"><span id="check"></span></a></td>
<td width="44" height="40"><a href="index.html"><img src="images/app_04.png" width="44" height="40" alt=""> </a></td>
<td width="44" height="40" ><img src="images/app_05.png" width="44" height="40" alt="" class="menu-trigger" ></td>
</tr>
</table></td>
</tr>-->
<tr>
<td height="55" valign="top"><table border="0" cellpadding="0" width="100%" cellspacing="0" height="55" >
<tr>
<td width="114" height="55" ><img src="images/cropm.png" alt="" height="55"></td>
<td width="100%" height="55">
</td>
<!-- <td width="54" height="55" id="exit" ><a href="profile.html"><img src="images/buttons3_03.png" width="54" height="55" alt=""></a></td>-->
<td width="53" height="55" ><a id="submit"> <img src="images/done.png" width="53" height="55" alt=""></a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="100%" height="300" align="center" valign="top" style="min-height:200px">
<!-- <img src="images/Grey_Grunge4.jpg" id="spinner" width="116" height="116">-->
<div id="preview" class="animated fadeIn" >
<span id="controls">
<div id="yincrement" class="preview_up"></div>
<div id="ydecrement" class="preview_down"></div>
<div id="xincrement" class="preview_left"></div>
<div id="xdecrement" class="preview_right"></div>
</span>
<div class="photo_wrp">
<img class="" src="" id="picme" style="min-width:116px; width:100%; max-width:400px">
</div> <div class="badge bg-white pull-none" id="notify" style="margin-top:3px; padding:5px; padding-top:3px; padding-right:7px;padding-left:7px"></div>
<section class="panel" style="padding:10px;background:none">
<input type="range" min="1" max="500" data-rangeslider>
<input id="displacement" name="displacement" type="hidden" value="1">
<input id="displacementy" name="displacementy" type="hidden" value="1">
<output style="display:none">1</output></section>
</div>
</td>
</tr>
</table>
<!-- Navigation -->
<!-- mainContent panel -->
<script src="js/rangeslider.min.js"></script>
<script>
$(function() {
$('#submit').click(function() {
var image = window.localStorage["picha"];
var displacement = $("#displacement").val();
var y= encodeURI(document.getElementById('displacementy').value);
loading_show();
$.ajax
({
type: "GET",
url: Server+'cropMobile.php?y='+y+'&execute=yes&x='+displacement+'&color=red&width=500&height=666&nocache=1&cropratio=0.7507507507507508:1&image=/v/uploads/raw/'+image,
data: "page=4",
success: function(msg)
{
loading_hide();
/*$('#preview img').load(function() { }).attr('src', Server+'taswira.php?width=400&image=/v/uploads/raw/'+window.localStorage["picha"]);
document.getElementById('submit').innerHTML = '<a href="coversEffect.html"><img src="images/done.png"></a>';
document.getElementById('exit').innerHTML = ''; */
window.location = "frameEffect.html";
}
});
});
var $document = $(document),
selector = '[data-rangeslider]',
$element = $(selector);
// Example functionality to demonstrate a value feedback
function valueOutput(element) {
var value = element.value,
output = element.parentNode.getElementsByTagName('output')[0];
output.innerHTML = value;localStorage.setItem('ngapi', value);
}
for (var i = $element.length - 1; i >= 0; i--) {
valueOutput($element[i]);
};
$document.on('change', 'input[type="range"]', function(e) {
valueOutput(e.target);
});
// Basic rangeslider initialization
$element.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
var image = window.localStorage["picha"];
var y= encodeURI(document.getElementById('displacementy').value);
var myaccount= window.localStorage["myaccount"];
$('#submitX').css("display","none");
$('#submit').css("display","none");
$("#check").html("Adjusting");
$("#notify").html("Adjusting...");
$('#picme').css("opacity","0.90");
$('#picme').css("filter","alpha(opacity=9)");
$('#preview img').load(function() {}).attr('src', Server+'cropMobile.php?y='+y+'&x='+value+'&color=red&width=500&height=666&nocache=1&cropratio=0.7507507507507508:1&image=/v/uploads/raw/'+image);
loading_show();
setTimeout( function(){
$('#submitX').css("display","none");
$('#submit').css("display","block");
$('#picme').css("opacity","1");
$('#picme').css("filter","alpha(opacity=100)");
$("#check").html("");
$("#displacement").val(value);
$("#notify").html("Adjusted");
loading_hide();
},1500 );
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
});
</script>
<script type="text/javascript" charset="utf-8" src="js/notification.js"></script>
<script type="text/javascript" charset="utf-8" src="js/json2.js"></script>
</body>
</html>