Skip to content

Commit 3911f49

Browse files
author
banyaner
committed
添加图片展示，还需要改
1 parent 2b19a8c commit 3911f49

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+3140
-0
lines changed

‎PhotoShow/demo/index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>我的照片墙</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6+
7+
<!-- Add jQuery library -->
8+
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
9+
10+
<!-- Add mousewheel plugin (this is optional) -->
11+
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
12+
13+
<!-- Add fancyBox main JS and CSS files -->
14+
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
15+
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
16+
17+
<!-- Add Button helper (this is optional) -->
18+
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
19+
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
20+
21+
<!-- Add Thumbnail helper (this is optional) -->
22+
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
23+
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
24+
25+
<!-- Add Media helper (this is optional) -->
26+
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
27+
28+
<script type="text/javascript">
29+
$(document).ready(function() {
30+
31+
32+
/*
33+
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
34+
*/
35+
36+
$('.fancybox-thumbs').fancybox({
37+
prevEffect : 'none',
38+
nextEffect : 'none',
39+
40+
closeBtn : false,
41+
arrows : false,
42+
nextClick : true,
43+
44+
helpers : {
45+
thumbs : {
46+
width : 50,
47+
height : 50
48+
}
49+
}
50+
});
51+
52+
53+
54+
55+
});
56+
</script>
57+
<style type="text/css">
58+
59+
60+
body {
61+
max-width: 900px;
62+
margin: 0 auto;
63+
background-image: url(../images/bg.jpg);
64+
background-repeat:no-repeat;
65+
background-attachment:fixed;
66+
background-size: cover;
67+
}
68+
69+
.fancybox-thumbs img {
70+
max-width: 250px;
71+
height: auto;
72+
max-height: 200px;
73+
}
74+
p {
75+
text-align: center;
76+
padding: 30px;
77+
background-color: rgba(255,255,255,0.1);
78+
}
79+
#backtop a { /* back to top button */
80+
position: fixed;
81+
bottom: 20px; /* 小按钮到浏览器底边的距离 */
82+
right: 180px; /* 小按钮到浏览器右边框的距离 */
83+
color: white; /* 小按钮中文字的颜色 */
84+
z-index: 1000;
85+
background: #36648B; /* 小按钮底色 */
86+
padding: 10px; /* 小按钮中文字到按钮边缘的距离 */
87+
border-radius: 30px; /* 小按钮圆角的弯曲程度（半径）*/
88+
-moz-border-radius: 4px;
89+
-webkit-border-radius: 4px;
90+
font-weight: normal; /* 小按钮中文字的粗细 */
91+
text-decoration: none !important;
92+
position: fixed;
93+
}
94+
95+
#backtop a:hover { /* 小按钮上有鼠标悬停时 */
96+
background: #333; /* 小按钮的底色 */
97+
color: #fff; /* 文字颜色 */
98+
}
99+
</style>
100+
</head>
101+
<body>
102+
<img src="../images/h1.gif" style="width:400px">
103+
<p>
104+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/0.jpg"><img src="../images/0.jpg" alt="" /></a>
105+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/1.jpg"><img src="../images/1.jpg" alt="" /></a>
106+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/2.jpg"><img src="../images/2.jpg" alt="" /></a>
107+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/3.jpg"><img src="../images/3.jpg" alt="" /></a>
108+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/4.jpg"><img src="../images/4.jpg" alt="" /></a>
109+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/5.jpg"><img src="../images/5.jpg" alt="" /></a>
110+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/6.jpg"><img src="../images/6.jpg" alt="" /></a>
111+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/7.jpg"><img src="../images/7.jpg" alt="" /></a>
112+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/8.jpg"><img src="../images/8.jpg" alt="" /></a>
113+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/9.jpg"><img src="../images/9.jpg" alt="" /></a>
114+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/11.jpg"><img src="../images/11.jpg" alt="" /></a>
115+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/12.jpg"><img src="../images/12.jpg" alt="" /></a>
116+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/13.jpg"><img src="../images/13.jpg" alt="" /></a>
117+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/14.jpg"><img src="../images/14.jpg" alt="" /></a>
118+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/15.jpg"><img src="../images/15.jpg" alt=""/></a>
119+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/16.jpg"><img src="../images/16.jpg" alt="" /></a>
120+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/17.jpg"><img src="../images/17.jpg" alt="" /></a>
121+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/18.jpg" class="large"><img src="../images/18.jpg" alt="" class="large" /></a>
122+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/19.jpg"><img src="../images/19.jpg" alt="" /></a>
123+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/20.jpg"><img src="../images/20.jpg" alt="" /></a>
124+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/21.jpg"><img src="../images/21.jpg" alt="" /></a>
125+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/22.jpg"><img src="../images/22.jpg" alt="" /></a>
126+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/23.jpg"><img src="../images/23.jpg" alt="" /></a>
127+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/24.jpg"><img src="../images/24.jpg" alt="" /></a>
128+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/25.jpg"><img src="../images/25.jpg" alt="" /></a>
129+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/26.jpg"><img src="../images/26.jpg" alt="" /></a>
130+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/27.jpg"><img src="../images/27.jpg" alt="" /></a>
131+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/28.jpg"><img src="../images/28.jpg" alt="" /></a>
132+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/29.jpg"><img src="../images/29.jpg" alt="" /></a>
133+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/30.jpg"><img src="../images/30.jpg" alt="" /></a>
134+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/31.jpg"><img src="../images/31.jpg" alt="" /></a>
135+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/32.jpg"><img src="../images/32.jpg" alt="" /></a>
136+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/33.jpg"><img src="../images/33.jpg" alt="" /></a>
137+
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="../images/34.jpg"><img src="../images/34.jpg" alt="" /></a>
138+
</p>
139+
<div id="backtop"><a href="#">TOP</a></div>
140+
</body>
141+
</html>

