From 5403988b131e2bb1e1cc735d8bf94c8fb7b6065d Mon Sep 17 00:00:00 2001 From: Daryl Fritz Date: Wed, 7 Jan 2015 13:54:51 -0500 Subject: [PATCH] Add `static_panel_nav` option My project had a requirement to ensure the next/prev arrows don't disappear. We believed this is better for accessibility. I created a new option called `static_panel_nav`. When set to TRUE, `static_panel_nav` will always display the next/prev arrows on the screen. The option is FALSE by default, to match pre-existing behaviour of the library. --- js/jquery.galleryview-3.0-dev.js | 392 ++++++++++++++++--------------- 1 file changed, 200 insertions(+), 192 deletions(-) diff --git a/js/jquery.galleryview-3.0-dev.js b/js/jquery.galleryview-3.0-dev.js index 6330d6c..00cc666 100644 --- a/js/jquery.galleryview-3.0-dev.js +++ b/js/jquery.galleryview-3.0-dev.js @@ -21,7 +21,7 @@ if (typeof Object.create !== 'function') { // custom image object var gvImage = function (img) { - this.src = { + this.src = { panel: img.attr('src'), frame: img.data('frame') || img.attr('src') }; @@ -37,10 +37,10 @@ if (typeof Object.create !== 'function') { }; this.href = null; this.dom_obj = null; - + return this; }, - + // utility function wrapper gv = { getInt: function(i) { @@ -48,23 +48,23 @@ if (typeof Object.create !== 'function') { return isNaN(i) ? 0 : i; }, innerWidth: function(elem) { - return this.getInt(elem.css('width')) || 0; + return this.getInt(elem.css('width')) || 0; }, outerWidth: function(elem) { - return this.innerWidth(elem) + + return this.innerWidth(elem) + this.extraWidth(elem); }, extraWidth: function(elem) { return this.getInt(elem.css('paddingLeft')) + this.getInt(elem.css('paddingRight')) + this.getInt(elem.css('borderLeftWidth')) + - this.getInt(elem.css('borderRightWidth')); + this.getInt(elem.css('borderRightWidth')); }, innerHeight: function(elem) { return this.getInt(elem.css('height'))|| 0; }, outerHeight: function(elem) { - return this.innerHeight(elem) + + return this.innerHeight(elem) + this.extraHeight(elem); }, extraHeight: function(elem) { @@ -74,11 +74,11 @@ if (typeof Object.create !== 'function') { this.getInt(elem.css('borderBottomWidth')); } }, - + /* GalleryView - Object The main gallery class - */ + */ GalleryView = { // array of dom elements elems: [ @@ -89,14 +89,14 @@ if (typeof Object.create !== 'function') { '.gv_panelNavNext', '.gv_panelNavPrev', '.gv_overlay', '.gv_showOverlay', '.gv_imageStore' ], - + // create a jQuery element and apply attributes createElem: function(attrs,elem) { elem = document.createElement(elem); var $elem = $(elem); return $elem.attr(attrs); }, - + // get the position of an element with respect // to the gallery wrapper getPos: function (el) { @@ -107,19 +107,19 @@ if (typeof Object.create !== 'function') { left = 0, top = 0, gPos, gLeft, gTop; - + if (!el) { return { top: 0, left: 0 }; } - + if (el.offsetParent) { do { left += el.offsetLeft; top += el.offsetTop; } while (el = el.offsetParent); } - + //If we want the position of the gallery itself, return it if (el_id === self.id) { return { left: left, top: top }; } - + //Otherwise, get position of element relative to gallery else { gPos = self.getPos(dom.galleryWrap); @@ -128,7 +128,7 @@ if (typeof Object.create !== 'function') { return { left: left - gLeft, top: top - gTop }; } }, - + // determine if mouse is within the boundary of the gallery wrapper mouseIsOverGallery: function (x, y) { var self = this, @@ -136,10 +136,10 @@ if (typeof Object.create !== 'function') { pos = this.getPos(dom.gv_galleryWrap), top = pos.top, left = pos.left; - + return x > left && x < left + gv.outerWidth(dom.gv_galleryWrap) && y > top && y < top + gv.outerHeight(dom.gv_galleryWrap); }, - + // determine if mouse is within the boundary of the panel mouseIsOverPanel: function (x, y) { var self = this, @@ -148,10 +148,10 @@ if (typeof Object.create !== 'function') { gPos = this.getPos(dom.gv_galleryWrap), top = pos.top + gPos.top, left = pos.left + gPos.left; - + return x > left && x < left + gv.outerWidth(dom.gv_panelWrap) && y > top && y < top + gv.outerHeight(dom.gv_panelWrap); }, - + // create gvImage objects for each image in gallery storeImages: function() { var self = this; @@ -162,7 +162,7 @@ if (typeof Object.create !== 'function') { self.gvImages[i] = new gvImage($(img)); }); }, - + setDimensions: function() { var self = this, dom = this.dom, @@ -183,7 +183,7 @@ if (typeof Object.create !== 'function') { fsFull: 0 }, panels = []; - + // nav if(this.filmstripOrientation === 'horizontal') { dom.gv_navWrap.css({ @@ -203,7 +203,7 @@ if (typeof Object.create !== 'function') { }); } } - + if(this.filmstripOrientation === 'vertical' && widths.filmstrip < (widths.prev + widths.play + widths.next)) { dom.gv_navWrap.css({ width: Math.max(widths.prev, widths.play, widths.next), @@ -215,7 +215,7 @@ if (typeof Object.create !== 'function') { height: Math.max(heights.prev,heights.play,heights.next) }); } - + // panels dom.gv_panel.css({ width: this.opts.panel_width, @@ -228,16 +228,16 @@ if (typeof Object.create !== 'function') { dom.gv_overlay.css({ width: this.opts.panel_width }); - - - + + + $.each(this.gvImages,function(i,img) { dom.gv_panelWrap.append(dom.gv_panel.clone(true)); }); - + dom.gv_panels = dom.gv_panelWrap.find('.gv_panel'); dom.gv_panels.remove(); - + // filmstrip dom.gv_thumbnail.css({ width: this.opts.frame_width, @@ -249,8 +249,8 @@ if (typeof Object.create !== 'function') { marginRight: this.opts.frame_gap, marginBottom: this.opts.frame_gap }); - - + + if(this.filmstripOrientation === 'horizontal') { this.filmstripSize = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_navWrap)) / (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap)); widths.fsMax = this.filmstripSize * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap); @@ -272,7 +272,7 @@ if (typeof Object.create !== 'function') { width: widths.filmstrip, height: heights.filmstrip }); - + // gallery if(this.opts.show_filmstrip) { if(this.filmstripOrientation === 'horizontal') { @@ -284,29 +284,29 @@ if (typeof Object.create !== 'function') { dom.gv_gallery.css({ width: gv.outerWidth(dom.gv_panelWrap) + this.opts.frame_gap + (this.opts.show_filmstrip ? Math.max(gv.outerWidth(dom.gv_filmstripWrap),gv.outerWidth(dom.gv_navWrap)) : gv.outerWidth(dom.gv_filmstripWrap)), height: gv.outerHeight(dom.gv_panelWrap) - }); + }); } } else { dom.gv_gallery.css({ width: gv.outerWidth(dom.gv_panelWrap), height: gv.outerHeight(dom.gv_panelWrap) - }); + }); } - + dom.gv_galleryWrap.css({ width: gv.outerWidth(dom.gv_gallery), height: gv.outerHeight(dom.gv_gallery), padding: this.opts.frame_gap }); }, - + setPositions: function() { var self = this, dom = this.dom, navVert = 0, fsVert = 0, navHorz = 0, fsHorz = 0, vert, horz; - + // determine vertical or horizontal offset // if negative, apply to filmstrip, otherwise apply to navbar if(this.filmstripOrientation === 'horizontal') { @@ -318,15 +318,15 @@ if (typeof Object.create !== 'function') { if(horz < 0) { fsHorz = -1 * horz; } else { navHorz = horz; } } - + // for horizontal filmstrips w/o navigation, center the filmstrip under the panel if(!this.opts.show_filmstrip_nav && this.filmstripOrientation === 'horizontal') { fsHorz = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_filmstripWrap)) / 2); } - + dom.gv_panelNavNext.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavNext)) / 2, right: 10 }); dom.gv_panelNavPrev.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavPrev)) / 2, left: 10 }); - + // pin elements to gallery corners according to filmstrip position switch(this.opts.filmstrip_position) { case 'top': @@ -334,26 +334,26 @@ if (typeof Object.create !== 'function') { dom.gv_panelWrap.css({ bottom: 0, left: 0 }); dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz }); break; - + case 'right': dom.gv_navWrap.css({ bottom: navVert, right: navHorz }); dom.gv_panelWrap.css({ top: 0, left: 0 }); dom.gv_filmstripWrap.css({ top: fsVert, right: fsHorz }); break; - + case 'left': dom.gv_navWrap.css({ bottom: navVert, left: navHorz }); dom.gv_panelWrap.css({ top: 0, right: 0 }); dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz }); break; - + default: dom.gv_navWrap.css({ bottom: navVert, right: navHorz }); dom.gv_panelWrap.css({ top: 0, left: 0 }); dom.gv_filmstripWrap.css({ bottom: fsVert, left: fsHorz }); break; } - + if(this.opts.overlay_position === 'top') { dom.gv_overlay.css({ top: 0, left: -99999 }); dom.gv_showOverlay.css({ top: 0, left: 0 }); @@ -361,23 +361,23 @@ if (typeof Object.create !== 'function') { dom.gv_overlay.css({ bottom: 0, left: -99999 }); dom.gv_showOverlay.css({ bottom: 0, left: 0 }); } - + if(!this.opts.show_filmstrip_nav) { - dom.gv_navWrap.remove(); + dom.gv_navWrap.remove(); } }, - + buildFilmstrip: function() { var self = this, dom = this.dom, framesLength = this.gvImages.length * ((this.filmstripOrientation === 'horizontal' ? this.opts.frame_width : this.opts.frame_height) + this.opts.frame_gap); - + dom.gv_frame.append(dom.gv_thumbnail); - if(this.opts.show_captions) { + if(this.opts.show_captions) { dom.gv_frame.append(dom.gv_caption); } dom.gv_thumbnail.css('opacity',this.opts.frame_opacity); - + dom.gv_thumbnail.bind({ mouseover: function() { if(!$(this).hasClass('current')) { @@ -390,17 +390,17 @@ if (typeof Object.create !== 'function') { } } }); - + // Drop a clone of the frame element into the filmstrip for each source image $.each(this.gvImages,function(i,img) { dom.gv_frame.clone(true).prependTo(dom.gv_filmstrip); }); - + dom.gv_filmstrip.css({ width: gv.outerWidth(dom.gv_frame), height: gv.outerHeight(dom.gv_frame) }); - + // If we are scrolling the filmstrip, and we can't show all frames at once, // make two additional copies of each frame if(this.opts.filmstrip_style === 'scroll') { @@ -429,35 +429,35 @@ if (typeof Object.create !== 'function') { } dom.gv_frames = dom.gv_filmstrip.find('.gv_frame'); $.each(dom.gv_frames,function(i,frame) { - $(frame).data('frameIndex',i); + $(frame).data('frameIndex',i); }); dom.gv_thumbnails = dom.gv_filmstrip.find('div.gv_thumbnail'); }, - + buildGallery: function() { var self = this, dom = this.dom; - + this.setDimensions(); this.setPositions(); - + if(this.opts.show_filmstrip) { this.buildFilmstrip(); } }, - + showInfoBar: function() { if(!this.opts.show_infobar) { return; } var self = this, dom = this.dom; - + dom.gv_infobar.stop().stopTime('hideInfoBar_' + self.id).html((this.iterator+1) + ' of ' + this.numImages).show().css('opacity',this.opts.infobar_opacity); - + dom.gv_infobar.oneTime(2000 + this.opts.transition_speed,'hideInfoBar_' + self.id,function() { dom.gv_infobar.fadeOut(1000); }); }, - + initImages: function() { var self = this, dom = this.dom; @@ -474,12 +474,12 @@ if (typeof Object.create !== 'function') { heightFactor = gv.innerHeight(parent) / height, parentType = parent.hasClass('gv_panel') ? 'panel' : 'frame', heightOffset = 0, widthOffset = 0; - + gvImage.scale[parentType] = self.opts[parentType+'_scale'] === 'fit' ? Math.min(widthFactor,heightFactor) : Math.max(widthFactor,heightFactor); - + widthOffset = Math.round((gv.innerWidth(parent) - (width * gvImage.scale[parentType])) / 2); - heightOffset = Math.round((gv.innerHeight(parent) - (height * gvImage.scale[parentType])) / 2); - + heightOffset = Math.round((gv.innerHeight(parent) - (height * gvImage.scale[parentType])) / 2); + _img.css({ width: width * gvImage.scale[parentType], height: height * gvImage.scale[parentType], @@ -488,7 +488,7 @@ if (typeof Object.create !== 'function') { }); _img.hide().css('visibility','visible'); _img.remove().appendTo(parent); - + if(parentType === 'frame') { _img.fadeIn(); parent.parent().removeClass('gv_frame-loading'); @@ -503,7 +503,7 @@ if (typeof Object.create !== 'function') { _img.show(); } }); - + // store eventual image container as data property // append to temporary storage element and set src if(self.opts.show_panels) { @@ -512,19 +512,19 @@ if (typeof Object.create !== 'function') { .appendTo(dom.gv_imageStore) .attr('src',gvImage.src.panel); } - + if(self.opts.show_filmstrip) { img.clone(true) .data('parent',{type:'gv_thumbnails',index:i}) .appendTo(dom.gv_imageStore) .attr('src',gvImage.src.frame); - + if(dom.gv_frames.length > dom.gv_panels.length) { img.clone(true) .data('parent',{type:'gv_thumbnails',index:i+self.numImages}) .appendTo(dom.gv_imageStore) .attr('src',gvImage.src.frame); - + img.clone(true) .data('parent',{type:'gv_thumbnails',index:i+self.numImages+self.numImages}) .appendTo(dom.gv_imageStore) @@ -533,21 +533,21 @@ if (typeof Object.create !== 'function') { } }); }, - + showNext: function() { this.navAction = 'next'; this.showItem(this.frameIterator+1); }, - + showPrev: function() { this.navAction = 'prev'; this.showItem(this.frameIterator-1); }, - + showItem: function(i) { if(isNaN(i)) { return; } if(!this.opts.show_filmstrip) { i = i % this.numImages; } - + var self = this, dom = this.dom, frame_i = i, @@ -556,7 +556,7 @@ if (typeof Object.create !== 'function') { oldIterator, panel, playing = false; - + // don't go out of bounds if(i >= this.numImages) { i = i % this.numImages; @@ -568,19 +568,19 @@ if (typeof Object.create !== 'function') { frame_i = dom.gv_panels.length - 1; } } - + panel = dom.gv_panels.eq(i); - + playing = this.playing; - + if(playing) { this.stopSlideshow(false); } - + this.unbindActions(); - + dom.gv_gallery.oneTime(this.opts.transition_speed,'bindActions_' + self.id,function(){ if(playing) { self.startSlideshow(false); } self.bindActions(); }); - + switch(this.opts.panel_animation) { case 'crossfade': dom.gv_panels.eq(this.iterator).fadeOut(this.opts.transition_speed,function(){$(this).remove();}); @@ -598,12 +598,12 @@ if (typeof Object.create !== 'function') { newPanelStart = -1 * gv.outerWidth(dom.gv_panel); oldPanelEnd = gv.outerWidth(dom.gv_panel); } - + panel.css({ left:newPanelStart }).appendTo(dom.gv_panelWrap).animate( { left:0 }, { duration: this.opts.transition_speed,easing: this.opts.easing } ); - + dom.gv_panels.eq(this.iterator).animate( { left: oldPanelEnd }, { duration: this.opts.transition_speed, easing: this.opts.easing, complete: function(){ $(this).remove(); } } @@ -614,20 +614,20 @@ if (typeof Object.create !== 'function') { panel.prependTo(dom.gv_panelWrap); break; } - + this.updateOverlay(i); - + this.iterator = i; this.updateFilmstrip(frame_i); this.showInfoBar(); - - + + }, - + updateOverlay: function(i) { var self = this, dom = this.dom; - + if(this.overlayVisible) { this.hideOverlay(null,function(){ dom.gv_overlay.html('

