-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
73 lines (56 loc) · 2.55 KB
/
test.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>jquery.pixelate.js</title>
<link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type='text/css'>
<script type="text/javascript" src="./src/jquery.js"></script>
<script type="text/javascript" src="./src/jquery.pixelate.js"></script>
</head>
<body>
<div class="wrapper">
<h1 class="header">jquery.pixelate.js</h1>
<h3 class="subheader">Why be retina-friendly when you could be SNES-friendly?</h3>
<ul class="social">
<li><a href="https://github.com/jmduke/jquery.pixelate.js">GitHub</a>
<li><a href="#" class="tweet">Tweet</a>
</ul>
<div class="images">
<a href="#" onClick="loadImage('./img/example_1.jpg')">Image 1</a>
<a href="#" onClick="loadImage('./img/example_2.jpg')">Image 2</a>
<a href="#" onClick="loadImage('./img/example_3.jpg')">Image 3</a>
<a href="#" onClick="loadUrl()">Custom URL</a>
</div>
<input class="slider" type="range" min="1" max="100" value="100">
<img class="example" src="img/example_1.jpg">
</div>
<div class="footer">
Made with love in rainy Seattle by <a href="http://www.twitter.com/justinmduke">Justin Duke</a>.
</div>
<script>
function loadImage(imagePath) {
$("canvas").remove();
$("img").show();
$("img").attr("src", imagePath);
}
function loadUrl() {
var url = prompt("Enter an absolute URL for an image.");
loadImage(url);
}
$(document).ready(function(){
$("input").get(0).addEventListener('change', function() {
$("img").pixelate({
'focus' : 0.01 * this.value
});
}, false);
});
$('.tweet').on('click', function(e){
e.preventDefault();
loc = "http://rawgithub.com/jmduke/jquery.pixelate.js/master/test.html";
text = "jquery.pixelate.js by @justinmduke - why be retina-friendly when you can be SNES-friendly?";
window.open('http://twitter.com/share?url=' + loc + '&text=' + text + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});
</script>
</body>
</html>