thumbnail.html
5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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>