'+self.gvImages[i].attrs.title+'

'+self.gvImages[i].attrs.description+'

'); @@ -637,34 +637,34 @@ if (typeof Object.create !== 'function') { dom.gv_overlay.html('

'+self.gvImages[i].attrs.title+'

'+self.gvImages[i].attrs.description+'

'); dom.gv_overlay.css(this.opts.overlay_position,-1 * dom.gv_overlay.outerHeight()); } - + }, - + hideOverlay: function(s,callback) { var self = this, dom = this.dom, endOverlay = {}, endButton = {}, speed = s || self.opts.transition_speed / 2; - + callback = callback || function(){}; - + endOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight(); endButton[this.opts.overlay_position] = 0; - - dom.gv_overlay.animate(endOverlay,{ - duration: speed, - easing: 'swing', + + dom.gv_overlay.animate(endOverlay,{ + duration: speed, + easing: 'swing', complete: callback }); dom.gv_showOverlay.animate(endButton,{ duration: speed, easing: 'swing' }); - + this.overlayVisible = false; }, - + showOverlay: function(s) { var self = this, dom = this.dom, @@ -672,21 +672,21 @@ if (typeof Object.create !== 'function') { endOverlay = {}, endButton = {}, speed = s || self.opts.transition_speed / 2; - + startOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight(); startOverlay.left = 0; - + endOverlay[this.opts.overlay_position] = 0; - + endButton[this.opts.overlay_position] = dom.gv_overlay.outerHeight(); - + dom.gv_overlay.css(startOverlay); dom.gv_overlay.animate(endOverlay,{ duration: speed, easing: 'swing' }); dom.gv_showOverlay.animate(endButton,{ duration: speed, easing: 'swing' }); - + this.overlayVisible = true; }, - + updateFilmstrip: function(to) { if(!this.opts.show_filmstrip) { this.frameIterator = to; return; } var self = this, @@ -694,21 +694,21 @@ if (typeof Object.create !== 'function') { targetThumbs = dom.gv_thumbnails.eq(this.iterator), filmstripIterator, distance; - + if(this.scrolling) { targetThumbs = targetThumbs. add(dom.gv_thumbnails.eq(this.iterator + this.numImages)). - add(dom.gv_thumbnails.eq(this.iterator + (2 * this.numImages))); + add(dom.gv_thumbnails.eq(this.iterator + (2 * this.numImages))); } - + dom.gv_thumbnails.removeClass('current').animate({ opacity: this.opts.frame_opacity }); targetThumbs.stop().addClass('current').animate({ opacity: 1 },500); - - + + if(this.scrolling) { if(this.filmstripOrientation === 'horizontal') { distance = (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to); - + if(distance > 0) { distance = '+=' + Math.abs(distance); } else { @@ -717,20 +717,20 @@ if (typeof Object.create !== 'function') { dom.gv_filmstrip.animate({ left: distance },{ - duration: this.opts.transition_speed, - easing: this.opts.easing, + duration: this.opts.transition_speed, + easing: this.opts.easing, complete: function(){ if(to < self.numImages) { - dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))-(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap))); + dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))-(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap))); } else if(to >= (self.numImages * 2)) { - dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))+(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap))); + dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))+(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap))); } self.frameIterator = (to % self.numImages) + self.numImages; } }); } else { distance = (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to); - + if(distance > 0) { distance = '+=' + Math.abs(distance); } else { @@ -739,16 +739,16 @@ if (typeof Object.create !== 'function') { dom.gv_filmstrip.animate({ top: distance },{ - duration: this.opts.transition_speed, - easing: this.opts.easing, + duration: this.opts.transition_speed, + easing: this.opts.easing, complete: function(){ // adjust filmstrip position to ensure that there is always at least one frame behind // and (2 * filmstripSize) ahead if(to === 0) { - dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))-(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap))); + dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))-(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap))); self.frameIterator = self.numImages; } else if(to > ((self.numImages * 3) - (self.filmstripSize * 2))) { - dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))+(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap))); + dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))+(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap))); self.frameIterator = to - self.numImages; } else { self.frameIterator = to; @@ -756,42 +756,42 @@ if (typeof Object.create !== 'function') { } }); } - + } else { this.frameIterator = to; } }, - + startSlideshow: function(changeIcon) { var self = this, dom = this.dom; - + if(!self.opts.enable_slideshow) { return; } - + if(changeIcon) { dom.gv_navPlay.removeClass('gv_navPlay').addClass('gv_navPause'); } this.playing = true; dom.gv_galleryWrap.everyTime(this.opts.transition_interval,'slideshow_'+this.id,function(){ self.showNext(); }); }, - + stopSlideshow: function(changeIcon) { var self = this, dom = this.dom; - + if(changeIcon) { dom.gv_navPlay.removeClass('gv_navPause').addClass('gv_navPlay'); } this.playing = false; dom.gv_galleryWrap.stopTime('slideshow_'+this.id); }, - + enablePanning: function() { var self = this, dom = this.dom; - + if(!self.opts.enable_slideshow) { return; } - + dom.gv_panel.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize'); if(this.opts.pan_style === 'drag') { dom.gv_panelWrap.delegate('.gv_panel img','mousedown.galleryview',function(e) { @@ -810,30 +810,30 @@ if (typeof Object.create !== 'function') { distX = e.pageX - self.mouse.x; new_top = gv.getInt(image.css('top')) + distY; new_left = gv.getInt(image.css('left')) + distX; - + image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), n-resize'); - + if(new_top > 0) new_top = 0; if(new_left > 0) new_left = 0; - + if(new_top < (-1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)))) { new_top = -1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)); } if(new_left < (-1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)))) { new_left = -1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)); } - + image.css('top',new_top); image.css('left',new_left); } else { - image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize'); + image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize'); } }); } else { - + } }, - + bindActions: function() { var self = this, dom = this.dom; - + dom.gv_showOverlay.bind('click.galleryview',function(){ if(self.overlayVisible) { self.hideOverlay(250); @@ -841,7 +841,7 @@ if (typeof Object.create !== 'function') { self.showOverlay(250); } }); - + dom.gv_navWrap.delegate('div','click.galleryview',function(){ var el = $(this); if(el.hasClass('gv_navNext')) { @@ -855,63 +855,66 @@ if (typeof Object.create !== 'function') { } return false; }); - - dom.gv_panelNavNext.bind('click.galleryview',function(){ - self.showNext(); + + dom.gv_panelNavNext.bind('click.galleryview',function(){ + self.showNext(); return false; }); dom.gv_panelNavPrev.bind('click.galleryview',function(){ - self.showPrev(); + self.showPrev(); return false; }); - + dom.gv_filmstripWrap.delegate('.gv_frame','click.galleryview',function(){ var el = $(this), i = el.data('frameIndex'); - + this.navAction = 'frame'; self.showItem(i); return false; }); - + dom.gv_panelWrap.bind('mouseover.galleryview',function(){ self.showPanelNav(); }).bind('mouseout.galleryview',function(){ self.hidePanelNav(); }); }, - + unbindActions: function() { var self = this, dom = this.dom; - + dom.gv_showOverlay.unbind('click.galleryview'); dom.gv_panelNavNext.unbind('click.galleryview'); dom.gv_panelNavPrev.unbind('click.galleryview'); dom.gv_navWrap.undelegate('div','click.galleryview'); dom.gv_filmstripWrap.undelegate('.gv_frame','click.galleryview'); }, - + showPanelNav: function() { var self = this, dom = this.dom; - + dom.gv_panelNavNext.show(); - dom.gv_panelNavPrev.show(); + dom.gv_panelNavPrev.show(); }, - + hidePanelNav: function() { - var self = this, - dom = this.dom; - - dom.gv_panelNavNext.hide(); - dom.gv_panelNavPrev.hide(); + if(!this.opts.static_panel_nav) { + + var self = this, + dom = this.dom; + + dom.gv_panelNavNext.hide(); + dom.gv_panelNavPrev.hide(); + } }, - + init: function(options,el) { var self = this, dom = this.dom = {}; - + this.opts = $.extend({},$.fn.galleryView.defaults,options); this.el = el; this.$el = $(el); @@ -923,32 +926,32 @@ if (typeof Object.create !== 'function') { this.isMouseDown = false; this.mouse = { x: 0, y: 0 }; this.filmstripOrientation = (this.opts.filmstrip_position === 'top' || this.opts.filmstrip_position === 'bottom') ? 'horizontal' : 'vertical'; - + $(document).bind('mousemove.galleryview',function(e) { - self.mouse = {x: e.pageX, y: e.pageY}; + self.mouse = {x: e.pageX, y: e.pageY}; }); - + // create all necessary DOM elements $.each(this.elems,function(i,elem) { var elem = elem.split('.'); - + // if there is no tag name, assume
if(elem[0] === '') { elem[0] = 'div'; } - + // add jQuery element to dom object dom[elem[1]] = self.createElem({'class':elem[1]},elem[0]); }); - + dom.gv_imageStore.appendTo($('body')); - + dom.gv_galleryWrap.delegate('img','mousedown.galleryview',function(e){ if(e.preventDefault) { e.preventDefault(); } }); - + dom.gv_panel.addClass('gv_panel-loading'); dom.gv_frame.addClass('gv_frame-loading'); - + // nest DOM elements dom.gv_galleryWrap.hide().append(dom.gv_gallery); - + if(this.opts.show_panels) { dom.gv_gallery.append(dom.gv_panelWrap); if(this.opts.show_panel_nav) { @@ -958,14 +961,14 @@ if (typeof Object.create !== 'function') { dom.gv_panelWrap.append(dom.gv_infobar); } } - + if(this.opts.show_filmstrip) { dom.gv_gallery.append( dom.gv_filmstripWrap.append( dom.gv_filmstrip ) ); - + if(this.opts.show_filmstrip_nav) { dom.gv_gallery.append( dom.gv_navWrap.append( @@ -976,50 +979,54 @@ if (typeof Object.create !== 'function') { ); } } - + if(this.opts.enable_overlays) { - dom.gv_panelWrap.append(dom.gv_overlay,dom.gv_showOverlay); + dom.gv_panelWrap.append(dom.gv_overlay,dom.gv_showOverlay); } - + if(this.opts.show_captions) { - dom.gv_frame.append(dom.gv_caption).appendTo(dom.gv_gallery); + dom.gv_frame.append(dom.gv_caption).appendTo(dom.gv_gallery); } - + //swap out source element with gallery this.$el.replaceWith(dom.gv_galleryWrap); - + if(this.opts.pan_images) { this.enablePanning(); } - + // convert source images into gvImage objects this.storeImages(); - + // block out dimensions/positions of gallery elements this.buildGallery(); - + // begin loading images into gallery this.initImages(); - + // set up transitions, buttons this.bindActions(); - + // remove temporary frame element dom.gv_frame.remove(); - + // show gallery dom.gv_galleryWrap.show(); - + if(this.opts.autoplay) { this.startSlideshow(true); } - + this.updateOverlay(this.iterator); this.updateFilmstrip(this.frameIterator); + + if(this.opts.static_panel_nav) { + this.showPanelNav(); + } } - + }; // END GalleryView - + /* MAIN PLUGIN CODE */ @@ -1031,21 +1038,22 @@ if (typeof Object.create !== 'function') { }); } }; - + /* Default Options Object literal storing default plugin options */ $.fn.galleryView.defaults = { - + // General Options transition_speed: 1000, //INT - duration of panel/frame transition (in milliseconds) transition_interval: 5000, //INT - delay between panel/frame transitions (in milliseconds) easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin) - + // Panel Options show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery show_panel_nav: true, //BOOLEAN - flag to show or hide panel navigation buttons + static_panel_nav: false, //BOOLEAN - flag to make panel navigation buttons always on (unless `show_panel_nav` is false) enable_overlays: false, //BOOLEAN - flag to show or hide panel overlays panel_width: 800, //INT - width of gallery panel (in pixels) panel_height: 400, //INT - height of gallery panel (in pixels) @@ -1055,14 +1063,14 @@ if (typeof Object.create !== 'function') { pan_images: false, //BOOLEAN - flag to allow user to grab/drag oversized images within gallery pan_style: 'drag', //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position pan_smoothness: 15, //INT - determines smoothness of tracking pan animation (higher number = smoother) - + // Filmstrip Options start_frame: 1, //INT - index of panel/frame to show first when gallery loads show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery show_filmstrip_nav: true, //BOOLEAN - flag indicating whether to display navigation buttons enable_slideshow: true, //BOOLEAN - flag indicating whether to display slideshow play/pause button autoplay: false, //BOOLEAN - flag to start slideshow on gallery load - show_captions: false, //BOOLEAN - flag to show or hide frame captions + show_captions: false, //BOOLEAN - flag to show or hide frame captions filmstrip_size: 3, //INT - number of frames to show in filmstrip-only gallery filmstrip_style: 'scroll', //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary) filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right) @@ -1071,7 +1079,7 @@ if (typeof Object.create !== 'function') { frame_opacity: 0.4, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent) frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above) frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels) - + // Info Bar Options show_infobar: true, //BOOLEAN - flag to show or hide infobar infobar_opacity: 1 //FLOAT - transparency for info bar