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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
|
/*
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.2.7
Theme : Shutter 1.1
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
*/
(function($){
theme = {
/* Initial Placement
----------------------------*/
_init : function(){
// Center Slide Links
if (api.options.slide_links) $(vars.slide_list).css('margin-left', -$(vars.slide_list).width()/2);
// Start progressbar if autoplay enabled
if (api.options.autoplay){
if (api.options.progress_bar) theme.progressBar();
}else{
if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "play.png"); // If pause play button is image, swap src
if (api.options.progress_bar) $(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 ); // Place progress bar
}
/* Thumbnail Tray
----------------------------*/
// Hide tray off screen
$(vars.thumb_tray).animate({bottom : -$(vars.thumb_tray).height()}, 0 );
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
// Make thumb tray proper size
$(vars.thumb_list).width($('> li', vars.thumb_list).length * $('> li', vars.thumb_list).outerWidth(true)); //Adjust to true width of thumb markers
// Display total slides
if ($(vars.slide_total).length){
$(vars.slide_total).html(api.options.slides.length);
}
/* Thumbnail Tray Navigation
----------------------------*/
if (api.options.thumb_links){
//Hide thumb arrows if not needed
if ($(vars.thumb_list).width() <= $(vars.thumb_tray).width()){
$(vars.thumb_back +','+vars.thumb_forward).fadeOut(0);
}
// Thumb Intervals
vars.thumb_interval = Math.floor($(vars.thumb_tray).width() / $('> li', vars.thumb_list).outerWidth(true)) * $('> li', vars.thumb_list).outerWidth(true);
vars.thumb_page = 0;
// Cycle thumbs forward
$(vars.thumb_forward).click(function(){
if (vars.thumb_page - vars.thumb_interval <= -$(vars.thumb_list).width()){
vars.thumb_page = 0;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}else{
vars.thumb_page = vars.thumb_page - vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}
});
// Cycle thumbs backwards
$(vars.thumb_back).click(function(){
if (vars.thumb_page + vars.thumb_interval > 0){
vars.thumb_page = Math.floor($(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval;
if ($(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}else{
vars.thumb_page = vars.thumb_page + vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}
});
}
/* Navigation Items
----------------------------*/
$(vars.next_slide).click(function() {
api.nextSlide();
});
$(vars.prev_slide).click(function() {
api.prevSlide();
});
// Full Opacity on Hover
if(jQuery.support.opacity){
$(vars.prev_slide +','+vars.next_slide).mouseover(function() {
$(this).stop().animate({opacity:1},100);
}).mouseout(function(){
$(this).stop().animate({opacity:0.6},100);
});
}
if (api.options.thumbnail_navigation){
// Next thumbnail clicked
$(vars.next_thumb).click(function() {
api.nextSlide();
});
// Previous thumbnail clicked
$(vars.prev_thumb).click(function() {
api.prevSlide();
});
}
$(vars.play_button).click(function() {
api.playToggle();
});
/* Thumbnail Mouse Scrub
----------------------------*/
if (api.options.mouse_scrub){
$(vars.thumb_tray).mousemove(function(e) {
var containerWidth = $(vars.thumb_tray).width(),
listWidth = $(vars.thumb_list).width();
if (listWidth > containerWidth){
var mousePos = 1,
diff = e.pageX - mousePos;
if (diff > 10 || diff < -10) {
mousePos = e.pageX;
newX = (containerWidth - listWidth) * (e.pageX/containerWidth);
diff = parseInt(Math.abs(parseInt($(vars.thumb_list).css('left'))-newX )).toFixed(0);
$(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*3, easing:'easeOutExpo'});
}
}
});
}
/* Window Resize
----------------------------*/
$(window).resize(function(){
// Delay progress bar on resize
if (api.options.progress_bar && !vars.in_animation){
if (vars.slideshow_interval) clearInterval(vars.slideshow_interval);
if (api.options.slides.length - 1 > 0) clearInterval(vars.slideshow_interval);
$(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
if (!vars.progressDelay && api.options.slideshow){
// Delay slideshow from resuming so Chrome can refocus images
vars.progressDelay = setTimeout(function() {
if (!vars.is_paused){
theme.progressBar();
vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval);
}
vars.progressDelay = false;
}, 1000);
}
}
// Thumb Links
if (api.options.thumb_links && vars.thumb_tray.length){
// Update Thumb Interval & Page
vars.thumb_page = 0;
vars.thumb_interval = Math.floor($(vars.thumb_tray).width() / $('> li', vars.thumb_list).outerWidth(true)) * $('> li', vars.thumb_list).outerWidth(true);
// Adjust thumbnail markers
if ($(vars.thumb_list).width() > $(vars.thumb_tray).width()){
$(vars.thumb_back +','+vars.thumb_forward).fadeIn('fast');
$(vars.thumb_list).stop().animate({'left':0}, 200);
}else{
$(vars.thumb_back +','+vars.thumb_forward).fadeOut('fast');
}
}
});
},
/* Go To Slide
----------------------------*/
goTo : function(){
if (api.options.progress_bar && !vars.is_paused){
$(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
theme.progressBar();
}
},
/* Play & Pause Toggle
----------------------------*/
playToggle : function(state){
if (state =='play'){
// If image, swap to pause
if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "pause.png");
if (api.options.progress_bar && !vars.is_paused) theme.progressBar();
}else if (state == 'pause'){
// If image, swap to play
if ($(vars.play_button).attr('src')) $(vars.play_button).attr("src", vars.image_path + "play.png");
if (api.options.progress_bar && vars.is_paused)$(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
}
},
/* Before Slide Transition
----------------------------*/
beforeAnimation : function(direction){
if (api.options.progress_bar && !vars.is_paused) $(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 );
/* Update Fields
----------------------------*/
// Update slide caption
if ($(vars.slide_caption).length){
(api.getField('title')) ? $(vars.slide_caption).html(api.getField('title')) : $(vars.slide_caption).html('');
}
// Update slide number
if (vars.slide_current.length){
$(vars.slide_current).html(vars.current_slide + 1);
}
// Highlight current thumbnail and adjust row position
if (api.options.thumb_links){
$('.current-thumb').removeClass('current-thumb');
$('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb');
// If thumb out of view
if ($(vars.thumb_list).width() > $(vars.thumb_tray).width()){
// If next slide direction
if (direction == 'next'){
if (vars.current_slide == 0){
vars.thumb_page = 0;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
} else if ($('.current-thumb').offset().left - $(vars.thumb_tray).offset().left >= vars.thumb_interval){
vars.thumb_page = vars.thumb_page - vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}
// If previous slide direction
}else if(direction == 'prev'){
if (vars.current_slide == api.options.slides.length - 1){
vars.thumb_page = Math.floor($(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval;
if ($(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
} else if ($('.current-thumb').offset().left - $(vars.thumb_tray).offset().left < 0){
if (vars.thumb_page + vars.thumb_interval > 0) return false;
vars.thumb_page = vars.thumb_page + vars.thumb_interval;
$(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'easeOutExpo'});
}
}
}
}
},
/* After Slide Transition
----------------------------*/
afterAnimation : function(){
if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar
},
/* Progress Bar
----------------------------*/
progressBar : function(){
$(vars.progress_bar).stop().animate({left : -$(window).width()}, 0 ).animate({left:0}, api.options.slide_interval);
}
};
/* Theme Specific Variables
----------------------------*/
$.supersized.themeVars = {
// Internal Variables
progress_delay : false, // Delay after resize before resuming slideshow
thumb_page : false, // Thumbnail page
thumb_interval : false, // Thumbnail interval
image_path : OC.webroot+"/apps/gallery/img/supersized/", // Default image path
// General Elements
play_button : '#pauseplay', // Play/Pause button
next_slide : '#nextslide', // Next slide button
prev_slide : '#prevslide', // Prev slide button
next_thumb : '#nextthumb', // Next slide thumb button
prev_thumb : '#prevthumb', // Prev slide thumb button
slide_caption : '#slidecaption', // Slide caption
slide_current : '.slidenumber', // Current slide number
slide_total : '.totalslides', // Total Slides
slide_list : '#slide-list', // Slide jump list
thumb_tray : '#thumb-tray', // Thumbnail tray
thumb_list : '#thumb-list', // Thumbnail list
thumb_forward : '#thumb-forward', // Cycles forward through thumbnail list
thumb_back : '#thumb-back', // Cycles backwards through thumbnail list
tray_arrow : '#tray-arrow', // Thumbnail tray button arrow
tray_button : '#tray-button', // Thumbnail tray button
progress_bar : '#progress-bar' // Progress bar
};
/* Theme Specific Options
----------------------------*/
$.supersized.themeOptions = {
progress_bar : 1, // Timer for each slide
mouse_scrub : 0 // Thumbnails move with mouse
};
})(jQuery);
|