‎PhotoShow/images/0.jpg

411 KB

‎PhotoShow/images/1.jpg

322 KB

‎PhotoShow/images/10.jpg

369 KB

‎PhotoShow/images/11.jpg

534 KB

‎PhotoShow/images/12.jpg

423 KB

‎PhotoShow/images/13.jpg

443 KB

‎PhotoShow/images/14.jpg

388 KB

‎PhotoShow/images/140024436253769.gif

3.39 KB

‎PhotoShow/images/15.jpg

116 KB

‎PhotoShow/images/16.jpg

84.5 KB

‎PhotoShow/images/17.jpg

344 KB

‎PhotoShow/images/2.jpg

412 KB

‎PhotoShow/images/20.jpg

212 KB

‎PhotoShow/images/21.jpg

149 KB

‎PhotoShow/images/22.jpg

292 KB

‎PhotoShow/images/23.jpg

182 KB

‎PhotoShow/images/24.jpg

66 KB

‎PhotoShow/images/25.jpg

70 KB

‎PhotoShow/images/26.jpg

124 KB

‎PhotoShow/images/27.jpg

163 KB

‎PhotoShow/images/28.jpg

54.3 KB

‎PhotoShow/images/3.jpg

286 KB

‎PhotoShow/images/30.jpg

77.1 KB

‎PhotoShow/images/31.jpg

63.4 KB

‎PhotoShow/images/32.jpg

139 KB

‎PhotoShow/images/33.jpg

86.5 KB

‎PhotoShow/images/4.jpg

227 KB

‎PhotoShow/images/5.jpg

83.8 KB

‎PhotoShow/images/6.jpg

217 KB

‎PhotoShow/images/7.jpg

475 KB

‎PhotoShow/images/8.jpg

303 KB

‎PhotoShow/images/9.jpg

372 KB

‎PhotoShow/images/QQ图片20140516205314.jpg

14.5 KB

‎PhotoShow/images/bg.jpg

71.7 KB

‎PhotoShow/images/bg.png

65.1 KB

‎PhotoShow/images/h1.gif

