blob: fe17f6b0e9dae5d01223cb6a2f87a01dc764ed08 (
plain)
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
|
<!doctype html>
<html>
<head><title>Neighbor JS</title></head>
<style>
#people { height:300px; width: 100%; overflow: hidden; white-space: nowrap; }
#wallpaper { height:300px; width: 100%; overflow: hidden; white-space: nowrap; }
</style>
<body>
<h1>Neighbor.js</h1>
<p>
<b>Neighbor.js</b> resizes images using a nearest neighbor algorithm automatically.
</p>
<code>
$("#people img").neighbor();
</code>
<div id="people">
<img src="people.GIF" width="50">
<img src="people.GIF" width="70">
<img src="people.GIF" width="100">
<img src="people.GIF" width="135">
<img src="people.GIF" width="170">
<img src="people.GIF" width="210">
<img src="people.GIF" width="250">
<img src="people.GIF" width="295">
</div>
<p>
Run it on particular images, or all images automatically.
</p>
<p>
Also use it to put a nearest-neighbor resized image on the background of an element:
</p>
<code>
$("#wallpaper").neighbor({ url: "people2.GIF", scale: "250%" });
</code>
<div id="wallpaper"></div>
<p>
There are two versions:
</p>
<ul>
<li> <a href="jquery.neighbor.js">jquery.neighbor.js</a> supports multiple images, background images, etc
<li> <a href="neighbor.js">neighbor.js</a> does one image at a time (but does not require jquery) - <tt>neighbor("#person")</tt>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.neighbor.js"></script>
<script type="text/javascript">
$("code").each(function(){
eval($(this).html());
});
</script>
</body>
</html>
|
