-
Notifications
You must be signed in to change notification settings - Fork 42
/
Copy pathdemo.html
201 lines (181 loc) · 12.5 KB
/
demo.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery snapPuzzle Plugin</title>
<meta name="description" content="A jQuery plugin for turning an image into a jigsaw puzzle game.">
<link rel="shortcut icon" href="//pixabay.com/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/grids-responsive-min.css">
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }
th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }
@media (max-width:480px) {
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
td:first-child { white-space: normal; }
}
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */
/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
/* required snapPuzzle styles */
.snappuzzle-wrap { position: relative; display: block; }
.snappuzzle-pile { position: relative; }
.snappuzzle-piece { cursor: move; }
.snappuzzle-slot { position: absolute; background: #fff; opacity: .8; }
.snappuzzle-slot-hover { background: #eee; }
</style>
</head>
<body>
<div style="max-width:900px;padding:0 10px;margin:40px auto;text-align:center">
<h1>snapPuzzle</h1>
<h2>A jQuery plugin for turning an image into a jigsaw puzzle game.</h2>
<a style="margin:5px 0" href="https://github.com/Pixabay/jQuery-snapPuzzle/archive/master.zip" class="pure-button pure-button-primary button-lg">Download</a>
<a style="margin:5px 0" href="https://github.com/Pixabay/jQuery-snapPuzzle" class="pure-button button-lg">View on GitHub</a>
</div>
<div id="puzzle-containment" style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:10px;text-align:center">
<div class="pure-g" style="max-width:1280px;margin:auto">
<div class="pure-u-1 pure-u-md-1-2"><div style="margin:10px">
<img id="source_image" class="pure-img" src="image.jpg">
</div></div>
<div class="pure-u-1 pure-u-md-1-2">
<div id="pile" style="margin:10px">
<div id="puzzle_solved" style="display:none;text-align:center;position:relative;top:25%">
<h2 style="margin:0 0 20px">Well done!</h2>
<a class="pure-button button-lg restart-puzzle" data-grid="3">Restart Puzzle</a>
<br><br>
<a href="#" class="restart-puzzle" data-grid="5">5x5</a>
<a href="#" class="restart-puzzle" data-grid="7">7x7</a>
<a href="#" class="restart-puzzle" data-grid="10">10x10</a>
</div>
</div>
</div>
</div>
</div>
<div style="max-width:900px;margin:auto;padding:0 10px 50px">
<h3>Overview and Features</h3>
<p>
Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.
Source on <a href="https://github.com/Pixabay/jQuery-snapPuzzle">Github</a> (<a href="https://github.com/Pixabay/jQuery-snapPuzzle#changelog">changelog</a>).
Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+.
jQuery UI drag and drop is required.
</p>
<ul>
<li>Adjustable difficulty level</li>
<li>May be used in responsive designs</li>
<li>Drag and drop</li>
<li>Callbacks</li>
</ul>
<p>
This plugin was developed by and for <a href="https://pixabay.com/">Pixabay.com</a> - an international repository for free Public Domain images.
We have implemented this plugin in production on <a href="http://pixacards.com/">Pixacards.com</a> and we share this piece of software - in the spirit of Pixabay - freely with others.
</p>
<h3>Usage</h3>
<p>
Include the JavaScript file <span class="inline-code">jquery.snap-puzzle.min.js</span> after loading jQuery and jQuery UI (draggable, droppable).
snapPuzzle accepts settings from an object of key/value pairs, and can be assigned to any text input field.
</p>
<pre>$(selector).snapPuzzle({key1: value1, key2: value2});</pre>
<h3>Settings</h3>
<table>
<tr><th>Property</th><th>Default</th><th>Description</th></tr>
<tr><td>pile</td><td><i>null</i></td><td>Selector for puzzle pieces container.</td></tr>
<tr><td>containment</td><td>'document'</td><td>Confine puzzle pieces to this element/selector.</td></tr>
<tr><td>rows</td><td>5</td><td>Number of rows.</td></tr>
<tr><td>columns</td><td>5</td><td>Number of columns.</td></tr>
<tr><td colspan="3"> </td></tr>
<tr><th>Callbacks</th><th colspan="2"></th></tr>
<tr><td>onComplete(elem)</td><td colspan="2">Callback that fires when the puzzle is complete.</td></tr>
</table>
<h3>Example</h3>
<pre>$(<b>'img.puzzle'</b>).snapPuzzle({ rows: 4, columns: 3 });</pre>
<p>Check out the source code of this demo page to find out how to make a puzzle responsive.</p>
<div style="margin:60px 0 40px;overflow:hidden;border-top:1px solid #eee;padding-top:40px">
<span id="github_social"></span>
<div style="float:left;margin-right:35px">
<a href="#" data-width="70" class="twitter-share-button" data-text="jQuery snapPuzzle Plugin"></a>
</div>
<div style="float:left">
<div class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;width:140px" class="fb-like" data-send="false" data-layout="button_count" data-width="140" data-show-faces="false"></div>
</div>
<p>Please report any bugs and issues at the <a href="https://github.com/Pixabay/jQuery-snapPuzzle">GitHub repositiory</a>.</p>
<p>This software is released as Open Source under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> by <a href="https://pixabay.com/users/Simon/">Simon Steinberger / Pixabay.com</a>.</p>
</div>
<div style="background:#fafafa;border-top:1px solid #eee;padding:15px;font-size:.9em">
<div style="max-width:900px;margin:auto;padding:0 10px">
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/service/about/">About Us</a>
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/blog/">Blog</a>
<a style="float:right;margin-left:20px" href="https://goodies.pixabay.com/">More Goodies</a>
© <a href="https://pixabay.com/">Pixabay.com</a> / Simon Steinberger / Hans Braxmeier
</div>
</div>
<div id="fb-root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="jquery.snap-puzzle.js"></script>
<script>
// jQuery UI Touch Punch 0.2.3 - must load after jQuery UI
// enables touch support for jQuery UI
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
function start_puzzle(x){
$('#puzzle_solved').hide();
$('#source_image').snapPuzzle({
rows: x, columns: x,
pile: '#pile',
containment: '#puzzle-containment',
onComplete: function(){
$('#source_image').fadeOut(150).fadeIn();
$('#puzzle_solved').show();
}
});
}
$(function(){
$('#pile').height($('#source_image').height());
start_puzzle(3);
$('.restart-puzzle').click(function(){
$('#source_image').snapPuzzle('destroy');
start_puzzle($(this).data('grid'));
});
$(window).resize(function(){
$('#pile').height($('#source_image').height());
$('#source_image').snapPuzzle('refresh');
});
});
if (~window.location.href.indexOf('http')) {
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
$('#github_social').html('\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-snapPuzzle&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-snapPuzzle&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
');
}
</script>
</body>
</html>