slideshow.js
5.64 KB
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
jQuery.fn.slideShow = function (container, start, options) {
var i, images = [], settings;
start = start || 0;
settings = jQuery.extend({
'interval': 5000,
'play' : true,
'maxScale': 2
}, options);
jQuery.fn.slideShow.container = container;
jQuery.fn.slideShow.settings = settings;
jQuery.fn.slideShow.current = start;
for (i = 0; i < this.length; i++) {
images.push(this[i].href);
}
container.children('img').remove();
container.show();
jQuery.fn.slideShow.images = images;
jQuery.fn.slideShow.cache = [];
jQuery.fn.slideShow.showImage(images[start], images[start + 1]);
jQuery.fn.slideShow.progressBar = container.find('.progress');
jQuery(window).resize(function () {
jQuery.fn.slideShow.loadImage(jQuery.fn.slideShow.images[jQuery.fn.slideShow.current]).then(function (image) {
jQuery.fn.slideShow.fitImage(container, image);
});
});
return jQuery.fn.slideShow;
};
jQuery.fn.slideShow.progressBar = null;
jQuery.fn.slideShow.loadImage = function (url) {
if (!jQuery.fn.slideShow.cache[url]) {
jQuery.fn.slideShow.cache[url] = new jQuery.Deferred();
var image = new Image();
jQuery.fn.slideShow.cache[url].fail(function (u) {
image = false;
jQuery.fn.slideShow.cache[url] = false;
});
image.onload = function () {
if (image) {
image.natWidth = image.width;
image.natHeight = image.height;
}
if (jQuery.fn.slideShow.cache[url]) {
jQuery.fn.slideShow.cache[url].resolve(image);
}
};
image.onerror = function () {
if (jQuery.fn.slideShow.cache[url]) {
jQuery.fn.slideShow.cache[url].reject(url);
}
};
image.src = url;
}
return jQuery.fn.slideShow.cache[url];
};
jQuery.fn.slideShow.fitImage = function (container, image) {
var ratio = image.natWidth / image.natHeight,
screenRatio = container.width() / container.height(),
width = null, height = null, top = null;
if (ratio > screenRatio) {
if (container.width() > image.natWidth * jQuery.fn.slideShow.settings.maxScale) {
top = ((container.height() - image.natHeight) / 2) + 'px';
height = image.natHeight + 'px';
width = image.natWidth + 'px';
} else {
width = container.width() + 'px';
height = (container.width() / ratio) + 'px';
top = ((container.height() - (container.width() / ratio)) / 2) + 'px';
}
} else {
if (container.height() > image.natHeight * jQuery.fn.slideShow.settings.maxScale) {
top = ((container.height() - image.natHeight) / 2) + 'px';
height = image.natHeight + 'px';
width = image.natWidth + 'px';
} else {
top = 0;
height = container.height() + 'px';
width = (container.height() * ratio) + "px";
}
}
jQuery(image).css({
top : top,
width : width,
height: height
});
};
jQuery.fn.slideShow.showImage = function (url, preloadUrl) {
var container = jQuery.fn.slideShow.container;
container.css('background-position', 'center');
jQuery.fn.slideShow.loadImage(url).then(function (image) {
container.css('background-position', '-10000px 0');
if (url === jQuery.fn.slideShow.images[jQuery.fn.slideShow.current]) {
container.children('img').remove();
container.append(image);
jQuery.fn.slideShow.fitImage(container, image);
if (jQuery.fn.slideShow.settings.play) {
jQuery.fn.slideShow.setTimeout();
}
if (preloadUrl) {
jQuery.fn.slideShow.loadImage(preloadUrl);
}
}
});
};
jQuery.fn.slideShow.play = function () {
if (jQuery.fn.slideShow.settings) {
jQuery.fn.slideShow.settings.play = true;
jQuery.fn.slideShow.setTimeout();
}
};
jQuery.fn.slideShow.pause = function () {
if (jQuery.fn.slideShow.settings) {
jQuery.fn.slideShow.settings.play = false;
jQuery.fn.slideShow.clearTimeout();
}
};
jQuery.fn.slideShow.setTimeout = function () {
jQuery.fn.slideShow.clearTimeout();
jQuery.fn.slideShow.timeout = setTimeout(jQuery.fn.slideShow.next, jQuery.fn.slideShow.settings.interval);
jQuery.fn.slideShow.progressBar.stop();
jQuery.fn.slideShow.progressBar.css('height', '6px');
jQuery.fn.slideShow.progressBar.animate({'height': '26px'}, jQuery.fn.slideShow.settings.interval, 'linear');
};
jQuery.fn.slideShow.clearTimeout = function () {
if (jQuery.fn.slideShow.timeout) {
clearTimeout(jQuery.fn.slideShow.timeout);
}
jQuery.fn.slideShow.progressBar.stop();
jQuery.fn.slideShow.progressBar.css('height', '6px');
jQuery.fn.slideShow.timeout = 0;
};
jQuery.fn.slideShow.next = function () {
if (jQuery.fn.slideShow.container) {
jQuery.fn.slideShow.current++;
if (jQuery.fn.slideShow.current >= jQuery.fn.slideShow.images.length) {
jQuery.fn.slideShow.current = 0;
}
var image = jQuery.fn.slideShow.images[jQuery.fn.slideShow.current],
nextImage = jQuery.fn.slideShow.images[(jQuery.fn.slideShow.current + 1) % jQuery.fn.slideShow.images.length];
jQuery.fn.slideShow.showImage(image, nextImage);
}
};
jQuery.fn.slideShow.previous = function () {
if (jQuery.fn.slideShow.container) {
jQuery.fn.slideShow.current--;
if (jQuery.fn.slideShow.current < 0) {
jQuery.fn.slideShow.current = jQuery.fn.slideShow.images.length - 1;
}
var image = jQuery.fn.slideShow.images[jQuery.fn.slideShow.current],
previousImage = jQuery.fn.slideShow.images[(jQuery.fn.slideShow.current - 1 + jQuery.fn.slideShow.images.length) % jQuery.fn.slideShow.images.length];
jQuery.fn.slideShow.showImage(image, previousImage);
}
};
jQuery.fn.slideShow.stop = function () {
if (jQuery.fn.slideShow.container) {
jQuery.fn.slideShow.container.hide();
jQuery.fn.slideShow.container = null;
if (jQuery.fn.slideShow.onstop) {
jQuery.fn.slideShow.onstop();
}
}
};
jQuery.fn.slideShow.hideImage = function () {
var container = jQuery.fn.slideShow.container;
if (container) {
container.children('img').remove();
}
};
jQuery.fn.slideShow.onstop = null;