|
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
|
<
html
>
其中用到了bootstrap的图片处理，响应式图片属性img-responsive，和图片形状，img-thumbnail
写成 class="img-responsive img-thumbnail"
然后fancybox直接用默认 $("a.grouped_elements").fancybox();
$()这里的是选择器。
<
head
>
<
title
>
</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"source/jquery.fancybox.css?v=2.1.5"
media
=
"screen"
/>
<!-- Add jQuery library -->
<
script
type
=
"text/javascript"
src
=
"lib/jquery-1.10.1.min.js"
></
script
>
<!-- Add mousewheel plugin (this is optional) -->
<
script
type
=
"text/javascript"
src
=
"lib/jquery.mousewheel-3.0.6.pack.js"
></
script
>
<!-- Add fancyBox main JS and CSS files -->
<
script
type
=
"text/javascript"
src
=
"source/jquery.fancybox.js?v=2.1.5"
></
script
>
<!-- Add Media helper (this is optional) -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<
link
rel
=
"stylesheet"
href
=
"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"
>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<
script
src
=
"//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"
></
script
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
/* 最基本的，使用了默认配置 */
$("a.grouped_elements").fancybox();
/* 使用了自定义配置 */
/* 一下配置支持组播放 */
// $("a.grouped_elements").fancybox({
// 'cyclic' : 'false',
// 'titleShow' : 'false'
// });
}); </
script
>
<
p
>
<
table
>
<
tr
>
<
td
><
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp5.jpg_1080x.jpg"
title
=
"title1"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp5.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
><
td
>
<
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp6.jpg_1080x.jpg"
title
=
"title2"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp6.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
>
</
tr
>
<
tr
> <
td
><
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp7.jpg_1080x.jpg"
title
=
"title3"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp7.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
><
td
>
<
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp8.jpg_1080x.jpg"
title
=
"title4"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp8.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
> </
tr
>
<
tr
> <
td
><
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp9.jpg_1080x.jpg"
title
=
"title5"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp9.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
><
td
>
<
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp10.jpg_1080x.jpg"
title
=
"title6"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp10.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
> </
tr
>
<
tr
> <
td
><
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp11.jpg_1080x.jpg"
title
=
"title7"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp11.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
><
td
>
<
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp12.jpg_1080x.jpg"
title
=
"title8"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp12.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
> </
tr
>
<
tr
> <
td
><
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp13.jpg_1080x.jpg"
title
=
"title91"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp13.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
><
td
>
<
a
class
=
"grouped_elements"
rel
=
"group1"
href
=
"http://godfs.3g.cn/soft/wp/wp14.jpg_1080x.jpg"
title
=
"title10"
><
img
src
=
"http://godfs.3g.cn/soft/wp/wp14.jpg_720x.jpg"
alt
=
""
class
=
"img-responsive img-thumbnail"
></
a
> </
td
> </
tr
>
</
table
>
</
p
>
</
body
>
</
html
>
|
参考文档：http://blog.csdn.net/china_skag/article/details/23882281
http://v3.bootcss.com/css/#images-responsive
本文转自 陈小龙哈 51CTO博客，原文链接:http://blog.51cto.com/chenxiaolong/1677709
