-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (100 loc) · 3.96 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html" />
<!-- 指定以最新的IE版本模式来显示网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对360浏览器的内核调用,强制调用极速模式 -->
<meta name="renderer" content="webkit" />
<!--[if lt IE 10]>
<meta name="renderer" content="ie-stand" />
<![endif]-->
<!--[if !IE]>
<meta name="renderer" content="ie-stand" />
<!<![endif]-->
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="js/bootstrap/html5shiv.js"></script>
<![endif]-->
<!-- 确保设备能正常显示响应式页面 -->
<!-- 告诉webkit内核浏览器初始缩放比例为1 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 判断浏览器版本.IE8以下版本,bootstrap支持不了.加个提示 -->
<!--[if IE]>
<!--[if IE 6]>
<div class="ie"></div>
<![endif]-->
<!-- 判断浏览器版本IE6以下版本 -->
<!--[if lt IE 6]>
<div class="ie"></div>
<![endif]-->
<!--[if IE 7]>
<div class="ie"></div>
<![endif]-->
<title>FancyBox图片浏览,选中功能</title>
<!-- 更换第三方图标库,Font Awesome <i class="icon-magic">-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/index.css?t=sssss" rel="stylesheet">
<!-- <link href="css/style.css?t=mm" rel="stylesheet" > -->
<script src="js/bootstrap/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
<script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
<script src="js/bootstrap/ie-emulation-modes-warning.js"></script> -->
<!-- 对IE低版本的一个小技巧.禁止在IE模式下,直接本地文件浏览 -->
<!--[if lt IE 9]>
<script src="js/bootstrap/ie8-responsive-file-warning.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.fancybox.js?t=sss"></script>
<!--缩略图样式-->
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="js/qwebchannel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var arr= new Array();
for(var i=1;i<=15;i++)
{
arr.push("testphotos/"+i+".jpg");
}
var htmlArr = new Array();
for (var i = 0; i < arr.length; i++) {
var imgUrl = arr[i];
htmlArr.push("<li><img class=\"fancybox-thumbs\" data-fancybox-group=\"thumb\" href=\""+imgUrl+"\" src=\""+imgUrl+"\" /><a title=\"选择\" class=\"item-unselected\" data-href=\""+imgUrl+"\" href=\"javascript:;\"></a></li>");
}
var linsAHtml = htmlArr.join("");
$("#container").html(linsAHtml);
$('.fancybox-thumbs').fancybox({
prevEffect: 'none',
nextEffect: 'none',
container:"container",
closeBtn: false,
selectedBtn: true,
arrows: false,
nextClick: true,
isCanClose: true,
helpers: {
thumbs: {
width: 120,
height: 70
}
},
clickImgCallback: function (arr, selectedImg) { //选中图片的回调用
//debugger;
var images = arr.join("\n");
},
css:"height:auto"
});
if (htmlArr.length > 0) {
$($("#container").find("img")[0]).trigger("click");
}
});
</script>
</head>
<body>
<ul id="container" class="container" >
</ul>
</body>
</html>