7.42 KB

‎PhotoShow/lib/jquery-1.10.1.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎PhotoShow/lib/jquery-1.9.0.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎PhotoShow/lib/jquery.mousewheel-3.0.6.pack.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
2+
* Licensed under the MIT License (LICENSE.txt).
3+
*
4+
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
5+
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
6+
* Thanks to: Seamus Leahy for adding deltaX and deltaY
7+
*
8+
* Version: 3.0.6
9+
*
10+
* Requires: 1.2.2+
11+
*/
12+
(function(d){function e(a){var b=a||window.event,c=[].slice.call(arguments,1),f=0,e=0,g=0,a=d.event.fix(b);a.type="mousewheel";b.wheelDelta&&(f=b.wheelDelta/120);b.detail&&(f=-b.detail/3);g=f;b.axis!==void 0&&b.axis===b.HORIZONTAL_AXIS&&(g=0,e=-1*f);b.wheelDeltaY!==void 0&&(g=b.wheelDeltaY/120);b.wheelDeltaX!==void 0&&(e=-1*b.wheelDeltaX/120);c.unshift(a,f,e,g);return(d.event.dispatch||d.event.handle).apply(this,c)}var c=["DOMMouseScroll","mousewheel"];if(d.event.fixHooks)for(var h=c.length;h;)d.event.fixHooks[c[--h]]=
13+
d.event.mouseHooks;d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],e,false);else this.onmousewheel=e},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],e,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

‎PhotoShow/source/blank.gif

43 Bytes

‎PhotoShow/source/fancybox_loading.gif

6.41 KB

‎PhotoShow/source/[email protected]

13.7 KB

‎PhotoShow/source/fancybox_overlay.png

1003 Bytes

‎PhotoShow/source/fancybox_sprite.png

1.33 KB

‎PhotoShow/source/[email protected]

6.4 KB

‎PhotoShow/source/helpers/fancybox_buttons.png

1.05 KB

‎PhotoShow/source/helpers/jquery.fancybox-buttons.css

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
#fancybox-buttons {
2+
position: fixed;
3+
left: 0;
4+
width: 100%;
5+
z-index: 8050;
6+
}
7+
8+
#fancybox-buttons.top {
9+
top: 10px;
10+
}
11+
12+
#fancybox-buttons.bottom {
13+
bottom: 10px;
14+
}
15+
16+
#fancybox-buttons ul {
17+
display: block;
18+
width: 166px;
19+
height: 30px;
20+
margin: 0 auto;
21+
padding: 0;
22+
list-style: none;
23+
border: 1px solid #111;
24+
border-radius: 3px;
25+
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
26+
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
27+
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
28+
background: rgb(50,50,50);
29+
background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
30+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
31+
background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
32+
background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
33+
background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
34+
background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
35+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
36+
}
37+
38+
#fancybox-buttons ul li {
39+
float: left;
40+
margin: 0;
41+
padding: 0;
42+
}
43+
44+
#fancybox-buttons a {
45+
display: block;
46+
width: 30px;
47+
height: 30px;
48+
text-indent: -9999px;
49+
background-color: transparent;
50+
background-image: url('fancybox_buttons.png');
51+
background-repeat: no-repeat;
52+
outline: none;
53+
opacity: 0.8;
54+
}
55+
56+
#fancybox-buttons a:hover {
57+
opacity: 1;
58+
}
59+
60+
#fancybox-buttons a.btnPrev {
61+
background-position: 5px 0;
62+
}
63+
64+
#fancybox-buttons a.btnNext {
65+
background-position: -33px 0;
66+
border-right: 1px solid #3e3e3e;
67+
}
68+
69+
#fancybox-buttons a.btnPlay {
70+
background-position: 0 -30px;
71+
}
72+
73+
#fancybox-buttons a.btnPlayOn {
74+
background-position: -30px -30px;
75+
}
76+
77+
#fancybox-buttons a.btnToggle {
78+
background-position: 3px -60px;
79+
border-left: 1px solid #111;
80+
border-right: 1px solid #3e3e3e;
81+
width: 35px
82+
}
83+
84+
#fancybox-buttons a.btnToggleOn {
85+
background-position: -27px -60px;
86+
}
87+
88+
#fancybox-buttons a.btnClose {
89+
border-left: 1px solid #111;
90+
width: 35px;
91+
background-position: -56px 0px;
92+
}
93+
94+
#fancybox-buttons a.btnDisabled {
95+
opacity : 0.4;
96+
cursor: default;
97+
}

