source: documentation/trunk/tutorial_sample_files/interfaces/jquery.galleryview-2.1.1.js@ 28943

Last change on this file since 28943 was 28943, checked in by ak19, 10 years ago

The website template news-magazine.zip from os-templates.com for the GS3 interfaces tutorial is slightly out of date: its jquery.galleryview js and min.js files use the dollar-dot-browser variable but it is no longer available for use and is undefined. A workaround has been suggested at ​https://drupal.org/node/1961178, which has been inserted into both these files.
  • Property svn:executable set to *
File size: 40.8 KB
Line 
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
19var 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',theme_path+opts.nav_theme+'/next.gif').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',theme_path+opts.nav_theme+'/prev.gif').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 // From jQuery 1.9 on, $.browser is no longer defined. For a quick workaround see, https://drupal.org/node/1961178
623 var transColor = (navigator.userAgent.match(/msie [6]/i)) ? 'pink' : 'transparent';
624
625 // If there are no panels, make pointer transparent (nothing to point to)
626 // This is not the optimal solution, but we need the pointer to exist as a reference for transition animations
627 if(!opts.show_panels) { pointer.css('borderColor',transColor); }
628
629 switch(opts.filmstrip_position) {
630 case 'top': pointer.css({
631 'bottom':(opts.panel_height-(pointer_height*2)+gallery_padding+filmstrip_margin)+'px',
632 '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',
633 'borderBottomColor':transColor,
634 'borderRightColor':transColor,
635 'borderLeftColor':transColor
636 }); break;
637 case 'bottom': pointer.css({
638 'top':(opts.panel_height-(pointer_height*2)+gallery_padding+filmstrip_margin)+'px',
639 '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',
640 'borderTopColor':transColor,
641 'borderRightColor':transColor,
642 'borderLeftColor':transColor
643 }); break;
644 case 'left': pointer.css({
645 'right':(opts.panel_width-pointer_width+gallery_padding+filmstrip_margin)+'px',
646 'top':(f_frame_height/2)-(pointer_height)+(slide_method=='strip'?0:((f_frame_height+opts.frame_gap)*iterator))+gallery_padding+'px',
647 'borderBottomColor':transColor,
648 'borderRightColor':transColor,
649 'borderTopColor':transColor
650 }); break;
651 case 'right': pointer.css({
652 'left':(opts.panel_width-pointer_width+gallery_padding+filmstrip_margin)+'px',
653 'top':(f_frame_height/2)-(pointer_height)+(slide_method=='strip'?0:((f_frame_height+opts.frame_gap)*iterator))+gallery_padding+'px',
654 'borderBottomColor':transColor,
655 'borderLeftColor':transColor,
656 'borderTopColor':transColor
657 }); break;
658 }
659
660 j_pointer = $('.pointer',j_gallery);
661
662 // Add navigation buttons
663 var navNext = $('<img />');
664 navNext.addClass('nav-next').attr('src',theme_path+opts.nav_theme+'/next.gif').appendTo(j_gallery).css({
665 'position':'absolute',
666 'cursor':'pointer'
667 }).click(showNextItem);
668 var navPrev = $('<img />');
669 navPrev.addClass('nav-prev').attr('src',theme_path+opts.nav_theme+'/prev.gif').appendTo(j_gallery).css({
670 'position':'absolute',
671 'cursor':'pointer'
672 }).click(showPrevItem);
673 if(filmstrip_orientation=='horizontal') {
674 navNext.css({
675 'top':(opts.filmstrip_position=='top'?Math.max(gallery_padding,filmstrip_margin):opts.panel_height+filmstrip_margin+gallery_padding)+((f_frame_height-22)/2)+'px',
676 'right':((gallery_width+(gallery_padding*2))/2)-(wrapper_width/2)-opts.frame_gap-22+'px'
677 });
678 navPrev.css({
679 'top':(opts.filmstrip_position=='top'?Math.max(gallery_padding,filmstrip_margin):opts.panel_height+filmstrip_margin+gallery_padding)+((f_frame_height-22)/2)+'px',
680 'left':((gallery_width+(gallery_padding*2))/2)-(wrapper_width/2)-opts.frame_gap-22+'px'
681 });
682 } else {
683 navNext.css({
684 'left':(opts.filmstrip_position=='left'?Math.max(gallery_padding,filmstrip_margin):opts.panel_width+filmstrip_margin+gallery_padding)+((f_frame_width-22)/2)+13+'px',
685 'top':wrapper_height+(Math.max(gallery_padding,opts.frame_gap)*2)+'px'
686 });
687 navPrev.css({
688 'left':(opts.filmstrip_position=='left'?Math.max(gallery_padding,filmstrip_margin):opts.panel_width+filmstrip_margin+gallery_padding)+((f_frame_width-22)/2)-13+'px',
689 'top':wrapper_height+(Math.max(gallery_padding,opts.frame_gap)*2)+'px'
690 });
691 }
692 };
693
694 /*
695 ** mouseIsOverGallery(int,int)
696 ** Check to see if mouse coordinates lie within borders of gallery
697 ** This is a more reliable method than using the mouseover event
698 ** RETURN - boolean
699 */
700 function mouseIsOverGallery(x,y) {
701 var pos = getPos(j_gallery[0]);
702 var top = pos.top;
703 var left = pos.left;
704 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));
705 };
706
707 /*
708 ** getInt(string)
709 ** Parse a string to obtain the integer value contained
710 ** If the string contains no number, return zero
711 ** RETURN - int
712 */
713 function getInt(i) {
714 i = parseInt(i,10);
715 if(isNaN(i)) { i = 0; }
716 return i;
717 };
718
719 /*
720 ** buildGallery()
721 ** Construct HTML and CSS for the gallery, based on user options
722 */
723 function buildGallery() {
724 var gallery_images = opts.show_filmstrip?$('img',j_frames):$('img',j_panels);
725 // For each image in the gallery, add its original dimensions and scaled dimensions to the appropriate arrays for later reference
726 gallery_images.each(function(i){
727 img_h[i] = this.height;
728 img_w[i] = this.width;
729 if(opts.frame_scale=='nocrop') {
730 frame_img_scale[i] = Math.min(opts.frame_height/img_h[i],opts.frame_width/img_w[i]);
731 } else {
732 frame_img_scale[i] = Math.max(opts.frame_height/img_h[i],opts.frame_width/img_w[i]);
733 }
734
735 if(opts.panel_scale=='nocrop') {
736 panel_img_scale[i] = Math.min(opts.panel_height/img_h[i],opts.panel_width/img_w[i]);
737 } else {
738 panel_img_scale[i] = Math.max(opts.panel_height/img_h[i],opts.panel_width/img_w[i]);
739 }
740 });
741
742 // Size gallery based on position of filmstrip
743 j_gallery.css({
744 'position':'relative',
745 'width':gallery_width+(filmstrip_orientation=='horizontal'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px',
746 'height':gallery_height+(filmstrip_orientation=='vertical'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px'
747 });
748
749 // Build filmstrip if necessary
750 if(opts.show_filmstrip) {
751 buildFilmstrip();
752 enableFrameClicking();
753 }
754 // Build panels if necessary
755 if(opts.show_panels) {
756 buildPanels();
757 }
758
759 // If user opts to pause on hover, or no filmstrip exists, add some mouseover functionality
760 if(opts.pause_on_hover || (opts.show_panels && !opts.show_filmstrip)) {
761 $(document).mousemove(function(e){
762 if(mouseIsOverGallery(e.pageX,e.pageY)) {
763 // If the user opts to pause on hover, kill automated transitions
764 if(opts.pause_on_hover) {
765 if(!paused) {
766 // Pause slideshow in 500ms
767 $(document).oneTime(500,"animation_pause",function(){
768 $(document).stopTime("transition");
769 paused=true;
770 });
771 }
772 }
773 // Display panel navigation on mouseover
774 if(opts.show_panels && !opts.show_filmstrip && !panel_nav_displayed) {
775 $('.nav-next-overlay').fadeIn('fast');
776 $('.nav-prev-overlay').fadeIn('fast');
777 $('.nav-next',j_gallery).fadeIn('fast');
778 $('.nav-prev',j_gallery).fadeIn('fast');
779 panel_nav_displayed = true;
780 }
781 } else {
782 // If the mouse leaves the gallery, stop the pause timer and restart automated transitions
783 if(opts.pause_on_hover) {
784 $(document).stopTime("animation_pause");
785 if(paused) {
786 $(document).everyTime(opts.transition_interval,"transition",function(){
787 showNextItem();
788 });
789 paused = false;
790 }
791 }
792 // Hide panel navigation
793 if(opts.show_panels && !opts.show_filmstrip && panel_nav_displayed) {
794 $('.nav-next-overlay').fadeOut('fast');
795 $('.nav-prev-overlay').fadeOut('fast');
796 $('.nav-next',j_gallery).fadeOut('fast');
797 $('.nav-prev',j_gallery).fadeOut('fast');
798 panel_nav_displayed = false;
799 }
800 }
801 });
802 }
803
804 // Hide loading box and display gallery
805 j_filmstrip.css('visibility','visible');
806 j_gallery.css('visibility','visible');
807 $('.loader',j_gallery).fadeOut('1000',function(){
808 // Show the 'first' panel (set by opts.start_frame)
809 showItem(iterator);
810 // If we have more than one item, begin automated transitions
811 if(item_count > 1) {
812 $(document).everyTime(opts.transition_interval,"transition",function(){
813 showNextItem();
814 });
815 }
816 });
817 };
818
819 /*
820 ** MAIN PLUGIN CODE
821 */
822 return this.each(function() {
823 //Hide the unstyled UL until we've created the gallery
824 $(this).css('visibility','hidden');
825
826 // Wrap UL in DIV and transfer ID to container DIV
827 $(this).wrap("<div></div>");
828 j_gallery = $(this).parent();
829 j_gallery.css('visibility','hidden').attr('id',$(this).attr('id')).addClass('gallery');
830
831 // Assign filmstrip class to UL
832 $(this).removeAttr('id').addClass('filmstrip');
833
834 // If the transition or pause timers exist for any reason, stop them now.
835 $(document).stopTime("transition");
836 $(document).stopTime("animation_pause");
837
838 // Save the id of the UL passed to the plugin
839 id = j_gallery.attr('id');
840
841 // If the UL does not contain any <div class="panel-content"> elements, we will scale the UL images to fill the panels
842 scale_panel_images = $('.panel-content',j_gallery).length==0;
843
844 // Define dimensions of pointer <div>
845 pointer_height = opts.pointer_size;
846 pointer_width = opts.pointer_size*2;
847
848 // Determine filmstrip orientation (vertical or horizontal)
849 // Do not show captions on vertical filmstrips (override user set option)
850 filmstrip_orientation = (opts.filmstrip_position=='top'||opts.filmstrip_position=='bottom'?'horizontal':'vertical');
851 if(filmstrip_orientation=='vertical') { opts.show_captions = false; }
852
853 // Determine path between current page and plugin images
854 // Scan script tags and look for path to GalleryView plugin
855 $('script').each(function(i){
856 var s = $(this);
857 if(s.attr('src') && s.attr('src').match(/jquery\.galleryview/)){
858 loader_path = s.attr('src').split('jquery.galleryview')[0];
859 theme_path = s.attr('src').split('jquery.galleryview')[0]+'../images/galleryviewthemes/';
860 }
861 });
862
863 // Assign elements to variables to minimize calls to jQuery
864 j_filmstrip = $('.filmstrip',j_gallery);
865 j_frames = $('li',j_filmstrip);
866 j_frames.addClass('frame');
867
868 // If the user wants panels, generate them using the filmstrip images
869 if(opts.show_panels) {
870 for(i=j_frames.length-1;i>=0;i--) {
871 if(j_frames.eq(i).find('.panel-content').length>0) {
872 j_frames.eq(i).find('.panel-content').remove().prependTo(j_gallery).addClass('panel');
873 } else {
874 p = $('<div>');
875 p.addClass('panel');
876 im = $('<img />');
877 im.attr('src',j_frames.eq(i).find('img').eq(0).attr('src')).appendTo(p);
878 p.prependTo(j_gallery);
879 j_frames.eq(i).find('.panel-overlay').remove().appendTo(p);
880 }
881 }
882 } else {
883 $('.panel-overlay',j_frames).remove();
884 $('.panel-content',j_frames).remove();
885 }
886
887 // If the user doesn't want a filmstrip, delete it
888 if(!opts.show_filmstrip) { j_filmstrip.remove(); }
889 else {
890 // Wrap the frame images (and links, if applicable) in container divs
891 // These divs will handle cropping and zooming of the images
892 j_frames.each(function(i){
893 if($(this).find('a').length>0) {
894 $(this).find('a').wrap('<div class="img_wrap"></div>');
895 } else {
896 $(this).find('img').wrap('<div class="img_wrap"></div>');
897 }
898 });
899 j_frame_img_wrappers = $('.img_wrap',j_frames);
900 }
901
902 j_panels = $('.panel',j_gallery);
903
904 if(!opts.show_panels) {
905 opts.panel_height = 0;
906 opts.panel_width = 0;
907 }
908
909
910 // Determine final frame dimensions, accounting for user-added padding and border
911 f_frame_width = opts.frame_width+extraWidth(j_frame_img_wrappers);
912 f_frame_height = opts.frame_height+extraHeight(j_frame_img_wrappers);
913
914 // Number of frames in filmstrip
915 item_count = opts.show_panels?j_panels.length:j_frames.length;
916
917 // Number of frames that can display within the gallery block
918 // 64 = width of block for navigation button * 2 + 20
919 if(filmstrip_orientation=='horizontal') {
920 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);
921 } else {
922 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);
923 }
924
925 // Determine animation method for filmstrip
926 // If more items than strip size, slide filmstrip
927 // Otherwise, slide pointer
928 if(strip_size >= item_count) {
929 slide_method = 'pointer';
930 strip_size = item_count;
931 }
932 else {slide_method = 'strip';}
933
934 iterator = (strip_size<item_count?item_count:0)+opts.start_frame-1;
935
936 // Determine dimensions of various gallery elements
937 filmstrip_margin = (opts.show_panels?getInt(j_filmstrip.css('marginTop')):0);
938 j_filmstrip.css('margin','0px');
939
940 if(filmstrip_orientation=='horizontal') {
941 // Width of gallery block
942 gallery_width = opts.show_panels?opts.panel_width:(strip_size*(f_frame_width+opts.frame_gap))+44+opts.frame_gap;
943
944 // Height of gallery block = screen + filmstrip + captions (optional)
945 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);
946 } else {
947 // Width of gallery block
948 gallery_height = opts.show_panels?opts.panel_height:(strip_size*(f_frame_height+opts.frame_gap))+22;
949
950 // Height of gallery block = screen + filmstrip + captions (optional)
951 gallery_width = (opts.show_panels?opts.panel_width:0)+(opts.show_filmstrip?f_frame_width+filmstrip_margin:0);
952 }
953
954 // Width of filmstrip
955 if(filmstrip_orientation=='horizontal') {
956 if(slide_method == 'pointer') {strip_width = (f_frame_width*item_count)+(opts.frame_gap*(item_count));}
957 else {strip_width = (f_frame_width*item_count*3)+(opts.frame_gap*(item_count*3));}
958 } else {
959 strip_width = (f_frame_width+filmstrip_margin);
960 }
961 if(filmstrip_orientation=='horizontal') {
962 strip_height = (f_frame_height+filmstrip_margin+(opts.show_captions?frame_caption_size:0));
963 } else {
964 if(slide_method == 'pointer') {strip_height = (f_frame_height*item_count+opts.frame_gap*(item_count));}
965 else {strip_height = (f_frame_height*item_count*3)+(opts.frame_gap*(item_count*3));}
966 }
967
968 // Width of filmstrip wrapper (to hide overflow)
969 wrapper_width = ((strip_size*f_frame_width)+((strip_size-1)*opts.frame_gap));
970 wrapper_height = ((strip_size*f_frame_height)+((strip_size-1)*opts.frame_gap));
971
972
973 gallery_padding = getInt(j_gallery.css('paddingTop'));
974 j_gallery.css('padding','0px');
975
976 // Place loading box over gallery until page loads
977 galleryPos = getPos(j_gallery[0]);
978 $('<div>').addClass('loader').css({
979 'position':'absolute',
980 'zIndex':'32666',
981 'opacity':1,
982 'top':'0px',
983 'left':'0px',
984 'width':gallery_width+(filmstrip_orientation=='horizontal'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px',
985 'height':gallery_height+(filmstrip_orientation=='vertical'?(gallery_padding*2):gallery_padding+Math.max(gallery_padding,filmstrip_margin))+'px'
986 }).appendTo(j_gallery);
987
988 // Don't call the buildGallery function until the window is loaded
989 // NOTE - lazy way of waiting until all images are loaded, may find a better solution for future versions
990 if(!window_loaded) {
991 $(window).load(function(){
992 window_loaded = true;
993 buildGallery();
994 });
995 } else {
996 buildGallery();
997 }
998
999 });
1000 };
1001
1002/*
1003** GalleryView options and default values
1004*/
1005 $.fn.galleryView.defaults = {
1006
1007 show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
1008 show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
1009
1010 panel_width: 600, //INT - width of gallery panel (in pixels)
1011 panel_height: 400, //INT - height of gallery panel (in pixels)
1012 frame_width: 100, //INT - width of filmstrip frames (in pixels)
1013 frame_height: 60, //INT - width of filmstrip frames (in pixels)
1014
1015 start_frame: 1, //INT - index of panel/frame to show first when gallery loads
1016 filmstrip_size: 3,
1017 transition_speed: 800, //INT - duration of panel/frame transition (in milliseconds)
1018 transition_interval: 4000, //INT - delay between panel/frame transitions (in milliseconds)
1019
1020 overlay_opacity: 0.7, //FLOAT - transparency for panel overlay (1.0 = opaque, 0.0 = transparent)
1021 frame_opacity: 0.3, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
1022
1023 pointer_size: 0, //INT - Height of frame pointer (in pixels)
1024
1025 nav_theme: 'dark', //STRING - name of navigation theme to use (folder must exist within 'themes' directory)
1026 easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
1027
1028 filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
1029 overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top, left, right)
1030
1031 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)
1032 frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
1033
1034 frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
1035
1036 show_captions: false, //BOOLEAN - flag to show or hide frame captions
1037 fade_panels: true, //BOOLEAN - flag to fade panels during transitions or swap instantly
1038 pause_on_hover: true //BOOLEAN - flag to pause slideshow when user hovers over the gallery
1039 };
1040})(jQuery);
Note: See TracBrowser for help on using the repository browser.