refinerycms-jquery_gallery 1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/assets/images/gallery_view/btnCarouselNext.gif +0 -0
- data/app/assets/images/gallery_view/btnCarouselPrev.gif +0 -0
- data/app/assets/images/gallery_view/loader.gif +0 -0
- data/app/assets/images/gallery_view/themes/dark/next.gif +0 -0
- data/app/assets/images/gallery_view/themes/dark/panel-nav-next.gif +0 -0
- data/app/assets/images/gallery_view/themes/dark/panel-nav-prev.gif +0 -0
- data/app/assets/images/gallery_view/themes/dark/prev.gif +0 -0
- data/app/assets/images/gallery_view/themes/light/next.gif +0 -0
- data/app/assets/images/gallery_view/themes/light/panel-nav-next.gif +0 -0
- data/app/assets/images/gallery_view/themes/light/panel-nav-prev.gif +0 -0
- data/app/assets/images/gallery_view/themes/light/prev.gif +0 -0
- data/app/assets/javascripts/enable_galleries.js +9 -0
- data/app/assets/javascripts/gallery_view/jquery.galleryview-2.1.1.js +1042 -0
- data/app/assets/javascripts/gallery_view/jquery.timers-1.2.js +138 -0
- data/app/assets/javascripts/refinerycms_jquery_gallery.js +2 -0
- data/app/assets/stylesheets/refinerycms_jquery_gallery.css.scss +38 -0
- data/app/views/refinery/jquery_gallery/_gallery.html.haml +18 -0
- data/lib/refinery/jquery_gallery.rb +15 -0
- data/lib/refinery/jquery_gallery/engine.rb +12 -0
- data/lib/refinerycms-jquery_gallery.rb +1 -0
- data/readme.md +41 -0
- metadata +88 -0
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,1042 @@
|
|
1
|
+
/*
|
2
|
+
**
|
3
|
+
** GalleryView - jQuery Content Gallery Plugin
|
4
|
+
** Author: Jack Anderson
|
5
|
+
** Version: 2.1 (March 14, 2010)
|
6
|
+
**
|
7
|
+
** Please use this development script if you intend to make changes to the
|
8
|
+
** plugin code. For production sites, please use jquery.galleryview-2.1-pack.js.
|
9
|
+
**
|
10
|
+
** See README.txt for instructions on how to markup your HTML
|
11
|
+
**
|
12
|
+
** See CHANGELOG.txt for a review of changes and LICENSE.txt for the applicable
|
13
|
+
** licensing information.
|
14
|
+
**
|
15
|
+
*/
|
16
|
+
|
17
|
+
//Global variable to check if window is already loaded
|
18
|
+
//Used for calling GalleryView after page has loaded
|
19
|
+
var window_loaded = false;
|
20
|
+
|
21
|
+
(function($){
|
22
|
+
$.fn.galleryView = function(options) {
|
23
|
+
var opts = $.extend($.fn.galleryView.defaults,options);
|
24
|
+
|
25
|
+
var id;
|
26
|
+
var iterator = 0; // INT - Currently visible panel/frame
|
27
|
+
var item_count = 0; // INT - Total number of panels/frames
|
28
|
+
var slide_method; // STRING - indicator to slide entire filmstrip or just the pointer ('strip','pointer')
|
29
|
+
var theme_path; // STRING - relative path to theme directory
|
30
|
+
var paused = false; // BOOLEAN - flag to indicate whether automated transitions are active
|
31
|
+
|
32
|
+
// Element dimensions
|
33
|
+
var gallery_width;
|
34
|
+
var gallery_height;
|
35
|
+
var pointer_height;
|
36
|
+
var pointer_width;
|
37
|
+
var strip_width;
|
38
|
+
var strip_height;
|
39
|
+
var wrapper_width;
|
40
|
+
var f_frame_width;
|
41
|
+
var f_frame_height;
|
42
|
+
var frame_caption_size = 20;
|
43
|
+
var gallery_padding;
|
44
|
+
var filmstrip_margin;
|
45
|
+
var filmstrip_orientation;
|
46
|
+
|
47
|
+
|
48
|
+
// Arrays used to scale frames and panels
|
49
|
+
var frame_img_scale = {};
|
50
|
+
var panel_img_scale = {};
|
51
|
+
var img_h = {};
|
52
|
+
var img_w = {};
|
53
|
+
|
54
|
+
// Flag indicating whether to scale panel images
|
55
|
+
var scale_panel_images = true;
|
56
|
+
|
57
|
+
var panel_nav_displayed = false;
|
58
|
+
|
59
|
+
// Define jQuery objects for reuse
|
60
|
+
var j_gallery;
|
61
|
+
var j_filmstrip;
|
62
|
+
var j_frames;
|
63
|
+
var j_frame_img_wrappers;
|
64
|
+
var j_panels;
|
65
|
+
var j_pointer;
|
66
|
+
|
67
|
+
|
68
|
+
/*
|
69
|
+
** Plugin Functions
|
70
|
+
*/
|
71
|
+
|
72
|
+
/*
|
73
|
+
** showItem(int)
|
74
|
+
** Transition from current frame to frame i (1-based index)
|
75
|
+
*/
|
76
|
+
function showItem(i) {
|
77
|
+
// Disable next/prev buttons until transition is complete
|
78
|
+
// This prevents overlapping of animations
|
79
|
+
$('.nav-next-overlay',j_gallery).unbind('click');
|
80
|
+
$('.nav-prev-overlay',j_gallery).unbind('click');
|
81
|
+
$('.nav-next',j_gallery).unbind('click');
|
82
|
+
$('.nav-prev',j_gallery).unbind('click');
|
83
|
+
j_frames.unbind('click');
|
84
|
+
|
85
|
+
if(opts.show_filmstrip) {
|
86
|
+
// Fade out all frames
|
87
|
+
j_frames.removeClass('current').find('img').stop().animate({
|
88
|
+
'opacity':opts.frame_opacity
|
89
|
+
},opts.transition_speed);
|
90
|
+
// Fade in target frame
|
91
|
+
j_frames.eq(i).addClass('current').find('img').stop().animate({
|
92
|
+
'opacity':1.0
|
93
|
+
},opts.transition_speed);
|
94
|
+
}
|
95
|
+
|
96
|
+
//If necessary, fade out all panels while fading in target panel
|
97
|
+
if(opts.show_panels && opts.fade_panels) {
|
98
|
+
j_panels.fadeOut(opts.transition_speed).eq(i%item_count).fadeIn(opts.transition_speed,function(){
|
99
|
+
//If no filmstrip exists, re-bind click events to navigation buttons
|
100
|
+
if(!opts.show_filmstrip) {
|
101
|
+
$('.nav-prev-overlay',j_gallery).click(showPrevItem);
|
102
|
+
$('.nav-next-overlay',j_gallery).click(showNextItem);
|
103
|
+
$('.nav-prev',j_gallery).click(showPrevItem);
|
104
|
+
$('.nav-next',j_gallery).click(showNextItem);
|
105
|
+
}
|
106
|
+
});
|
107
|
+
}
|
108
|
+
|
109
|
+
// If gallery has a filmstrip, handle animation of frames
|
110
|
+
if(opts.show_filmstrip) {
|
111
|
+
// Slide either pointer or filmstrip, depending on transition method
|
112
|
+
if(slide_method=='strip') {
|
113
|
+
// Stop filmstrip if it's currently in motion
|
114
|
+
j_filmstrip.stop();
|
115
|
+
var distance;
|
116
|
+
var diststr;
|
117
|
+
if(filmstrip_orientation=='horizontal') {
|
118
|
+
// Determine distance between pointer (eventual destination) and target frame
|
119
|
+
distance = getPos(j_frames[i]).left - (getPos(j_pointer[0]).left+(pointer_width/2)-(f_frame_width/2));
|
120
|
+
diststr = (distance>=0?'-=':'+=')+Math.abs(distance)+'px';
|
121
|
+
|
122
|
+
// Animate filmstrip and slide target frame under pointer
|
123
|
+
j_filmstrip.animate({
|
124
|
+
'left':diststr
|
125
|
+
},opts.transition_speed,opts.easing,function(){
|
126
|
+
var old_i = i;
|
127
|
+
// After transition is complete, shift filmstrip so that a sufficient number of frames
|
128
|
+
// remain on either side of the visible filmstrip
|
129
|
+
if(i>item_count) {
|
130
|
+
i = i%item_count;
|
131
|
+
iterator = i;
|
132
|
+
j_filmstrip.css('left','-'+((f_frame_width+opts.frame_gap)*i)+'px');
|
133
|
+
} else if (i<=(item_count-strip_size)) {
|
134
|
+
i = (i%item_count)+item_count;
|
135
|
+
iterator = i;
|
136
|
+
j_filmstrip.css('left','-'+((f_frame_width+opts.frame_gap)*i)+'px');
|
137
|
+
}
|
138
|
+
// If the target frame has changed due to filmstrip shifting,
|
139
|
+
// make sure new target frame has 'current' class and correct size/opacity settings
|
140
|
+
if(old_i != i) {
|
141
|
+
j_frames.eq(old_i).removeClass('current').find('img').css({
|
142
|
+
'opacity':opts.frame_opacity
|
143
|
+
});
|
144
|
+
j_frames.eq(i).addClass('current').find('img').css({
|
145
|
+
'opacity':1.0
|
146
|
+
});
|
147
|
+
}
|
148
|
+
// If panels are not set to fade in/out, simply hide all panels and show the target panel
|
149
|
+
if(!opts.fade_panels) {
|
150
|
+
j_panels.hide().eq(i%item_count).show();
|
151
|
+
}
|
152
|
+
|
153
|
+
// Once animation is complete, re-bind click events to navigation buttons
|
154
|
+
$('.nav-prev-overlay',j_gallery).click(showPrevItem);
|
155
|
+
$('.nav-next-overlay',j_gallery).click(showNextItem);
|
156
|
+
$('.nav-prev',j_gallery).click(showPrevItem);
|
157
|
+
$('.nav-next',j_gallery).click(showNextItem);
|
158
|
+
enableFrameClicking();
|
159
|
+
});
|
160
|
+
} else { // filmstrip_orientation == 'vertical'
|
161
|
+
//Determine distance between pointer (eventual destination) and target frame
|
162
|
+
distance = getPos(j_frames[i]).top - (getPos(j_pointer[0]).top+(pointer_height)-(f_frame_height/2));
|
163
|
+
diststr = (distance>=0?'-=':'+=')+Math.abs(distance)+'px';
|
164
|
+
|
165
|
+
// Animate filmstrip and slide target frame under pointer
|
166
|
+
j_filmstrip.animate({
|
167
|
+
'top':diststr
|
168
|
+
},opts.transition_speed,opts.easing,function(){
|
169
|
+
// After transition is complete, shift filmstrip so that a sufficient number of frames
|
170
|
+
// remain on either side of the visible filmstrip
|
171
|
+
var old_i = i;
|
172
|
+
if(i>item_count) {
|
173
|
+
i = i%item_count;
|
174
|
+
iterator = i;
|
175
|
+
j_filmstrip.css('top','-'+((f_frame_height+opts.frame_gap)*i)+'px');
|
176
|
+
} else if (i<=(item_count-strip_size)) {
|
177
|
+
i = (i%item_count)+item_count;
|
178
|
+
iterator = i;
|
179
|
+
j_filmstrip.css('top','-'+((f_frame_height+opts.frame_gap)*i)+'px');
|
180
|
+
}
|
181
|
+
//If the target frame has changed due to filmstrip shifting,
|
182
|
+
//Make sure new target frame has 'current' class and correct size/opacity settings
|
183
|
+
if(old_i != i) {
|
184
|
+
j_frames.eq(old_i).removeClass('current').find('img').css({
|
185
|
+
'opacity':opts.frame_opacity
|
186
|
+
});
|
187
|
+
j_frames.eq(i).addClass('current').find('img').css({
|
188
|
+
'opacity':1.0
|
189
|
+
});
|
190
|
+
}
|
191
|
+
// If panels are not set to fade in/out, simply hide all panels and show the target panel
|
192
|
+
if(!opts.fade_panels) {
|
193
|
+
j_panels.hide().eq(i%item_count).show();
|
194
|
+
}
|
195
|
+
|
196
|
+
// Once animation is complete, re-bind click events to navigation buttons
|
197
|
+
$('.nav-prev-overlay',j_gallery).click(showPrevItem);
|
198
|
+
$('.nav-next-overlay',j_gallery).click(showNextItem);
|
199
|
+
$('.nav-prev',j_gallery).click(showPrevItem);
|
200
|
+
$('.nav-next',j_gallery).click(showNextItem);
|
201
|
+
enableFrameClicking();
|
202
|
+
});
|
203
|
+
}
|
204
|
+
} else if(slide_method=='pointer') {
|
205
|
+
// Stop pointer if it's currently in motion
|
206
|
+
j_pointer.stop();
|
207
|
+
// Get screen position of target frame
|
208
|
+
var pos = getPos(j_frames[i]);
|
209
|
+
|
210
|
+
if(filmstrip_orientation=='horizontal') {
|
211
|
+
// Slide the pointer over the target frame
|
212
|
+
j_pointer.animate({
|
213
|
+
'left':(pos.left+(f_frame_width/2)-(pointer_width/2)+'px')
|
214
|
+
},opts.transition_speed,opts.easing,function(){
|
215
|
+
if(!opts.fade_panels) {
|
216
|
+
j_panels.hide().eq(i%item_count).show();
|
217
|
+
}
|
218
|
+
$('.nav-prev-overlay',j_gallery).click(showPrevItem);
|
219
|
+
$('.nav-next-overlay',j_gallery).click(showNextItem);
|
220
|
+
$('.nav-prev',j_gallery).click(showPrevItem);
|
221
|
+
$('.nav-next',j_gallery).click(showNextItem);
|
222
|
+
enableFrameClicking();
|
223
|
+
});
|
224
|
+
} else {
|
225
|
+
// Slide the pointer over the target frame
|
226
|
+
j_pointer.animate({
|
227
|
+
'top':(pos.top+(f_frame_height/2)-(pointer_height)+'px')
|
228
|
+
},opts.transition_speed,opts.easing,function(){
|
229
|
+
if(!opts.fade_panels) {
|
230
|
+
j_panels.hide().eq(i%item_count).show();
|
231
|
+
}
|
232
|
+
$('.nav-prev-overlay',j_gallery).click(showPrevItem);
|
233
|
+
$('.nav-next-overlay',j_gallery).click(showNextItem);
|
234
|
+
$('.nav-prev',j_gallery).click(showPrevItem);
|
235
|
+
$('.nav-next',j_gallery).click(showNextItem);
|
236
|
+
enableFrameClicking();
|
237
|
+
});
|
238
|
+
}
|
239
|
+
}
|
240
|
+
|
241
|
+
}
|
242
|
+
};
|
243
|
+
|
244
|
+
/*
|
245
|
+
** extraWidth(jQuery element)
|
246
|
+
** Return the combined width of the border and padding to the elements left and right.
|
247
|
+
** If the border is non-numerical, assume zero (not ideal, will fix later)
|
248
|
+
** RETURNS - int
|
249
|
+
*/
|
250
|
+
function extraWidth(el) {
|
251
|
+
if(!el) { return 0; }
|
252
|
+
if(el.length==0) { return 0; }
|
253
|
+
el = el.eq(0);
|
254
|
+
var ew = 0;
|
255
|
+
ew += getInt(el.css('paddingLeft'));
|
256
|
+
ew += getInt(el.css('paddingRight'));
|
257
|
+
ew += getInt(el.css('borderLeftWidth'));
|
258
|
+
ew += getInt(el.css('borderRightWidth'));
|
259
|
+
return ew;
|
260
|
+
};
|
261
|
+
|
262
|
+
/*
|
263
|
+
** extraHeight(jQuery element)
|
264
|
+
** Return the combined height of the border and padding above and below the element
|
265
|
+
** If the border is non-numerical, assume zero (not ideal, will fix later)
|
266
|
+
** RETURN - int
|
267
|
+
*/
|
268
|
+
function extraHeight(el) {
|
269
|
+
if(!el) { return 0; }
|
270
|
+
if(el.length==0) { return 0; }
|
271
|
+
el = el.eq(0);
|
272
|
+
var eh = 0;
|
273
|
+
eh += getInt(el.css('paddingTop'));
|
274
|
+
eh += getInt(el.css('paddingBottom'));
|
275
|
+
eh += getInt(el.css('borderTopWidth'));
|
276
|
+
eh += getInt(el.css('borderBottomWidth'));
|
277
|
+
return eh;
|
278
|
+
};
|
279
|
+
|
280
|
+
/*
|
281
|
+
** showNextItem()
|
282
|
+
** Transition from current frame to next frame
|
283
|
+
*/
|
284
|
+
function showNextItem() {
|
285
|
+
|
286
|
+
// Cancel any transition timers until we have completed this function
|
287
|
+
$(document).stopTime("transition");
|
288
|
+
if(++iterator==j_frames.length) {iterator=0;}
|
289
|
+
// We've already written the code to transition to an arbitrary panel/frame, so use it
|
290
|
+
showItem(iterator);
|
291
|
+
// If automated transitions haven't been cancelled by an option or paused on hover, re-enable them
|
292
|
+
if(!paused) {
|
293
|
+
$(document).everyTime(opts.transition_interval,"transition",function(){
|
294
|
+
showNextItem();
|
295
|
+
});
|
296
|
+
}
|
297
|
+
};
|
298
|
+
|
299
|
+
/*
|
300
|
+
** showPrevItem()
|
301
|
+
** Transition from current frame to previous frame
|
302
|
+
*/
|
303
|
+
function showPrevItem() {
|
304
|
+
// Cancel any transition timers until we have completed this function
|
305
|
+
$(document).stopTime("transition");
|
306
|
+
if(--iterator<0) {iterator = item_count-1;}
|
307
|
+
// We've already written the code to transition to an arbitrary panel/frame, so use it
|
308
|
+
showItem(iterator);
|
309
|
+
// If automated transitions haven't been cancelled by an option or paused on hover, re-enable them
|
310
|
+
if(!paused) {
|
311
|
+
$(document).everyTime(opts.transition_interval,"transition",function(){
|
312
|
+
showNextItem();
|
313
|
+
});
|
314
|
+
}
|
315
|
+
};
|
316
|
+
|
317
|
+
/*
|
318
|
+
** getPos(jQuery element
|
319
|
+
** Calculate position of an element relative to top/left corner of gallery
|
320
|
+
** If the gallery bounding box itself is passed to the function, calculate position of gallery relative to top/left corner of browser window
|
321
|
+
** RETURNS - JSON {left: int, top: int}
|
322
|
+
*/
|
323
|
+
function getPos(el) {
|
324
|
+
var left = 0, top = 0;
|
325
|
+
var el_id = el.id;
|
326
|
+
if(el.offsetParent) {
|
327
|
+
do {
|
328
|
+
left += el.offsetLeft;
|
329
|
+
top += el.offsetTop;
|
330
|
+
} while(el = el.offsetParent);
|
331
|
+
}
|
332
|
+
//If we want the position of the gallery itself, return it
|
333
|
+
if(el_id == id) {return {'left':left,'top':top};}
|
334
|
+
//Otherwise, get position of element relative to gallery
|
335
|
+
else {
|
336
|
+
var gPos = getPos(j_gallery[0]);
|
337
|
+
var gLeft = gPos.left;
|
338
|
+
var gTop = gPos.top;
|
339
|
+
|
340
|
+
return {'left':left-gLeft,'top':top-gTop};
|
341
|
+
}
|
342
|
+
};
|
343
|
+
|
344
|
+
/*
|
345
|
+
** enableFrameClicking()
|
346
|
+
** Add an onclick event handler to each frame
|
347
|
+
** Exception: if a frame has an anchor tag, do not add an onlick handler
|
348
|
+
*/
|
349
|
+
function enableFrameClicking() {
|
350
|
+
j_frames.each(function(i){
|
351
|
+
if($('a',this).length==0) {
|
352
|
+
$(this).click(function(){
|
353
|
+
// Prevent transitioning to the current frame (unnecessary)
|
354
|
+
if(iterator!=i) {
|
355
|
+
$(document).stopTime("transition");
|
356
|
+
showItem(i);
|
357
|
+
iterator = i;
|
358
|
+
if(!paused) {
|
359
|
+
$(document).everyTime(opts.transition_interval,"transition",function(){
|
360
|
+
showNextItem();
|
361
|
+
});
|
362
|
+
}
|
363
|
+
}
|
364
|
+
});
|
365
|
+
}
|
366
|
+
});
|
367
|
+
};
|
368
|
+
|
369
|
+
/*
|
370
|
+
** buildPanels()
|
371
|
+
** Construct gallery panels from <div class="panel"> elements
|
372
|
+
** NOTE - These DIVs are generated automatically from the content of the UL passed to the plugin
|
373
|
+
*/
|
374
|
+
function buildPanels() {
|
375
|
+
// If panel overlay content exists, add the necessary overlay background DIV
|
376
|
+
// The overlay content and background are separate elements so the background's opacity isn't inherited by the content
|
377
|
+
j_panels.each(function(i){
|
378
|
+
if($('.panel-overlay',this).length>0) {
|
379
|
+
$(this).append('<div class="overlay-background"></div>');
|
380
|
+
}
|
381
|
+
});
|
382
|
+
// If there is no filmstrip in this gallery, add navigation buttons to the panel itself
|
383
|
+
if(!opts.show_filmstrip) {
|
384
|
+
$('<img />').addClass('nav-next').attr('src',opts.nav_next_url).appendTo(j_gallery).css({
|
385
|
+
'position':'absolute',
|
386
|
+
'zIndex':'1100',
|
387
|
+
'cursor':'pointer',
|
388
|
+
'top':((opts.panel_height-22)/2)+gallery_padding+'px',
|
389
|
+
'right':'10px',
|
390
|
+
'display':'none'
|
391
|
+
}).click(showNextItem);
|
392
|
+
$('<img />').addClass('nav-prev').attr('src',opts.nav_prev_url).appendTo(j_gallery).css({
|
393
|
+
'position':'absolute',
|
394
|
+
'zIndex':'1100',
|
395
|
+
'cursor':'pointer',
|
396
|
+
'top':((opts.panel_height-22)/2)+gallery_padding+'px',
|
397
|
+
'left':'10px',
|
398
|
+
'display':'none'
|
399
|
+
}).click(showPrevItem);
|
400
|
+
|
401
|
+
$('<img />').addClass('nav-next-overlay').attr('src',theme_path+opts.nav_theme+'/panel-nav-next.gif').appendTo(j_gallery).css({
|
402
|
+
'position':'absolute',
|
403
|
+
'zIndex':'1099',
|
404
|
+
'top':((opts.panel_height-22)/2)+gallery_padding-10+'px',
|
405
|
+
'right':'0',
|
406
|
+
'display':'none',
|
407
|
+
'cursor':'pointer',
|
408
|
+
'opacity':0.75
|
409
|
+
}).click(showNextItem);
|
410
|
+
|
411
|
+
$('<img />').addClass('nav-prev-overlay').attr('src',theme_path+opts.nav_theme+'/panel-nav-prev.gif').appendTo(j_gallery).css({
|
412
|
+
'position':'absolute',
|
413
|
+
'zIndex':'1099',
|
414
|
+
'top':((opts.panel_height-22)/2)+gallery_padding-10+'px',
|
415
|
+
'left':'0',
|
416
|
+
'display':'none',
|
417
|
+
'cursor':'pointer',
|
418
|
+
'opacity':0.75
|
419
|
+
}).click(showPrevItem);
|
420
|
+
}
|
421
|
+
// Set the height and width of each panel, and position it appropriately within the gallery
|
422
|
+
j_panels.each(function(i){
|
423
|
+
$(this).css({
|
424
|
+
'width':(opts.panel_width-extraWidth(j_panels))+'px',
|
425
|
+
'height':(opts.panel_height-extraHeight(j_panels))+'px',
|
426
|
+
'position':'absolute',
|
427
|
+
'overflow':'hidden',
|
428
|
+
'display':'none'
|
429
|
+
});
|
430
|
+
switch(opts.filmstrip_position) {
|
431
|
+
case 'top': $(this).css({
|
432
|
+
'top':strip_height+Math.max(gallery_padding,filmstrip_margin)+'px',
|
433
|
+
'left':gallery_padding+'px'
|
434
|
+
}); break;
|
435
|
+
case 'left': $(this).css({
|
436
|
+
'top':gallery_padding+'px',
|
437
|
+
'left':strip_width+Math.max(gallery_padding,filmstrip_margin)+'px'
|
438
|
+
}); break;
|
439
|
+
default: $(this).css({'top':gallery_padding+'px','left':gallery_padding+'px'}); break;
|
440
|
+
}
|
441
|
+
});
|
442
|
+
// Position each panel overlay within panel
|
443
|
+
$('.panel-overlay',j_panels).css({
|
444
|
+
'position':'absolute',
|
445
|
+
'zIndex':'999',
|
446
|
+
'width':(opts.panel_width-extraWidth($('.panel-overlay',j_panels)))+'px',
|
447
|
+
'left':'0'
|
448
|
+
});
|
449
|
+
$('.overlay-background',j_panels).css({
|
450
|
+
'position':'absolute',
|
451
|
+
'zIndex':'998',
|
452
|
+
'width':opts.panel_width+'px',
|
453
|
+
'left':'0',
|
454
|
+
'opacity':opts.overlay_opacity
|
455
|
+
});
|
456
|
+
if(opts.overlay_position=='top') {
|
457
|
+
$('.panel-overlay',j_panels).css('top',0);
|
458
|
+
$('.overlay-background',j_panels).css('top',0);
|
459
|
+
} else {
|
460
|
+
$('.panel-overlay',j_panels).css('bottom',0);
|
461
|
+
$('.overlay-background',j_panels).css('bottom',0);
|
462
|
+
}
|
463
|
+
|
464
|
+
$('.panel iframe',j_panels).css({
|
465
|
+
'width':opts.panel_width+'px',
|
466
|
+
'height':opts.panel_height+'px',
|
467
|
+
'border':'0'
|
468
|
+
});
|
469
|
+
|
470
|
+
// If panel images have to be scaled to fit within frame, do so and position them accordingly
|
471
|
+
if(scale_panel_images) {
|
472
|
+
$('img',j_panels).each(function(i){
|
473
|
+
$(this).css({
|
474
|
+
'height':panel_img_scale[i%item_count]*img_h[i%item_count],
|
475
|
+
'width':panel_img_scale[i%item_count]*img_w[i%item_count],
|
476
|
+
'position':'relative',
|
477
|
+
'top':(opts.panel_height-(panel_img_scale[i%item_count]*img_h[i%item_count]))/2+'px',
|
478
|
+
'left':(opts.panel_width-(panel_img_scale[i%item_count]*img_w[i%item_count]))/2+'px'
|
479
|
+
});
|
480
|
+
});
|
481
|
+
}
|
482
|
+
};
|
483
|
+
|
484
|
+
/*
|
485
|
+
** buildFilmstrip()
|
486
|
+
** Construct filmstrip from <ul class="filmstrip"> element
|
487
|
+
** NOTE - 'filmstrip' class is automatically added to UL passed to plugin
|
488
|
+
*/
|
489
|
+
function buildFilmstrip() {
|
490
|
+
// Add wrapper to filmstrip to hide extra frames
|
491
|
+
j_filmstrip.wrap('<div class="strip_wrapper"></div>');
|
492
|
+
if(slide_method=='strip') {
|
493
|
+
j_frames.clone().appendTo(j_filmstrip);
|
494
|
+
j_frames.clone().appendTo(j_filmstrip);
|
495
|
+
j_frames = $('li',j_filmstrip);
|
496
|
+
}
|
497
|
+
// If captions are enabled, add caption DIV to each frame and fill with the image titles
|
498
|
+
if(opts.show_captions) {
|
499
|
+
j_frames.append('<div class="caption"></div>').each(function(i){
|
500
|
+
$(this).find('.caption').html($(this).find('img').attr('title'));
|
501
|
+
//$(this).find('.caption').html(i);
|
502
|
+
});
|
503
|
+
}
|
504
|
+
// Position the filmstrip within the gallery
|
505
|
+
j_filmstrip.css({
|
506
|
+
'listStyle':'none',
|
507
|
+
'margin':'0',
|
508
|
+
'padding':'0',
|
509
|
+
'width':strip_width+'px',
|
510
|
+
'position':'absolute',
|
511
|
+
'zIndex':'900',
|
512
|
+
'top':(filmstrip_orientation=='vertical' && slide_method=='strip'?-((f_frame_height+opts.frame_gap)*iterator):0)+'px',
|
513
|
+
'left':(filmstrip_orientation=='horizontal' && slide_method=='strip'?-((f_frame_width+opts.frame_gap)*iterator):0)+'px',
|
514
|
+
'height':strip_height+'px'
|
515
|
+
});
|
516
|
+
j_frames.css({
|
517
|
+
'float':'left',
|
518
|
+
'position':'relative',
|
519
|
+
'height':f_frame_height+(opts.show_captions?frame_caption_size:0)+'px',
|
520
|
+
'width':f_frame_width+'px',
|
521
|
+
'zIndex':'901',
|
522
|
+
'padding':'0',
|
523
|
+
'cursor':'pointer'
|
524
|
+
});
|
525
|
+
// Set frame margins based on user options and position of filmstrip within gallery
|
526
|
+
switch(opts.filmstrip_position) {
|
527
|
+
case 'top': j_frames.css({
|
528
|
+
'marginBottom':filmstrip_margin+'px',
|
529
|
+
'marginRight':opts.frame_gap+'px'
|
530
|
+
}); break;
|
531
|
+
case 'bottom': j_frames.css({
|
532
|
+
'marginTop':filmstrip_margin+'px',
|
533
|
+
'marginRight':opts.frame_gap+'px'
|
534
|
+
}); break;
|
535
|
+
case 'left': j_frames.css({
|
536
|
+
'marginRight':filmstrip_margin+'px',
|
537
|
+
'marginBottom':opts.frame_gap+'px'
|
538
|
+
}); break;
|
539
|
+
case 'right': j_frames.css({
|
540
|
+
'marginLeft':filmstrip_margin+'px',
|
541
|
+
'marginBottom':opts.frame_gap+'px'
|
542
|
+
}); break;
|
543
|
+
}
|
544
|
+
// Apply styling to individual image wrappers. These will eventually hide overflow in the case of cropped filmstrip images
|
545
|
+
$('.img_wrap',j_frames).each(function(i){
|
546
|
+
$(this).css({
|
547
|
+
'height':Math.min(opts.frame_height,img_h[i%item_count]*frame_img_scale[i%item_count])+'px',
|
548
|
+
'width':Math.min(opts.frame_width,img_w[i%item_count]*frame_img_scale[i%item_count])+'px',
|
549
|
+
'position':'relative',
|
550
|
+
'top':(opts.show_captions && opts.filmstrip_position=='top'?frame_caption_size:0)+Math.max(0,(opts.frame_height-(frame_img_scale[i%item_count]*img_h[i%item_count]))/2)+'px',
|
551
|
+
'left':Math.max(0,(opts.frame_width-(frame_img_scale[i%item_count]*img_w[i%item_count]))/2)+'px',
|
552
|
+
'overflow':'hidden'
|
553
|
+
});
|
554
|
+
});
|
555
|
+
// Scale each filmstrip image if necessary and position it within the image wrapper
|
556
|
+
$('img',j_frames).each(function(i){
|
557
|
+
$(this).css({
|
558
|
+
'opacity':opts.frame_opacity,
|
559
|
+
'height':img_h[i%item_count]*frame_img_scale[i%item_count]+'px',
|
560
|
+
'width':img_w[i%item_count]*frame_img_scale[i%item_count]+'px',
|
561
|
+
'position':'relative',
|
562
|
+
'top':Math.min(0,(opts.frame_height-(frame_img_scale[i%item_count]*img_h[i%item_count]))/2)+'px',
|
563
|
+
'left':Math.min(0,(opts.frame_width-(frame_img_scale[i%item_count]*img_w[i%item_count]))/2)+'px'
|
564
|
+
|
565
|
+
}).mouseover(function(){
|
566
|
+
$(this).stop().animate({'opacity':1.0},300);
|
567
|
+
}).mouseout(function(){
|
568
|
+
//Don't fade out current frame on mouseout
|
569
|
+
if(!$(this).parent().parent().hasClass('current')) { $(this).stop().animate({'opacity':opts.frame_opacity},300); }
|
570
|
+
});
|
571
|
+
});
|
572
|
+
// Set overflow of filmstrip wrapper to hidden so as to hide frames that don't fit within the gallery
|
573
|
+
$('.strip_wrapper',j_gallery).css({
|
574
|
+
'position':'absolute',
|
575
|
+
'overflow':'hidden'
|
576
|
+
});
|
577
|
+
// Position filmstrip within gallery based on user options
|
578
|
+
if(filmstrip_orientation=='horizontal') {
|
579
|
+
$('.strip_wrapper',j_gallery).css({
|
580
|
+
'top':(opts.filmstrip_position=='top'?Math.max(gallery_padding,filmstrip_margin)+'px':opts.panel_height+gallery_padding+'px'),
|
581
|
+
'left':((gallery_width-wrapper_width)/2)+gallery_padding+'px',
|
582
|
+
'width':wrapper_width+'px',
|
583
|
+
'height':strip_height+'px'
|
584
|
+
});
|
585
|
+
} else {
|
586
|
+
$('.strip_wrapper',j_gallery).css({
|
587
|
+
'left':(opts.filmstrip_position=='left'?Math.max(gallery_padding,filmstrip_margin)+'px':opts.panel_width+gallery_padding+'px'),
|
588
|
+
'top':Math.max(gallery_padding,opts.frame_gap)+'px',
|
589
|
+
'width':strip_width+'px',
|
590
|
+
'height':wrapper_height+'px'
|
591
|
+
});
|
592
|
+
}
|
593
|
+
// Style frame captions
|
594
|
+
$('.caption',j_gallery).css({
|
595
|
+
'position':'absolute',
|
596
|
+
'top':(opts.filmstrip_position=='bottom'?f_frame_height:0)+'px',
|
597
|
+
'left':'0',
|
598
|
+
'margin':'0',
|
599
|
+
'width':f_frame_width+'px',
|
600
|
+
'padding':'0',
|
601
|
+
'height':frame_caption_size+'px',
|
602
|
+
'overflow':'hidden',
|
603
|
+
'lineHeight':frame_caption_size+'px'
|
604
|
+
});
|
605
|
+
// Create pointer for current frame
|
606
|
+
var pointer = $('<div></div>');
|
607
|
+
pointer.addClass('pointer').appendTo(j_gallery).css({
|
608
|
+
'position':'absolute',
|
609
|
+
'zIndex':'1000',
|
610
|
+
'width':'0px',
|
611
|
+
'fontSize':'0px',
|
612
|
+
'lineHeight':'0%',
|
613
|
+
'borderTopWidth':pointer_height+'px',
|
614
|
+
'borderRightWidth':(pointer_width/2)+'px',
|
615
|
+
'borderBottomWidth':pointer_height+'px',
|
616
|
+
'borderLeftWidth':(pointer_width/2)+'px',
|
617
|
+
'borderStyle':'solid'
|
618
|
+
});
|
619
|
+
|
620
|
+
// For IE6, use predefined color string in place of transparent (IE6 bug fix, see stylesheet)
|
621
|
+
var transColor = $.browser.msie && $.browser.version.substr(0,1)=='6' ? 'pink' : 'transparent';
|
622
|
+
|
623
|
+
// If there are no panels, make pointer transparent (nothing to point to)
|
624
|
+
// This is not the optimal solution, but we need the pointer to exist as a reference for transition animations
|
625
|
+
if(!opts.show_panels) { pointer.css('borderColor',transColor); }
|
626
|
+
|
627
|
+
switch(opts.filmstrip_position) {
|
628
|
+
case 'top': pointer.css({
|
629
|
+
'bottom':(opts.panel_height-(pointer_height*2)+gallery_padding+filmstrip_margin)+'px',
|
630
|
+
'left':((gallery_width-wrapper_width)/2)+(slide_method=='strip'?0:((f_frame_width+opts.frame_gap)*iterator))+((f_frame_width/2)-(pointer_width/2))+gallery_padding+'px',
|
631
|
+
'borderBottomColor':transColor,
|
632
|
+
'borderRightColor':transColor,
|
633
|
+
'borderLeftColor':transColor
|
634
|
+
}); break;
|
635
|
+
case 'bottom': pointer.css({
|
636
|
+
'top':(opts.panel_height-(pointer_height*2)+gallery_padding+filmstrip_margin)+'px',
|
637
|
+
'left':((gallery_width-wrapper_width)/2)+(slide_method=='strip'?0:((f_frame_width+opts.frame_gap)*iterator))+((f_frame_width/2)-(pointer_width/2))+gallery_padding+'px',
|
638
|
+
'borderTopColor':transColor,
|
639
|
+
'borderRightColor':transColor,
|
640
|
+
'borderLeftColor':transColor
|
641
|
+
}); break;
|
642
|
+
case 'left': pointer.css({
|
643
|
+
'right':(opts.panel_width-pointer_width+gallery_padding+filmstrip_margin)+'px',
|
644
|
+
'top':(f_frame_height/2)-(pointer_height)+(slide_method=='strip'?0:((f_frame_height+opts.frame_gap)*iterator))+gallery_padding+'px',
|
645
|
+
'borderBottomColor':transColor,
|
646
|
+
'borderRightColor':transColor,
|
647
|
+
'borderTopColor':transColor
|
648
|
+
}); break;
|
649
|
+
case 'right': pointer.css({
|
650
|
+
'left':(opts.panel_width-pointer_width+gallery_padding+filmstrip_margin)+'px',
|
651
|
+
'top':(f_frame_height/2)-(pointer_height)+(slide_method=='strip'?0:((f_frame_height+opts.frame_gap)*iterator))+gallery_padding+'px',
|
652
|
+
'borderBottomColor':transColor,
|
653
|
+
'borderLeftColor':transColor,
|
654
|
+
'borderTopColor':transColor
|
655
|
+
}); break;
|
656
|
+
}
|
657
|
+
|
658
|
+
j_pointer = $('.pointer',j_gallery);
|
659
|
+
|
660
|
+
// Add navigation buttons
|
661
|
+
var navNext = $('<img />');
|
662
|
+
navNext.addClass('nav-next').attr('src',opts.nav_next_url).appendTo(j_gallery).css({
|
663
|
+
'position':'absolute',
|
664
|
+
'cursor':'pointer'
|
665
|
+
}).click(showNextItem);
|
666
|
+
var navPrev = $('<img />');
|
667
|
+
navPrev.addClass('nav-prev').attr('src',opts.nav_prev_url).appendTo(j_gallery).css({
|
668
|
+
'position':'absolute',
|
669
|
+
'cursor':'pointer'
|
670
|
+
}).click(showPrevItem);
|
671
|
+
if(filmstrip_orientation=='horizontal') {
|
672
|
+
navNext.css({
|
673
|
+
'top':(opts.filmstrip_position=='top'?Math.max(gallery_padding,filmstrip_margin):opts.panel_height+filmstrip_margin+gallery_padding)+((f_frame_height-22)/2)-29+'px',
|
674
|
+
'right':((gallery_width+(gallery_padding*2))/2)-(wrapper_width/2)-opts.frame_gap-30+'px'
|
675
|
+
});
|
676
|
+
navPrev.css({
|
677
|
+
'top':(opts.filmstrip_position=='top'?Math.max(gallery_padding,filmstrip_margin):opts.panel_height+filmstrip_margin+gallery_padding)+((f_frame_height-22)/2)-29+'px',
|
678
|
+
'left':((gallery_width+(gallery_padding*2))/2)-(wrapper_width/2)-opts.frame_gap-30+'px'
|
679
|
+
});
|
680
|
+
} else {
|
681
|
+
navNext.css({
|
682
|
+
'left':(opts.filmstrip_position=='left'?Math.max(gallery_padding,filmstrip_margin):opts.panel_width+filmstrip_margin+gallery_padding)+((f_frame_width-22)/2)+'px',
|
683
|
+
'top':wrapper_height+(Math.max(gallery_padding,opts.frame_gap)*2)+'px'
|
684
|
+
});
|
685
|
+
navPrev.css({
|
686
|
+
'left':(opts.filmstrip_position=='left'?Math.max(gallery_padding,filmstrip_margin):opts.panel_width+filmstrip_margin+gallery_padding)+((f_frame_width-22)/2)+'px',
|
687
|
+
'top':wrapper_height+(Math.max(gallery_padding,opts.frame_gap)*2)+'px'
|
688
|
+
});
|
689
|
+
}
|
690
|
+
};
|
691
|
+
|
692
|
+
/*
|
693
|
+
** mouseIsOverGallery(int,int)
|
694
|
+
** Check to see if mouse coordinates lie within borders of gallery
|
695
|
+
** This is a more reliable method than using the mouseover event
|
696
|
+
** RETURN - boolean
|
697
|
+
*/
|
698
|
+
function mouseIsOverGallery(x,y) {
|
699
|
+
var pos = getPos(j_gallery[0]);
|
700
|
+
var top = pos.top;
|
701
|
+
var left = pos.left;
|
702
|
+
return x > left && x < left+gallery_width+(filmstrip_orientation=='horizontal'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin)) && y > top && y < top+gallery_height+(filmstrip_orientation=='vertical'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin));
|
703
|
+
};
|
704
|
+
|
705
|
+
/*
|
706
|
+
** getInt(string)
|
707
|
+
** Parse a string to obtain the integer value contained
|
708
|
+
** If the string contains no number, return zero
|
709
|
+
** RETURN - int
|
710
|
+
*/
|
711
|
+
function getInt(i) {
|
712
|
+
i = parseInt(i,10);
|
713
|
+
if(isNaN(i)) { i = 0; }
|
714
|
+
return i;
|
715
|
+
};
|
716
|
+
|
717
|
+
/*
|
718
|
+
** buildGallery()
|
719
|
+
** Construct HTML and CSS for the gallery, based on user options
|
720
|
+
*/
|
721
|
+
function buildGallery() {
|
722
|
+
var gallery_images = opts.show_filmstrip?$('img',j_frames):$('img',j_panels);
|
723
|
+
// For each image in the gallery, add its original dimensions and scaled dimensions to the appropriate arrays for later reference
|
724
|
+
gallery_images.each(function(i){
|
725
|
+
img_h[i] = this.height;
|
726
|
+
img_w[i] = this.width;
|
727
|
+
if(opts.frame_scale=='nocrop') {
|
728
|
+
frame_img_scale[i] = Math.min(opts.frame_height/img_h[i],opts.frame_width/img_w[i]);
|
729
|
+
} else {
|
730
|
+
frame_img_scale[i] = Math.max(opts.frame_height/img_h[i],opts.frame_width/img_w[i]);
|
731
|
+
}
|
732
|
+
|
733
|
+
if(opts.panel_scale=='nocrop') {
|
734
|
+
panel_img_scale[i] = Math.min(opts.panel_height/img_h[i],opts.panel_width/img_w[i]);
|
735
|
+
} else {
|
736
|
+
panel_img_scale[i] = Math.max(opts.panel_height/img_h[i],opts.panel_width/img_w[i]);
|
737
|
+
}
|
738
|
+
});
|
739
|
+
|
740
|
+
// Size gallery based on position of filmstrip
|
741
|
+
j_gallery.css({
|
742
|
+
'position':'relative',
|
743
|
+
'width':gallery_width+(filmstrip_orientation=='horizontal'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px',
|
744
|
+
'height':gallery_height+(filmstrip_orientation=='vertical'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px'
|
745
|
+
});
|
746
|
+
|
747
|
+
// Build filmstrip if necessary
|
748
|
+
if(opts.show_filmstrip) {
|
749
|
+
buildFilmstrip();
|
750
|
+
enableFrameClicking();
|
751
|
+
}
|
752
|
+
// Build panels if necessary
|
753
|
+
if(opts.show_panels) {
|
754
|
+
buildPanels();
|
755
|
+
}
|
756
|
+
|
757
|
+
// If user opts to pause on hover, or no filmstrip exists, add some mouseover functionality
|
758
|
+
if(opts.pause_on_hover || (opts.show_panels && !opts.show_filmstrip)) {
|
759
|
+
$(document).mousemove(function(e){
|
760
|
+
if(mouseIsOverGallery(e.pageX,e.pageY)) {
|
761
|
+
// If the user opts to pause on hover, kill automated transitions
|
762
|
+
if(opts.pause_on_hover) {
|
763
|
+
if(!paused) {
|
764
|
+
// Pause slideshow in 500ms
|
765
|
+
$(document).oneTime(500,"animation_pause",function(){
|
766
|
+
$(document).stopTime("transition");
|
767
|
+
paused=true;
|
768
|
+
});
|
769
|
+
}
|
770
|
+
}
|
771
|
+
// Display panel navigation on mouseover
|
772
|
+
if(opts.show_panels && !opts.show_filmstrip && !panel_nav_displayed) {
|
773
|
+
$('.nav-next-overlay').fadeIn('fast');
|
774
|
+
$('.nav-prev-overlay').fadeIn('fast');
|
775
|
+
$('.nav-next',j_gallery).fadeIn('fast');
|
776
|
+
$('.nav-prev',j_gallery).fadeIn('fast');
|
777
|
+
panel_nav_displayed = true;
|
778
|
+
}
|
779
|
+
} else {
|
780
|
+
// If the mouse leaves the gallery, stop the pause timer and restart automated transitions
|
781
|
+
if(opts.pause_on_hover) {
|
782
|
+
$(document).stopTime("animation_pause");
|
783
|
+
if(paused) {
|
784
|
+
$(document).everyTime(opts.transition_interval,"transition",function(){
|
785
|
+
showNextItem();
|
786
|
+
});
|
787
|
+
paused = false;
|
788
|
+
}
|
789
|
+
}
|
790
|
+
// Hide panel navigation
|
791
|
+
if(opts.show_panels && !opts.show_filmstrip && panel_nav_displayed) {
|
792
|
+
$('.nav-next-overlay').fadeOut('fast');
|
793
|
+
$('.nav-prev-overlay').fadeOut('fast');
|
794
|
+
$('.nav-next',j_gallery).fadeOut('fast');
|
795
|
+
$('.nav-prev',j_gallery).fadeOut('fast');
|
796
|
+
panel_nav_displayed = false;
|
797
|
+
}
|
798
|
+
}
|
799
|
+
});
|
800
|
+
}
|
801
|
+
|
802
|
+
// Hide loading box and display gallery
|
803
|
+
j_filmstrip.css('visibility','visible');
|
804
|
+
j_gallery.css('visibility','visible');
|
805
|
+
$('.loader',j_gallery).fadeOut('1000',function(){
|
806
|
+
// Show the 'first' panel (set by opts.start_frame)
|
807
|
+
showItem(iterator);
|
808
|
+
// If we have more than one item, begin automated transitions
|
809
|
+
if(item_count > 1) {
|
810
|
+
$(document).everyTime(opts.transition_interval,"transition",function(){
|
811
|
+
showNextItem();
|
812
|
+
});
|
813
|
+
}
|
814
|
+
});
|
815
|
+
};
|
816
|
+
|
817
|
+
/*
|
818
|
+
** MAIN PLUGIN CODE
|
819
|
+
*/
|
820
|
+
return this.each(function() {
|
821
|
+
//Hide the unstyled UL until we've created the gallery
|
822
|
+
$(this).css('visibility','hidden');
|
823
|
+
|
824
|
+
// Wrap UL in DIV and transfer ID to container DIV
|
825
|
+
$(this).wrap("<div></div>");
|
826
|
+
j_gallery = $(this).parent();
|
827
|
+
j_gallery.css('visibility','hidden').attr('id',$(this).attr('id')).addClass('gallery');
|
828
|
+
|
829
|
+
// Assign filmstrip class to UL
|
830
|
+
$(this).removeAttr('id').addClass('filmstrip');
|
831
|
+
|
832
|
+
// If the transition or pause timers exist for any reason, stop them now.
|
833
|
+
$(document).stopTime("transition");
|
834
|
+
$(document).stopTime("animation_pause");
|
835
|
+
|
836
|
+
// Save the id of the UL passed to the plugin
|
837
|
+
id = j_gallery.attr('id');
|
838
|
+
|
839
|
+
// If the UL does not contain any <div class="panel-content"> elements, we will scale the UL images to fill the panels
|
840
|
+
scale_panel_images = $('.panel-content',j_gallery).length==0;
|
841
|
+
|
842
|
+
// Define dimensions of pointer <div>
|
843
|
+
pointer_height = opts.pointer_size;
|
844
|
+
pointer_width = opts.pointer_size*2;
|
845
|
+
|
846
|
+
// Determine filmstrip orientation (vertical or horizontal)
|
847
|
+
// Do not show captions on vertical filmstrips (override user set option)
|
848
|
+
filmstrip_orientation = (opts.filmstrip_position=='top'||opts.filmstrip_position=='bottom'?'horizontal':'vertical');
|
849
|
+
if(filmstrip_orientation=='vertical') { opts.show_captions = false; }
|
850
|
+
|
851
|
+
// Determine path between current page and plugin images
|
852
|
+
// Scan script tags and look for path to GalleryView plugin
|
853
|
+
$('script').each(function(i){
|
854
|
+
var s = $(this);
|
855
|
+
if(s.attr('src') && s.attr('src').match(/jquery\.galleryview/)){
|
856
|
+
loader_path = s.attr('src').split('jquery.galleryview')[0];
|
857
|
+
theme_path = s.attr('src').split('jquery.galleryview')[0]+'themes/';
|
858
|
+
}
|
859
|
+
});
|
860
|
+
|
861
|
+
// Assign elements to variables to minimize calls to jQuery
|
862
|
+
j_filmstrip = $('.filmstrip',j_gallery);
|
863
|
+
j_frames = $('li',j_filmstrip);
|
864
|
+
j_frames.addClass('frame');
|
865
|
+
|
866
|
+
// If the user wants panels, generate them using the filmstrip images
|
867
|
+
if(opts.show_panels) {
|
868
|
+
for(i=j_frames.length-1;i>=0;i--) {
|
869
|
+
if(j_frames.eq(i).find('.panel-content').length>0) {
|
870
|
+
j_frames.eq(i).find('.panel-content').remove().prependTo(j_gallery).addClass('panel');
|
871
|
+
} else {
|
872
|
+
p = $('<div>');
|
873
|
+
p.addClass('panel');
|
874
|
+
im = $('<img />');
|
875
|
+
im.attr('src',j_frames.eq(i).find('img').eq(0).attr('src')).appendTo(p);
|
876
|
+
p.prependTo(j_gallery);
|
877
|
+
j_frames.eq(i).find('.panel-overlay').remove().appendTo(p);
|
878
|
+
}
|
879
|
+
}
|
880
|
+
} else {
|
881
|
+
$('.panel-overlay',j_frames).remove();
|
882
|
+
$('.panel-content',j_frames).remove();
|
883
|
+
}
|
884
|
+
|
885
|
+
// If the user doesn't want a filmstrip, delete it
|
886
|
+
if(!opts.show_filmstrip) { j_filmstrip.remove(); }
|
887
|
+
else {
|
888
|
+
// Wrap the frame images (and links, if applicable) in container divs
|
889
|
+
// These divs will handle cropping and zooming of the images
|
890
|
+
j_frames.each(function(i){
|
891
|
+
if($(this).find('a').length>0) {
|
892
|
+
$(this).find('a').wrap('<div class="img_wrap"></div>');
|
893
|
+
} else {
|
894
|
+
$(this).find('img').wrap('<div class="img_wrap"></div>');
|
895
|
+
}
|
896
|
+
});
|
897
|
+
j_frame_img_wrappers = $('.img_wrap',j_frames);
|
898
|
+
}
|
899
|
+
|
900
|
+
j_panels = $('.panel',j_gallery);
|
901
|
+
|
902
|
+
if(!opts.show_panels) {
|
903
|
+
opts.panel_height = 0;
|
904
|
+
opts.panel_width = 0;
|
905
|
+
}
|
906
|
+
|
907
|
+
|
908
|
+
// Determine final frame dimensions, accounting for user-added padding and border
|
909
|
+
f_frame_width = opts.frame_width+extraWidth(j_frame_img_wrappers);
|
910
|
+
f_frame_height = opts.frame_height+extraHeight(j_frame_img_wrappers);
|
911
|
+
|
912
|
+
// Number of frames in filmstrip
|
913
|
+
item_count = opts.show_panels?j_panels.length:j_frames.length;
|
914
|
+
|
915
|
+
// Number of frames that can display within the gallery block
|
916
|
+
// 64 = width of block for navigation button * 2 + 20
|
917
|
+
if(filmstrip_orientation=='horizontal') {
|
918
|
+
strip_size = opts.show_panels?Math.floor((opts.panel_width-((opts.frame_gap+22)*2))/(f_frame_width+opts.frame_gap)):Math.min(item_count,opts.filmstrip_size);
|
919
|
+
} else {
|
920
|
+
strip_size = opts.show_panels?Math.floor((opts.panel_height-(opts.frame_gap+22))/(f_frame_height+opts.frame_gap)):Math.min(item_count,opts.filmstrip_size);
|
921
|
+
}
|
922
|
+
|
923
|
+
// Determine animation method for filmstrip
|
924
|
+
// If more items than strip size, slide filmstrip
|
925
|
+
// Otherwise, slide pointer
|
926
|
+
if(strip_size >= item_count) {
|
927
|
+
slide_method = 'pointer';
|
928
|
+
strip_size = item_count;
|
929
|
+
}
|
930
|
+
else {slide_method = 'strip';}
|
931
|
+
|
932
|
+
iterator = (strip_size<item_count?item_count:0)+opts.start_frame-1;
|
933
|
+
|
934
|
+
// Determine dimensions of various gallery elements
|
935
|
+
filmstrip_margin = (opts.show_panels?getInt(j_filmstrip.css('marginTop')):0);
|
936
|
+
j_filmstrip.css('margin','0px');
|
937
|
+
|
938
|
+
if(filmstrip_orientation=='horizontal') {
|
939
|
+
// Width of gallery block
|
940
|
+
gallery_width = opts.show_panels?opts.panel_width:(strip_size*(f_frame_width+opts.frame_gap))+44+opts.frame_gap;
|
941
|
+
|
942
|
+
// Height of gallery block = screen + filmstrip + captions (optional)
|
943
|
+
gallery_height = (opts.show_panels?opts.panel_height:0)+(opts.show_filmstrip?f_frame_height+filmstrip_margin+(opts.show_captions?frame_caption_size:0):0);
|
944
|
+
} else {
|
945
|
+
// Width of gallery block
|
946
|
+
gallery_height = opts.show_panels?opts.panel_height:(strip_size*(f_frame_height+opts.frame_gap))+22;
|
947
|
+
|
948
|
+
// Height of gallery block = screen + filmstrip + captions (optional)
|
949
|
+
gallery_width = (opts.show_panels?opts.panel_width:0)+(opts.show_filmstrip?f_frame_width+filmstrip_margin:0);
|
950
|
+
}
|
951
|
+
|
952
|
+
// Width of filmstrip
|
953
|
+
if(filmstrip_orientation=='horizontal') {
|
954
|
+
if(slide_method == 'pointer') {strip_width = (f_frame_width*item_count)+(opts.frame_gap*(item_count));}
|
955
|
+
else {strip_width = (f_frame_width*item_count*3)+(opts.frame_gap*(item_count*3));}
|
956
|
+
} else {
|
957
|
+
strip_width = (f_frame_width+filmstrip_margin);
|
958
|
+
}
|
959
|
+
if(filmstrip_orientation=='horizontal') {
|
960
|
+
strip_height = (f_frame_height+filmstrip_margin+(opts.show_captions?frame_caption_size:0));
|
961
|
+
} else {
|
962
|
+
if(slide_method == 'pointer') {strip_height = (f_frame_height*item_count+opts.frame_gap*(item_count));}
|
963
|
+
else {strip_height = (f_frame_height*item_count*3)+(opts.frame_gap*(item_count*3));}
|
964
|
+
}
|
965
|
+
|
966
|
+
// Width of filmstrip wrapper (to hide overflow)
|
967
|
+
wrapper_width = ((strip_size*f_frame_width)+((strip_size-1)*opts.frame_gap));
|
968
|
+
wrapper_height = ((strip_size*f_frame_height)+((strip_size-1)*opts.frame_gap));
|
969
|
+
|
970
|
+
|
971
|
+
gallery_padding = getInt(j_gallery.css('paddingTop'));
|
972
|
+
j_gallery.css('padding','0px');
|
973
|
+
|
974
|
+
// Place loading box over gallery until page loads
|
975
|
+
galleryPos = getPos(j_gallery[0]);
|
976
|
+
$('<div>').addClass('loader').css({
|
977
|
+
'position':'absolute',
|
978
|
+
'zIndex':'32666',
|
979
|
+
'opacity':1,
|
980
|
+
'top':'0px',
|
981
|
+
'left':'0px',
|
982
|
+
'width':gallery_width+(filmstrip_orientation=='horizontal'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px',
|
983
|
+
'height':gallery_height+(filmstrip_orientation=='vertical'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px'
|
984
|
+
}).appendTo(j_gallery);
|
985
|
+
|
986
|
+
// Don't call the buildGallery function until the window is loaded
|
987
|
+
// NOTE - lazy way of waiting until all images are loaded, may find a better solution for future versions
|
988
|
+
if(!window_loaded) {
|
989
|
+
$(window).load(function(){
|
990
|
+
window_loaded = true;
|
991
|
+
buildGallery();
|
992
|
+
});
|
993
|
+
} else {
|
994
|
+
buildGallery();
|
995
|
+
}
|
996
|
+
|
997
|
+
});
|
998
|
+
};
|
999
|
+
|
1000
|
+
/*
|
1001
|
+
** GalleryView options and default values
|
1002
|
+
*/
|
1003
|
+
$.fn.galleryView.defaults = {
|
1004
|
+
|
1005
|
+
show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
|
1006
|
+
show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
|
1007
|
+
|
1008
|
+
panel_width: 600, //INT - width of gallery panel (in pixels)
|
1009
|
+
panel_height: 400, //INT - height of gallery panel (in pixels)
|
1010
|
+
frame_width: 60, //INT - width of filmstrip frames (in pixels)
|
1011
|
+
frame_height: 40, //INT - width of filmstrip frames (in pixels)
|
1012
|
+
|
1013
|
+
start_frame: 1, //INT - index of panel/frame to show first when gallery loads
|
1014
|
+
filmstrip_size: 3,
|
1015
|
+
transition_speed: 800, //INT - duration of panel/frame transition (in milliseconds)
|
1016
|
+
transition_interval: 4000, //INT - delay between panel/frame transitions (in milliseconds)
|
1017
|
+
|
1018
|
+
overlay_opacity: 0.7, //FLOAT - transparency for panel overlay (1.0 = opaque, 0.0 = transparent)
|
1019
|
+
frame_opacity: 0.3, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
|
1020
|
+
|
1021
|
+
pointer_size: 8, //INT - Height of frame pointer (in pixels)
|
1022
|
+
|
1023
|
+
nav_theme: 'dark', //STRING - name of navigation theme to use (folder must exist within 'themes' directory)
|
1024
|
+
|
1025
|
+
// nav_prev_url: '/assets/gallery_view/btnCarouselPrev.gif',
|
1026
|
+
// nav_next_url: '/assets/gallery_view/btnCarouselNext.gif',
|
1027
|
+
|
1028
|
+
easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
|
1029
|
+
|
1030
|
+
filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
|
1031
|
+
overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top, left, right)
|
1032
|
+
|
1033
|
+
panel_scale: 'nocrop', //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, nocrop = scale image and preserve original aspect ratio)
|
1034
|
+
frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
|
1035
|
+
|
1036
|
+
frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
|
1037
|
+
|
1038
|
+
show_captions: false, //BOOLEAN - flag to show or hide frame captions
|
1039
|
+
fade_panels: true, //BOOLEAN - flag to fade panels during transitions or swap instantly
|
1040
|
+
pause_on_hover: false //BOOLEAN - flag to pause slideshow when user hovers over the gallery
|
1041
|
+
};
|
1042
|
+
})(jQuery);
|