‎PhotoShow/source/helpers/jquery.fancybox-buttons.js

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/*!
2+
* Buttons helper for fancyBox
3+
* version: 1.0.5 (Mon, 15 Oct 2012)
4+
* @requires fancyBox v2.0 or later
5+
*
6+
* Usage:
7+
* $(".fancybox").fancybox({
8+
* helpers : {
9+
* buttons: {
10+
* position : 'top'
11+
* }
12+
* }
13+
* });
14+
*
15+
*/
16+
(function ($) {
17+
//Shortcut for fancyBox object
18+
var F = $.fancybox;
19+
20+
//Add helper object
21+
F.helpers.buttons = {
22+
defaults : {
23+
skipSingle : false, // disables if gallery contains single image
24+
position : 'top', // 'top' or 'bottom'
25+
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
26+
},
27+
28+
list : null,
29+
buttons: null,
30+
31+
beforeLoad: function (opts, obj) {
32+
//Remove self if gallery do not have at least two items
33+
34+
if (opts.skipSingle && obj.group.length < 2) {
35+
obj.helpers.buttons = false;
36+
obj.closeBtn = true;
37+
38+
return;
39+
}
40+
41+
//Increase top margin to give space for buttons
42+
obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
43+
},
44+
45+
onPlayStart: function () {
46+
if (this.buttons) {
47+
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
48+
}
49+
},
50+
51+
onPlayEnd: function () {
52+
if (this.buttons) {
53+
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
54+
}
55+
},
56+
57+
afterShow: function (opts, obj) {
58+
var buttons = this.buttons;
59+
60+
if (!buttons) {
61+
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
62+
63+
buttons = {
64+
prev : this.list.find('.btnPrev').click( F.prev ),
65+
next : this.list.find('.btnNext').click( F.next ),
66+
play : this.list.find('.btnPlay').click( F.play ),
67+
toggle : this.list.find('.btnToggle').click( F.toggle ),
68+
close : this.list.find('.btnClose').click( F.close )
69+
}
70+
}
71+
72+
//Prev
73+
if (obj.index > 0 || obj.loop) {
74+
buttons.prev.removeClass('btnDisabled');
75+
} else {
76+
buttons.prev.addClass('btnDisabled');
77+
}
78+
79+
//Next / Play
80+
if (obj.loop || obj.index < obj.group.length - 1) {
81+
buttons.next.removeClass('btnDisabled');
82+
buttons.play.removeClass('btnDisabled');
83+
84+
} else {
85+
buttons.next.addClass('btnDisabled');
86+
buttons.play.addClass('btnDisabled');
87+
}
88+
89+
this.buttons = buttons;
90+
91+
this.onUpdate(opts, obj);
92+
},
93+
94+
onUpdate: function (opts, obj) {
95+
var toggle;
96+
97+
if (!this.buttons) {
98+
return;
99+
}
100+
101+
toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
102+
103+
//Size toggle button
104+
if (obj.canShrink) {
105+
toggle.addClass('btnToggleOn');
106+
107+
} else if (!obj.canExpand) {
108+
toggle.addClass('btnDisabled');
109+
}
110+
},
111+
112+
beforeClose: function () {
113+
if (this.list) {
114+
this.list.remove();
115+
}
116+
117+
this.list = null;
118+
this.buttons = null;
119+
}
120+
};
121+
122+
}(jQuery));

0 commit comments

Comments
 (0)