molong/sentcms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新前端文件

Browse Source
This commit is contained in:
molong
2019-07-06 16:59:35 +08:00
parent 777b452685
commit 79615defdb
1758 changed files with 315372 additions and 12014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
public/static/libs/jcrop/demos/basic.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
var d = document, ge = 'getElementById';
$('#interface').on('cropmove cropend',function(e,s,c){
d[ge]('crop-x').value = c.x;
d[ge]('crop-y').value = c.y;
d[ge]('crop-w').value = c.w;
d[ge]('crop-h').value = c.h;
});
// Most basic attachment example
$('#target').Jcrop({
setSelect: [ 175, 100, 400, 300 ]
});
$('#text-inputs').on('change','input',function(e){
$('#target').Jcrop('api').animateTo([
parseInt(d[ge]('crop-x').value),
parseInt(d[ge]('crop-y').value),
parseInt(d[ge]('crop-w').value),
parseInt(d[ge]('crop-h').value)
]);
});
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
<style>
#text-inputs { margin: 10px 8px 0; }
.input-group { margin-right: 1.5em; }
.nav-box { width: 748px; padding: 0 !important; margin: 4px 0; background-color: #f8f8f7; }
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Hello World</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><b>Hello World</b></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div id="interface" class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id="target"></div>
<div class="nav-box">
<form onsubmit="return false;" id="text-inputs"><span class="input-group"><b>X</b>
<input type="text" name="cx" id="crop-x" class="span1"></span><span class="input-group"><b>Y</b>
<input type="text" name="cy" id="crop-y" class="span1"></span><span class="input-group"><b>W</b>
<input type="text" name="cw" id="crop-w" class="span1"></span><span class="input-group"><b>H</b>
<input type="text" name="ch" id="crop-h" class="span1"></span>
</form>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

101
public/static/libs/jcrop/demos/box-sizing.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
var d = document, ge = 'getElementById';
$('#interface').on('cropmove cropend',function(e,s,c){
d[ge]('crop-x').value = c.x;
d[ge]('crop-y').value = c.y;
d[ge]('crop-w').value = c.w;
d[ge]('crop-h').value = c.h;
});
// Most basic attachment example
$('#target').Jcrop({
boxWidth: 750,
setSelect: [ 175, 100, 400, 300 ]
});
$('#text-inputs').on('change','input',function(e){
$('#target').Jcrop('api').animateTo([
parseInt(d[ge]('crop-x').value),
parseInt(d[ge]('crop-y').value),
parseInt(d[ge]('crop-w').value),
parseInt(d[ge]('crop-h').value)
]);
});
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
<style>
#text-inputs { margin: 10px 8px 0; }
.input-group { margin-right: 1.5em; }
.nav-box { width: 748px; padding: 0 !important; margin: 4px 0; background-color: #f8f8f7; }
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Hello World</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><b>Hello World</b></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div id="interface" class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/lake4-1500.jpg" id="target"></div>
<div class="nav-box">
<form onsubmit="return false;" id="text-inputs"><span class="input-group"><b>X</b>
<input type="text" name="cx" id="crop-x" class="span1"></span><span class="input-group"><b>Y</b>
<input type="text" name="cy" id="crop-y" class="span1"></span><span class="input-group"><b>W</b>
<input type="text" name="cw" id="crop-w" class="span1"></span><span class="input-group"><b>H</b>
<input type="text" name="ch" id="crop-h" class="span1"></span>
</form>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

232
public/static/libs/jcrop/demos/circle.html Normal file
View File

@@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Circles | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
var cb, filter;
jQuery(function($){
// Create a new Selection object extended from Selection
var CircleSel = function(){ };
// Set the custom selection's prototype object to be an instance
// of the built-in Selection object
CircleSel.prototype = new $.Jcrop.component.Selection();
// Then we can continue extending it
$.extend(CircleSel.prototype,{
zoomscale: 1,
attach: function(){
this.frame.css({
background: 'url(' + $('#target')[0].src.replace('750','750') + ')'
});
},
positionBg: function(b){
var midx = ( b.x + b.x2 ) / 2;
var midy = ( b.y + b.y2 ) / 2;
var ox = (-midx*this.zoomscale)+(b.w/2);
var oy = (-midy*this.zoomscale)+(b.h/2);
//this.frame.css({ backgroundPosition: ox+'px '+oy+'px' });
this.frame.css({ backgroundPosition: -(b.x+1)+'px '+(-b.y-1)+'px' });
},
redraw: function(b){
// Call original update() method first, with arguments
$.Jcrop.component.Selection.prototype.redraw.call(this,b);
this.positionBg(this.last);
return this;
},
prototype: $.Jcrop.component.Selection.prototype
});
// Jcrop Initialization
$('#target').Jcrop({
// Change default Selection component for new selections
selectionComponent: CircleSel,
// Use a default filter chain that omits shader
applyFilters: [ 'constrain', 'extent', 'backoff', 'ratio', 'round' ],
// Start with circles only
aspectRatio: 1,
// Set an initial selection
setSelect: [ 147, 55, 456, 390 ],
// Only n/s/e/w handles
handles: [ 'n','s','e','w' ],
// No dragbars or borders
dragbars: [ ],
borders: [ ]
},function(){
this.container.addClass('jcrop-circle-demo');
interface_load(this);
});
function interface_load(obj){
cb = obj;
// Add in a custom shading element...
cb.container.prepend($('<div />').addClass('custom-shade'));
function random_coords() {
return [
Math.random()*300,
Math.random()*200,
(Math.random()*540)+50,
(Math.random()*340)+60
];
}
// Settings Buttons
$(document.body).on('click','[data-setting]',function(e){
var $targ = $(e.target),
setting = $targ.data('setting'),
value = $targ.data('value'),
opt = {};
opt[setting] = value;
cb.setOptions(opt);
$targ.closest('.btn-group').find('.active').removeClass('active');
$targ.addClass('active');
if ((setting == 'multi') && !value) {
var m = cb.ui.multi, s = cb.ui.selection;
for(var i=0;i<m.length;i++)
if (s !== m[i]) m[i].remove();
cb.ui.multi = [ s ];
s.focus();
}
e.preventDefault();
});
// Animate button event
$(document.body).on('click','[data-action]',function(e){
var $targ = $(e.target);
var action = $targ.data('action');
switch(action){
case 'random-move':
cb.ui.selection.animateTo(random_coords());
break;
}
cb.ui.selection.refresh();
}).on('selectstart',function(e){
e.preventDefault();
}).on('click','a[data-action]',function(e){
e.preventDefault();
});
}
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css"><style type="text/css">.jcrop-circle-demo .jcrop-box {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 1px rgba(255, 255, 255, 0.4) solid;
border-radius: 50%;
-webkit-box-shadow: 1px 1px 26px #000000;
-moz-box-shadow: 1px 1px 26px #000000;
box-shadow: 1px 1px 26px #000000;
overflow: hidden;
}
.jcrop-circle-demo .jcrop-box:focus {
outline: none;
}
.custom-shade {
position: absolute;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.4;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Circles</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><a href="basic.html">Hello World</a></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><b>Circles</b></li>
</ul>
</div>
<div class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id="target">
<div class="btn-toolbar"><a href="#" data-action="random-move" id="moveselection" class="btn btn-small">Move</a><span class="btn-group"><a href="#" data-setting="aspectRatio" data-value="1" class="btn active btn-small">Circle</a><a href="#" data-setting="aspectRatio" data-value="0" class="btn btn-small">Ellipse</a></span><span class="btn-group"><a href="#" data-setting="multi" data-value="0" class="btn active btn-small">Single </a><a href="#" data-setting="multi" data-value="1" class="btn btn-small">Multi</a></span></div>
<h3>About This Demo</h3><p><strong>And you thought Jcrop could only do rectangles!</strong> Well, that&#39;s still
mostly true. This demo implements a custom <code>Selection</code> object that
uses CSS properties to create the appearance of circles and ellipses.</p>
<h4>Custom CSS and Shading</h4>
<p>By setting the CSS property <code>border-radius: 50%</code>, we can give the
selection an appearance of a circle or an ellipse. The built-in
shader filter has been disabled, and a semi-opaque <code>&lt;div&gt;</code> has been
inserted over the image to give the appearance of shading.</p>
<h4>Cropping Irregular Selections</h4>
<p>If you actually want to <em>crop</em> a circle or an ellipse, you&#39;re on
your own. Jcrop will provide the rectangular coordinates for these
crops, and further processing can be done to extract the circle
or ellipse from the image.</p>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

173
public/static/libs/jcrop/demos/coords.html Normal file
View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dimensions | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script src="/Jcrop/js/jquery.color.js"></script>
<script type="text/javascript">
var cb, filter;
jQuery(function($){
// Create a new Selection object extended from Selection
var CoordsSel = function(){ };
// Set the custom selection's prototype object to be an instance
// of the built-in Selection object
CoordsSel.prototype = new $.Jcrop.component.Selection;
// Then we can continue extending it
$.extend(CoordsSel.prototype,{
attach: function(){
// Prepend an element to Selection.element (selection container)
this.coords = $('<div> x </div>').addClass('jcrop-coords');
this.element.prepend(this.coords);
},
redraw: function(b){
// Call original redraw() method first, with arguments
$.Jcrop.component.Selection.prototype.redraw.call(this,b);
// Update coordinates
this.coords.html(this.last.w+' &times '+this.last.h);
return this;
}
});
// Now set it as the component that is used for new selections
$('#target').Jcrop({
selectionComponent: CoordsSel,
bgColor: 'rgb(145,176,241)',
bgOpacity: 0.5
},function(){
this.container.addClass('jcrop-hl-active');
interface_load(this);
});
function interface_load(obj){
cb = obj;
cb.newSelection().update($.Jcrop.wrapFromXywh([ 147, 55, 456, 390 ])).refresh();
//cb.ui.selection.removeFilter(cb.filter.shader);
cb.ui.selection.refresh();
function random_coords() {
return [
Math.random()*300,
Math.random()*200,
(Math.random()*540)+50,
(Math.random()*340)+60
];
}
// Animate button event
$(document.body).on('click','[data-action]',function(e){
var $targ = $(e.target);
var action = $targ.data('action');
switch(action){
case 'random-move':
cb.ui.selection.animateTo(random_coords());
break;
}
cb.ui.selection.refresh();
}).on('selectstart',function(e){
e.preventDefault();
}).on('click','a[data-action]',function(e){
e.preventDefault();
});
}
$.Jcrop.component.CoordsSel = CoordsSel;
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
<style type="text/css">
.jcrop-border {
background: rgba(0,0,0,0.8);
}
.jcrop-handle {
border-color: rgba(0,0,0,0.8);
}
.jcrop-coords {
display: none;
position: absolute;
bottom: -24px;
right: 7px;
color: rgba(255, 255, 255, 0.8);
padding: 1px 4px 0;
font-size: 10px;
white-space: nowrap;
font-family: "Lucida Console", Monaco, monospace;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.jcrop-current .jcrop-coords {
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Dimensions</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><a href="basic.html">Hello World</a></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><b>Dimensions</b></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra-750.jpg" id="target">
<div class="btn-toolbar"><a href="#" data-action="random-move" id="moveselection" class="btn btn-small">Move</a></div>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

123
public/static/libs/jcrop/demos/crop.php Normal file
View File

@@ -0,0 +1,123 @@
<?php
/**
* Jcrop image cropping plugin for jQuery
* Example cropping script
* @copyright 2008-2009 Kelly Hallman
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'demo_files/pool.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
// If not a POST request, display page below:
?><!DOCTYPE html>
<html lang="en">
<head>
<title>Live Cropping 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>
<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" />
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
<style type="text/css">
#target {
background-color: #ccc;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
</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">Live Demo (Requires PHP)</li>
</ul>
<h1>Server-based Cropping Behavior</h1>
</div>
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
</form>
<p>
<b>An example server-side crop script.</b> Hidden form values
are set when a selection is made. If you press the <i>Crop Image</i>
button, the form will be submitted and a 150x150 thumbnail will be
dumped to the browser. Try it!
</p>
</div>
</div>
</div>
</div>
</body>
</html>

263
public/static/libs/jcrop/demos/demo_files/demos.css Normal file
View File

@@ -0,0 +1,263 @@
/* Jcrop Demo Site CSS - 2013 Tapmodo Interactive LLC - MIT License
Not required to run Jcrop - contains twitter bootstrap code */
/* To build these CSS files you must have LESS and run
* $ git submodule init
* $ git submodule update
* ...to pull in the Twitter bootstrap files
*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* JCROP DEMOS CSS */
li small {
color: #f07878;
}
.inline-labels label {
display: inline;
}
div#interface.span3 fieldset {
margin-bottom: 1.5em;
}
div#interface.span3 fieldset legend {
margin-bottom: 2px;
padding-bottom: 2px;
line-height: 1.2;
}
.article h1 {
color: #333;
margin-top: .2em;
}
.jc-demo {
text-align: center;
}
.jcropper-holder {
border: 1px #bbb solid;
}
.jc-demo-box {
text-align: left;
margin: 3.4em auto 2em;
background: white;
border: 1px #bbb solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
padding: 1em 2em 2em;
}
form {
margin: 1.5em 0;
}
form.coords label {
margin-right: 1em;
font-weight: bold;
color: #900;
}
form.coords input {
width: 3em;
}
.ui-widget-overlay {
opacity: 0.80;
filter: alpha(opacity=70);
}
.jc-dialog {
padding-top: 1em;
}
.ui-dialog p tt {
color: yellow;
}
.jcrop-light .jcrop-selection {
-moz-box-shadow: 0px 0px 15px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 15px #999;
/* Safari, Chrome */
box-shadow: 0px 0px 15px #999;
/* CSS3 */
}
.jcrop-dark .jcrop-selection {
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
/* Firefox */
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
/* Safari, Chrome */
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
/* CSS3 */
}
.jcrop-dark .jcrop-selection:hover {
-moz-box-shadow: 0px 0px 6px #000000;
/* Firefox */
-webkit-box-shadow: 0px 0px 6px #000000;
/* Safari, Chrome */
box-shadow: 0px 0px 6px #000000;
/* CSS3 */
}
.jcrop-dark .jcrop-selection.jcrop-current {
-moz-box-shadow: 0px 0px 15px #000;
/* Firefox */
-webkit-box-shadow: 0px 0px 15px #000;
/* Safari, Chrome */
box-shadow: 0px 0px 15px #000;
/* CSS3 */
}
.jcrop-fancy .jcrop-handle.ord-e {
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-w {
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-nw {
-webkit-border-bottom-right-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-ne {
-webkit-border-bottom-left-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-sw {
-webkit-border-top-right-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-se {
-webkit-border-top-left-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-s {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
}
.jcrop-fancy .jcrop-handle.ord-n {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
.description {
margin: 16px 0;
}
.jcrop-droptarget canvas {
background-color: #f0f0f0;
}
div.nav-box {
border: 1px #ccc solid;
-webkit-box-shadow: inset 0px 0px 12px #cccccc;
-moz-box-shadow: inset 0px 0px 12px #cccccc;
box-shadow: inset 0px 0px 12px #cccccc;
margin-bottom: 0.5em;
padding: 0 0 1em 1em;
}
div.nav-box h3 {
line-height: 1;
color: #777;
}
ul.icons-only {
list-style: none outside;
margin: 0 0 0 0.5em;
}
ul.icons-only li i {
margin-right: 0.5em;
line-height: 22px;
}
.bolder {
font-weight: bolder;
}
.menu-box {
border: 1px #c4c4c4 solid;
border-radius: 3px;
background: white;
margin-right: -40px;
margin-left: 15px;
font-size: 11.2px;
line-height: 1.3;
padding: 4px 8px;
}
.menu-box h3 {
background: #307b93;
color: white;
padding: 4px 4px 4px 12px;
line-height: 1;
margin-left: -14px;
font-size: 16px;
position: relative;
}
.menu-box h3::after {
content: '';
border-right: #15485c 5px solid;
border-bottom: transparent 5px solid;
position: absolute;
bottom: -5px;
left: 0px;
}
.menu-box ul.links {
padding: 0;
margin: 0 3px 1em;
border-bottom: 1px #ebebeb solid;
list-style: none outside;
}
.menu-box ul.links li {
border-top: 1px #ebebeb solid;
padding: 0;
}
.menu-box.demo-nav {
float: right;
width: 135px;
}
.menu-box.main-menu {
float: right;
width: 180px;
margin-top: -95px;
}
pre {
margin: 0 0 1.2em;
}
.alert p {
margin-bottom: 0;
}
table.option-list tbody td.col1 {
color: #777;
font-weight: bolder;
}
table.option-list td.col1 {
width: 19%;
}
table.option-list td.col2 {
width: 31%;
}
table.option-list td.col3 {
width: 50%;
}
code {
border: none;
color: #555;
}

5203
public/static/libs/jcrop/demos/demo_files/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/static/libs/jcrop/demos/demo_files/pool.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/static/libs/jcrop/demos/demo_files/sago.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/static/libs/jcrop/demos/demo_files/sagomod.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/static/libs/jcrop/demos/demo_files/sagomod.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

62
public/static/libs/jcrop/demos/index.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>All Jcrop Demos | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// Most basic attachment example
$('#target').Jcrop({});
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>All Jcrop Demos</h1>
</div>
<ul></ul>
<li><a href="basic.html">Hello World</a></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

91
public/static/libs/jcrop/demos/non-image.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Non-image Cropping | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// I did JSON.stringify(jcrop_api.ui.selection.get()) on a crop I liked:
var c = {"x":186,"y":218,"x2":564,"y2":281,"w":378,"h":63};
$('#target').Jcrop({
setSelect: [c.x,c.y,c.w,c.h]
},function(){
this.animateTo([ 18, 11, 713, 170 ]);
});
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
<style>
#target {
background-color: #ccc;
width: 750px;
height: 500px;
display: block;
}
#target p {
padding: .5em 1em;
line-height: 1;
font-size: 36px;
display: block;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Non-image Cropping</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><a href="basic.html">Hello World</a></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div id="target" class="jcrop-dark jcrop-hl-active"><p><strong>This is an example of attaching Jcrop to a target that is not an image.</strong>
You are now cropping over &lt;div&gt; content.</p>
</div>
<div class="description"><p><strong>Attaching Jcrop to a non-image element.</strong><br/>This is mostly useful to implement other interfaces, such as
<code>canvas</code> or over an arbitrary <code>div</code>.</p>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

373
public/static/libs/jcrop/demos/panel.html Normal file
View File

@@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feature Panel | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://jcrop-dev.tapmodo.com/Jcrop/js/jquery.color.js"></script>
<script type="text/javascript">
var cb, filter;
jQuery(function($){
var $targ = $('#target');
var $easing = $('#easing');
$('#target').Jcrop({
animEasing: 'easeOutQuart',
bgOpacity: .35,
linked: false,
multi: true
},function(){
this.container.addClass('jcrop-dark jcrop-hl-active');
interface_load(this);
});
function interface_load(obj){
cb = obj;
cb.newSelection();
cb.setSelect([ 147, 55, 456, 390 ]);
cb.refresh();
// Hack a "special" selection...
var logosel = cb.newSelection().update($.Jcrop.wrapFromXywh([73,268,400,100]));
$.extend(logosel,{
special: true, // custom value used in our local script here
bgColor: '#999',
bgOpacity: 0.8,
canResize: false,
canDelete: false
});
logosel.element.prepend('<img src="http://tapmodo.com/img/tapmodo-official.png" style="position:absolute;background-color:white;width:100%;height:100%;" />');
logosel.aspectRatio = 400/100;
logosel.refresh();
cb.ui.multi[1].focus();
// Select an interesting easing function
$easing[0].selectedIndex = 24;
// Set up the easing function select element event
cb.opt.animEasing = $easing.change(function(e){
var $targ = $(e.target);
cb.opt.animEasing = $targ.val();
e.preventDefault();
cb.ui.selection.animateTo([Math.random()*300,Math.random()*200,(Math.random()*540)+50,(Math.random()*340)+60]);
}).val();
$('#filter-selections input').attr('checked',false);
$('#page-interface').on('startselect',function(e){
e.preventDefault();
});
/**
*
*/
cb.container.on('cropfocus cropblur cropstart cropend',function(e){
var sel = $(e.target).data('selection');
switch(e.type){
case 'cropfocus':
$('#can_size')[0].checked = sel.canResize?true:false;
$('#can_delete')[0].checked = sel.canDelete?true:false;
$('#can_drag')[0].checked = sel.canDrag?true:false;
$('#set_minsize')[0].checked = (sel.minSize[0]>8)?true:false;
$('#set_maxsize')[0].checked = (sel.maxSize[0])?true:false;
$('#set_bounds')[0].checked = (sel.edge.n)?true:false;
$('#is_linked')[0].disabled = sel.special?true:false;
$('#is_linked')[0].checked = sel.linked?true:false;
$('#shading-tools a')[0].disabled = sel.special?true:false;
$('#shading-tools a')[sel.special?'addClass':'removeClass']('disabled');
$('#ar-links').find('.active').removeClass('active');
if (sel.aspectRatio) {
if (!$('#ar-links').find('[data-value="'+sel.aspectRatio+'"]').addClass('active').length)
$('#ar-lock').addClass('active');
} else $('#ar-free').addClass('active');
}
});
$('#aspect_ratio').on('change',function(e){
var s = cb.ui.selection;
var b = s.get();
s.aspectRatio = e.target.checked? b.w/b.h : 0;
s.refresh();
});
$('#is_linked').on('change',function(e){
cb.ui.selection.linked = e.target.checked;
});
$('#selection-options').on('change','[data-filter-toggle]',function(e){
var tog = $(e.target).data('filter-toggle');
var o = { };
o[tog] = e.target.checked? true: false;
cb.setOptions(o);
});
var cycle_colors = [
'red',
'blue',
'gray',
'yellow',
'orange',
'green',
'white'
];
function random_coords() {
return [
Math.random()*300,
Math.random()*200,
(Math.random()*540)+50,
(Math.random()*340)+60
];
}
$('#can_drag,#can_size,#can_delete,#enablesel,#multisel,#anim_mode').attr('checked','checked');
$('#is_linked,#aspect_ratio').attr('checked',false);
function anim_mode(){
return document.getElementById('anim_mode').checked;
}
// A simple function to cleanup multiple spawned selections
function run_cleanup(){
var m = cb.ui.multi, s = cb.ui.selection;
for(var i=0;i<m.length;i++)
if (s !== m[i]) m[i].remove();
cb.ui.multi = [ s ];
s.center();
s.focus();
}
// Animate button event
$(document.body).on('click','[data-action]',function(e){
var $targ = $(e.target);
var action = $targ.data('action');
switch(action){
case 'set-maxsize':
cb.setOptions({ maxSize: e.target.checked? [400,350]: [0,0] });
break;
case 'set-minsize':
cb.setOptions({ minSize: e.target.checked? [60,60]: [8,8] });
break;
case 'set-bounds':
if (e.target.checked){
cb.setOptions({ edge: {
n: 15,
e: -20,
s: -40,
w: 28
}});
}
else {
cb.setOptions({ edge: {
n: 0,
e: 0,
s: 0,
w: 0
}});
}
break;
case 'set-image':
$targ.parent().find('.active').removeClass('active');
$targ.addClass('active');
$('#target').attr('src','//jcrop-cdn.tapmodo.com/assets/images/'+$targ.data('image')+'-750.jpg');
break;
case 'set-ar':
var value = $targ.data('value');
$targ.parent().find('.active').removeClass('active');
if (value == 'lock'){
var b = cb.ui.selection.get();
value = b.w / b.h;
}
$targ.addClass('active');
cb.setOptions({ aspectRatio: value });
break;
case 'set-selmode':
$targ.parent().find('.active').removeClass('active');
$targ.addClass('active');
switch($targ.data('mode')){
case 'none':
cb.container.addClass('jcrop-nodrag');
cb.setOptions({ allowSelect: false });
break;
case 'single':
cb.container.removeClass('jcrop-nodrag');
cb.setOptions({ allowSelect: true, multi: false });
break;
case 'multi':
cb.container.removeClass('jcrop-nodrag');
cb.setOptions({ allowSelect: true, multi: true });
break;
}
break;
case 'enable-selections':
cb.ui.stage.dragger.active = e.target.checked;
break;
case 'enable-multi':
cb.ui.stage.dragger.multi = e.target.checked;
break;
case 'color-cycle':
var cc = cycle_colors.shift();
cb.setOptions({ bgColor: cc });
cycle_colors.push(cc);
break;
case 'set-opacity':
$targ.parent().find('.active').removeClass('active');
$targ.addClass('active');
cb.setOptions({ bgOpacity: $targ.data('opacity'), bgColor: 'black' });
break;
case 'cleanup-all':
run_cleanup();
break;
case 'random-move':
cb[anim_mode()?'animateTo':'setSelect'](random_coords());
break;
}
}).on('keydown',function(e){
if (e.keyCode == 8) e.preventDefault();
}).on('selectstart',function(e){
e.preventDefault();
}).on('click','a[data-action]',function(e){
e.preventDefault();
});
}
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Feature Panel</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><a href="basic.html">Hello World</a></li>
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
<li><b>Feature Panel</b></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id="target">
<div class="row-fluid">
<div class="span4">
<h5>Selection Properties</h5>
<div id="selection-options">
<label class="checkbox">
<input type="checkbox" data-filter-toggle="canDrag" id="can_drag">Draggable
</label>
<label class="checkbox">
<input type="checkbox" data-filter-toggle="canResize" id="can_size">Resizable
</label>
<label class="checkbox">
<input type="checkbox" data-filter-toggle="canDelete" id="can_delete">Deletable
</label>
</div>
<label class="checkbox">
<input type="checkbox" data-action="set-bounds" id="set_bounds">Enable boundary
</label>
<label class="checkbox">
<input type="checkbox" data-action="set-minsize" id="set_minsize">Minimum Size
</label>
<label class="checkbox">
<input type="checkbox" data-action="set-maxsize" id="set_maxsize">Maximum Size
</label>
</div>
<div class="span4">
<h5>Aspect Ratio</h5>
<div class="btn-toolbar"><span id="ar-links" class="btn-group"><a href="#" data-action="set-ar" data-value="0" id="ar-free" class="btn active btn-small">Free</a><a href="#" data-action="set-ar" data-value="lock" id="ar-lock" class="btn btn-small">Lock</a><a href="#" data-action="set-ar" data-value="1.4" class="btn btn-small">Wide</a><a href="#" data-action="set-ar" data-value=".8" class="btn btn-small">Tall</a></span></div>
<h5>Shading</h5>
<div id="shading-tools" class="btn-toolbar"><a href="#" data-action="color-cycle" class="btn btn-small">Color</a><span class="btn-group"><a href="#" data-action="set-opacity" data-opacity=".35" class="btn active btn-small">Light</a><a href="#" data-action="set-opacity" data-opacity=".55" class="btn btn-small">Medium</a><a href="#" data-action="set-opacity" data-opacity=".75" class="btn btn-small">Dark</a></span></div>
<h5>Animation</h5>
<label class="checkbox">
<input type="checkbox" id="anim_mode">Enable Animation
</label>
<select data-action="update-easing" id="easing" class="select">
<option>linear</option>
<option>swing</option>
<option>easeInOutQuad</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutExpo</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutSine</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeOutBounce</option>
<option>easeInOutCirc</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCubic</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeOutElastic</option>
<option>easeInOutBack</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutQuart</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuint</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
</select>
</div>
<div class="span4">
<h5>Current Selection</h5>
<label class="checkbox">
<input type="checkbox" data-filter-toggle="ratio" id="is_linked">Linked Selection
</label>
<div class="btn-toolbar"><a href="#" data-action="random-move" id="moveselection" class="btn btn-small">Move</a><a href="#" data-action="cleanup-all" class="btn btn-small">Cleanup</a></div>
<h5>New Selections</h5>
<div class="btn-toolbar"><span class="btn-group"><a href="#" data-action="set-selmode" data-mode="none" class="btn btn-small">None</a><a href="#" data-action="set-selmode" data-mode="single" class="btn btn-small">Single</a><a href="#" data-action="set-selmode" data-mode="multi" class="btn active btn-small">Multi</a></span></div>
<h5>Test Image</h5>
<div class="btn-toolbar"><span class="btn-group"><a href="#" data-action="set-image" data-image="sierra" class="btn btn-small">Sierra1</a><a href="#" data-action="set-image" data-image="sierra2" class="btn active btn-small">Sierra2</a><a href="#" data-action="set-image" data-image="market" class="btn btn-small">Market</a></span></div>
</div>
</div>
</div>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>

138
public/static/libs/jcrop/demos/thumbnail.html Normal file
View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thumbnail Preview | Jcrop Demos</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// Create a scope-wide variable to hold the Thumbnailer instance
var thumbnail;
// Instantiate Jcrop
$('#target').Jcrop({
aspectRatio: 1,
setSelect: [ 175, 100, 400, 300 ]
},function(){
var jcrop_api = this;
thumbnail = new $.Jcrop.component.Thumbnailer(jcrop_api,{ width: 130, height: 130 });
});
// Wire up the auto-hide checkbox/toggle
$('#autohide').attr('checked',false).on('change',function(e){
var chk = this.checked;
if (thumbnail) {
thumbnail.autoHide = chk? true: false;
thumbnail[chk?'hide':'show']();
}
});
});
</script>
<link rel="stylesheet" href="demo_files/main.css">
<link rel="stylesheet" href="demo_files/demos.css">
<link rel="stylesheet" href="../css/Jcrop.css">
<style>
.jcrop-thumb {
top: -25px;
right: 20px;
border: 1px black solid;
}
#text-inputs { margin: 10px 8px 0; }
.input-group { margin-right: 1.5em; }
.nav-box { width: 748px; padding: 0 !important; margin: 4px 0; background-color: #f8f8f7; }
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./basic.html">Demos</a>
</li>
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
</li>
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>Thumbnail Preview</h1>
</div>
<div class="demo-nav menu-box">
<h3>Jcrop Demos</h3>
<ul class="links">
<li><a href="basic.html">Hello World</a></li>
<li><b>Thumbnail Preview</b></li>
<li><a href="panel.html">Feature Panel</a></li>
<li><a href="coords.html">Dimensions</a></li>
<li><a href="circle.html">Circles</a></li>
</ul>
</div>
<div id="interface" class="page-interface"><img src="http://jcrop-dist.tapmodo.com/assets/images/sierra2-750.jpg" crossOrigin="anonymous" id="target">
<div style="margin-top:0.7em">
<label class="checkbox">
<input type="checkbox" id="autohide"><b>Auto-hide Thumbnail Preview</b>
</label>
</div>
</div>
<h3>Built-in Preview Support</h3><p><strong>Thumbnail previews just got much easier!</strong> Used to be, if you wanted to
include a dynamic preview with Jcrop, you had to write client code.
A number of people had difficulty adapting that code to their needs.
No more! Now just attach a Thumbnailer object. Pass in the Jcrop instance,
desired width, and height, and you&#39;re done.</p>
<h5>Invocation Code (for this demo)</h5>
<pre><code>$(&#39;#target&#39;).Jcrop({
aspectRatio: 1,
setSelect: [ 175, 100, 400, 300 ]
},function(){
var jcrop_api = this;
new $.Jcrop.component.Thumbnailer(jcrop_api,{ width: 130, height: 130 });
});</code></pre>
<p>The constructor takes a reference to the Jcrop instance, and allows
passage of various options such as initial width and height.</p>
<h5>Customize Position and Styling with CSS</h5>
<pre><code>.jcrop-thumb {
top: -25px;
right: 20px;
border: 1px black solid;
}</code></pre>
<p>The absolutely-positioned, sized thumbnail is appended to the Jcrop
instance container automatically. It can then be positioned relatively
to the container by using top/left/bottom/right CSS values. Styling
such as a border or a box shadow can be added if desired.</p>
<h3>Additional Features</h3>
<ul><li>Can be locked to an individual Selection object.</li><li>Can be resized using <code>resize(w,h)</code> method.</li></ul>
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
<div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b>
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>