更新前端文件
This commit is contained in:
@@ -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're done.</p>
|
||||
|
||||
<h5>Invocation Code (for this demo)</h5>
|
||||
|
||||
<pre><code>$('#target').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>© 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>
|
||||
Reference in New Issue
Block a user