-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample_usage.htm
130 lines (111 loc) · 3.66 KB
/
example_usage.htm
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="dynamicImage.min.js"></script>
<style>
div.viewBlocker {
min-height: 110vh
}
</style>
</head>
<body>
<div class="viewBlocker">
<p>Scroll down!</p>
<p>The images is out of view and is therefor not yet loaded. They will load as soon as they are in view.</p>
<p>These images has a width relative to the page width. Every image has multiple resolution source alternatives and the most suitable version is automatically loaded when page width is changed. More precisely, a version of the image with higher resolution is loaded when page width and thereby also the image width is enlarged.</p>
</div>
<div id="resizableArea"></div>
<script>
var sources = [{
width: 100,
src: "photos/scaled_100.jpg"
}, {
width: 150,
src: "photos/scaled_150.jpg"
}, {
width: 200,
src: "photos/scaled_200.jpg"
}, {
width: 300,
src: "photos/scaled_300.jpg"
}, {
width: 500,
src: "photos/scaled_500.jpg"
}, {
width: 750,
src: "photos/scaled_750.jpg"
}, {
width: 1000,
src: "photos/scaled_1000.jpg"
}, {
width: 1500,
src: "photos/scaled_1500.jpg"
}, {
width: 2000,
src: "photos/scaled_2000.jpg"
}, {
width: 3008,
src: "photos/original_3008.jpg"
}];
new DynamicImage()
.sources(sources)
.appendTo("resizableArea")
.width('40vw')
.height('30vw')
.update();
new DynamicImage(100)
.sources(sources)
.appendTo("resizableArea")
.width('25%')
.heightAsPixelRatioOfWidth(0.75)
.update();
new DynamicImage()
.sources(sources)
.appendTo("resizableArea")
.width('12vw')
.height('9vw')
.update();
new DynamicImage()
.sources(sources)
.appendTo("resizableArea")
.width('8vw')
.height('6vw')
.update();
new DynamicImage()
.sources(sources)
.appendTo("resizableArea")
.width('4vw')
.height('3vw')
.update();
</script>
<hr>
<div class="viewBlocker">
<p>Last images have a fixed size and is just used as a lazy image loader. No resolution alternatives are used. A usage scenario could be delayed loading of images or thumbnails in a large web page.</p>
<p>It is possible to obtain the image element created by a DynamicImage instance, for further image manipulation. Try clicking the rotated image.</p>
</div>
<div id="thumbArea"></div>
<script>
new DynamicImage()
.singleSource("photos/scaled_100.jpg")
.appendTo("thumbArea")
.width('100px')
.height('75px')
.update();
var di = new DynamicImage()
.singleSource("photos/scaled_100.jpg")
.width('100px')
.height('75px');
// alternative way to add image
var elem = di.getElement();
var parent = document.getElementById("thumbArea");
parent.appendChild(elem);
// further manipulation
elem.onclick = function () {
alert("clicked");
};
elem.style.padding = "2em";
elem.style.transform = "rotate(40deg)";
</script>
</body>
</html>