-
Notifications
You must be signed in to change notification settings - Fork 130
/
index.html
98 lines (94 loc) · 2.52 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PreviewImage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
body{
width: 375px;
max-width: 375px;
text-align: center;
}
.imgs-box img {
width: 50%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h3>Click this images to preview</h3>
<div class="imgs-box" id="img_box">
<img src="image/1.jpg" alt="">
<img src="image/2.jpg" alt="">
<img src="image/3.jpg" alt="">
</div>
</body>
<script src="dist/md5.js"></script>
<!-- <script src="src/previewImage.js"></script> -->
<script src="dist/previewImage.min.js"></script>
<script>
var $ = {};
/**
* get multiple elements
* @public
*/
$.all = function(selector, contextElement) {
var nodeList,
list = [];
if (contextElement) {
nodeList = contextElement.querySelectorAll(selector);
} else {
nodeList = document.querySelectorAll(selector);
}
if (nodeList && nodeList.length > 0) {
list = Array.prototype.slice.call(nodeList);
}
return list;
}
/**
* delegate an event to a parent element
* @public
* @param array $el parent element
* @param string eventType name of the event
* @param string selector target's selector
* @param function fn
*/
$.delegate = function($el, eventType, selector, fn) {
if (!$el) { return; }
$el.addEventListener(eventType, function(e) {
var targets = $.all(selector, $el);
if (!targets) {
return;
}
// findTarget:
for (var i=0; i<targets.length; i++) {
var $node = e.target;
while ($node) {
if ($node == targets[i]) {
fn.call($node, e);
break; //findTarget;
}
$node = $node.parentNode;
if ($node == $el) {
break;
}
}
}
}, false);
};
var urls = [];
var imgs = $.all('img',$.all('#img_box')[0]);
imgs.forEach(function(v,i){
urls.push(v.src);
})
$.delegate(document.querySelector('#img_box'), 'click','img',function(){
var current = this.src;
var obj = {
urls : urls,
current : current
};
previewImage.start(obj);
});
</script>
</html>