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.
@@ -0,0 +1,9 @@
1
+ $(document).ready(function(){
2
+ $('#gallery').galleryView({
3
+ panel_width: 640,
4
+ panel_height: 300,
5
+ frame_width: 75,
6
+ frame_height: 75,
7
+ theme_path: '/assets/gallery_view/themes/dark'
8
+ });
9
+ });
@@ -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);