-
Notifications
You must be signed in to change notification settings - Fork 0
/
lazythumbs.html
100 lines (79 loc) · 3.05 KB
/
lazythumbs.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.js"></script>'
<script src="js/lazysizes.js">
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
lazySizesConfig.loadMode = 1;
window.lazySizesConfig.expand = 2;
window.lazySizesConfig.expFactor = 1.1;
lazySizesConfig.expFactor = 1.0;
</script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Thumbnails Heading</div>
<div id="mypanel" class="panel-body" style="overflow: auto; height: 600px;">Thumbnails go here</div>
</div>
<button id='makethumb' type="button" class="btn btn-success">Make Thumbnails</button>
<script>
// Similar stuff from e1cscan.js copied so i can test in separate program
var XFER_PORT = 8735;
var XFER_SSL = true; // Also must change https://localhost strings
var XFER_PROTOCOL = XFER_SSL ? 'https' : 'http';
var host = XFER_PROTOCOL + '://winhost:' + XFER_PORT + '/transfer/';
// var host = XFER_PROTOCOL + '://localhost:' + XFER_PORT + '/transfer/'; --- franco use this one localhost
// Make string format
if (!String.format) {
String.format = function(format) {
var args = Array.prototype.slice.call(arguments, 1);
return format.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
}
var count = 0;
var batchDir = 'abc'; // need to use batchDir in e1cscan
$(document).ready(function () {
$('#makethumb').click(
function () {
addthumb(batchDir, ++count);
}
);
$('#mypanel').empty();
var timer = setInterval(function () {
addthumb(batchDir, ++count);
if (count >= 100) {
clearInterval(timer);
}
},
100);
});
// Add next image to the thumbnail panel
function addthumb(batch, imagenum) {
var src = String.format("{0}/image/{1}/{2}/png/150/220/false", host, batch, imagenum);
var div = $('<div style="max-width: 150px; max-height: 220px; margin: 5px 5px 5px 5px; ' +
'border: 0px solid #ddd; display: inline-block;">' +
'<a href="#" class="thumbnail" style="margin-bottom: 0px;">' +
'<img class="lazyload" data-src="' + src + '">' +
'</a>' +
'<div class="caption" style="text-align: center;" >' +
imagenum +
'</div>' +
'</div>');
// Get the panel
var panelbody = $('#mypanel');
panelbody.append(div);
};
</script>
</body>
</html>