'+G.O.icons.viewerZoomOut+'
';
+ case 'zoom':
+ r += 'nGEvent" data-ngy2action="zoomIn">'+ G.O.icons.viewerZoomIn +''+ G.O.icons.viewerZoomOut +'
';
break;
case 'fullscreenButton':
+ case 'fullscreen':
var s = G.O.icons.viewerFullscreenOn;
if( ngscreenfull.enabled && G.VOM.viewerIsFullscreen ) {
s = G.O.icons.viewerFullscreenOff;
@@ -8583,25 +9416,32 @@
r += 'setFullscreenButton fullscreenButton nGEvent" data-ngy2action="fullScreen">'+s+'';
break;
case 'infoButton':
- r += 'infoButton nGEvent" data-ngy2action="info">'+G.O.icons.viewerInfo+'';
+ case 'info':
+ r += 'infoButton nGEvent" data-ngy2action="info">'+ G.O.icons.viewerInfo +'';
break;
case 'linkOriginalButton':
+ case 'linkOriginal':
r += 'linkOriginalButton nGEvent" data-ngy2action="linkOriginal">' + G.O.icons.viewerLinkOriginal + '';
break;
case 'closeButton':
- r += 'closeButton nGEvent" data-ngy2action="close">'+G.O.icons.buttonClose+'';
+ case 'close':
+ r += 'closeButton nGEvent" data-ngy2action="close">'+ G.O.icons.buttonClose +'';
break;
case 'shareButton':
- r += 'nGEvent" data-ngy2action="share">'+G.O.icons.viewerShare+'';
+ case 'share':
+ r += 'nGEvent" data-ngy2action="share">'+ G.O.icons.viewerShare +'';
break;
case 'label':
- r += '">';
+ r += '">';
+ break;
+ case 'shoppingcart':
+ r += 'closeButton nGEvent" data-ngy2action="shoppingcart">'+ G.O.icons.viewerShoppingcart +'';
break;
default:
// custom button
if( e.indexOf('custom') == 0 ) {
var t = '';
- // content to display from custom script
+ // content to display from custom script
var fu = G.O.fnImgToolbarCustInit;
if( fu !== null ) {
typeof fu == 'function' ? fu(e) : window[fu](e);
@@ -8666,10 +9506,10 @@
function ViewerToolbarElementContent() {
- var vomIdx=G.VOM.currItemIdx;
+ var vomIdx = G.VOM.content.current.vIdx;
if( vomIdx == null ) { return; }
- var item=G.VOM.NGY2Item(0);
+ var item = G.VOM.content.current.NGY2Item();
// LABEL
var setTxt = false;
@@ -8706,9 +9546,9 @@
// custom elements
var $cu = G.VOM.$viewer.find('.ngy2CustomBtn');
var fu = G.O.fnImgToolbarCustDisplay;
- if( $cu.length > 0 && fu !== null ) {
+ if( $cu.length > 0 && fu !== null ) {
typeof fu == 'function' ? fu($cu, item) : window[fu]($cu, item);
- }
+ }
// set event handlers again
ViewerToolsOn();
@@ -8725,34 +9565,34 @@
// pan left/right the current media
// window.ng_draf( function() {
- G.VOM.$mediaCurrent[0].style[G.CSStransformName] = 'translate(' + posX + 'px, 0px)';
+ G.VOM.content.current.$media[0].style[G.CSStransformName] = 'translate(' + posX + 'px, 0px)';
// });
- var itemPrevious = G.VOM.NGY2Item(-1);
- var itemNext = G.VOM.NGY2Item(1);
+ var itemPrevious = G.VOM.content.previous.NGY2Item();
+ var itemNext = G.VOM.content.next.NGY2Item();
// next/previous media
if( G.O.imageTransition.startsWith('SWIPE') ) {
if( itemPrevious.mediaTransition() ) {
- ViewerSetMediaVisibility(G.VOM.NGY2Item(-1), G.VOM.$mediaPrevious, 1);
+ ViewerSetMediaVisibility(G.VOM.content.previous, 1);
}
if( itemNext.mediaTransition() ) {
- ViewerSetMediaVisibility(G.VOM.NGY2Item(1), G.VOM.$mediaNext, 1);
+ ViewerSetMediaVisibility(G.VOM.content.next, 1);
}
var sc = Math.min( Math.max( Math.abs(posX) / G.VOM.window.lastWidth, .8), 1);
if( G.O.imageTransition == 'SWIPE' ) { sc = 1; }
if( posX > 0 ) {
- var dir = G.VOM.window.lastWidth;
+ var dir = G.VOM.window.lastWidth;
if( itemPrevious.mediaTransition() ) {
// window.ng_draf( function() {
- G.VOM.$mediaPrevious[0].style[G.CSStransformName] = 'translate(' + (-dir + posX) + 'px, 0px) scale(' + sc + ')';
+ G.VOM.content.previous.$media[0].style[G.CSStransformName] = 'translate(' + (-dir + posX) + 'px, 0px) scale(' + sc + ')';
// });
}
if( itemNext.mediaTransition() ) {
// window.ng_draf( function() {
- G.VOM.$mediaNext[0].style[G.CSStransformName] = 'translate(' + (dir) + 'px, 0px) scale(' + sc + ')';
+ G.VOM.content.next.$media[0].style[G.CSStransformName] = 'translate(' + (dir) + 'px, 0px) scale(' + sc + ')';
// });
}
}
@@ -8760,12 +9600,12 @@
var dir = -G.VOM.window.lastWidth;
if( itemNext.mediaTransition() ) {
// window.ng_draf( function() {
- G.VOM.$mediaNext[0].style[G.CSStransformName] = 'translate(' + (-dir + posX) + 'px, 0px) scale(' + sc + ')';
+ G.VOM.content.next.$media[0].style[G.CSStransformName] = 'translate(' + (-dir + posX) + 'px, 0px) scale(' + sc + ')';
// });
}
if( itemPrevious.mediaTransition() ) {
// window.ng_draf( function() {
- G.VOM.$mediaPrevious[0].style[G.CSStransformName] = 'translate(' + (dir) + 'px, 0px) scale(' + sc + ')';
+ G.VOM.content.previous.$media[0].style[G.CSStransformName] = 'translate(' + (dir) + 'px, 0px) scale(' + sc + ')';
// });
}
}
@@ -8773,24 +9613,24 @@
if( G.O.imageTransition == 'SLIDEAPPEAR' ) {
- G.VOM.$mediaPrevious[0].style[G.CSStransformName] = '';
- G.VOM.$mediaNext[0].style[G.CSStransformName] = '';
+ G.VOM.content.previous.$media[0].style[G.CSStransformName] = '';
+ G.VOM.content.next.$media[0].style[G.CSStransformName] = '';
if( posX < 0 ) {
var o = (-posX) / G.VOM.window.lastWidth;
if( itemNext.mediaTransition() ) {
- ViewerSetMediaVisibility(itemNext, G.VOM.$mediaNext, o);
+ ViewerSetMediaVisibility(G.VOM.content.next, o);
}
if( itemPrevious.mediaTransition() ) {
- ViewerSetMediaVisibility(itemPrevious, G.VOM.$mediaPrevious, 0);
+ ViewerSetMediaVisibility(G.VOM.content.previous, 0);
}
}
else {
var o = posX / G.VOM.window.lastWidth;
if( itemPrevious.mediaTransition() ) {
- ViewerSetMediaVisibility(itemPrevious, G.VOM.$mediaPrevious, o);
+ ViewerSetMediaVisibility(G.VOM.content.previous, o);
}
if( itemNext.mediaTransition() ) {
- ViewerSetMediaVisibility(itemNext, G.VOM.$mediaNext, 0);
+ ViewerSetMediaVisibility(G.VOM.content.next, 0);
}
}
}
@@ -8798,162 +9638,194 @@
}
// Display next image
- function DisplayNextMedia() {
+ function DisplayNextMedia( velocity ) {
+ velocity = velocity || 0;
+
if( G.VOM.viewerMediaIsChanged || ((new Date().getTime()) - G.VOM.timeImgChanged < 300) ) { return; }
TriggerCustomEvent('lightboxNextImage');
- DisplayInternalViewer(G.VOM.IdxNext(), 'nextImage');
+ LightboxDisplay('nextImage', velocity);
};
// Display previous image
- function DisplayPreviousMedia() {
+ function DisplayPreviousMedia( velocity ) {
+ velocity = velocity || 0;
+
if( G.VOM.viewerMediaIsChanged || ((new Date().getTime()) - G.VOM.timeImgChanged < 300) ) { return; }
if( G.VOM.playSlideshow ) {
SlideshowToggle();
}
TriggerCustomEvent('lightboxPreviousImage');
- DisplayInternalViewer(G.VOM.IdxPrevious(), 'previousImage');
+ LightboxDisplay( 'previousImage', velocity);
};
-
- // Display image (and run animation)
- function DisplayInternalViewer( newVomIdx, displayType ) {
- if( G.VOM.playSlideshow ) { window.clearTimeout(G.VOM.playSlideshowTimerID); }
-
- var itemOld = G.VOM.NGY2Item(0);
- var itemNew = G.I[G.VOM.items[newVomIdx].ngy2ItemIdx];
- var $new = (displayType == 'nextImage' ? G.VOM.$mediaNext : G.VOM.$mediaPrevious);
- if( displayType == 'nextImage' ) {
- ViewerSetMediaVisibility(G.VOM.NGY2Item(-1), G.VOM.$mediaPrevious, 0);
- }
- else {
- ViewerSetMediaVisibility(G.VOM.NGY2Item(1), G.VOM.$mediaNext, 0);
- }
+
+
+ // Display image (with animation if possible)
+ function LightboxDisplay( displayType, velocity ) {
+
+ velocity = velocity || 0;
+
+ if( G.O.debugMode && console.timeline ) { console.timeline('nanogallery2_viewer'); }
+
+ if( G.VOM.playSlideshow ) { window.clearTimeout( G.VOM.playSlideshowTimerID ); }
+
+ var current_content_item = null;
+ var new_content_item = null;
G.VOM.timeImgChanged = new Date().getTime();
G.VOM.viewerMediaIsChanged = true;
G.VOM.zoom.isZooming = false;
- ResizeInternalViewer(true);
-
- if( G.O.debugMode && console.timeline ) { console.timeline('nanogallery2_viewer'); }
+ ResizeLightbox(true);
+
+ switch( displayType ) {
+ case '':
+ current_content_item = G.VOM.content.current;
+ new_content_item = G.VOM.content.current;
+ break;
+ case 'previousImage':
+ current_content_item = G.VOM.content.current;
+ new_content_item = G.VOM.content.previous;
+ break;
+ default:
+ current_content_item = G.VOM.content.current;
+ new_content_item = G.VOM.content.next;
+ }
+
+ // SetLocationHash( next_ng2item.albumID, next_ng2item.GetID() );
+ SetLocationHash( new_content_item.NGY2Item().albumID, new_content_item.NGY2Item().GetID() );
- SetLocationHash( itemNew.albumID, itemNew.GetID() );
+ if( displayType == '' ) {
+ // first media -> no transition -> exit
+ return;
+ }
// animation duration is proportional of the remaining distance
var vP = G.GOM.cache.viewport;
- var dur = 400 * (vP.w - Math.abs(G.VOM.swipePosX)) / vP.w;
+ var t_easing = '';
+ var t_dur = 500 * (vP.w - Math.abs(G.VOM.swipePosX)) / vP.w;
+ if( velocity > 0 ) {
+ // velocity = pixels/millisecond
+ t_dur = Math.min( (vP.w - Math.abs(G.VOM.swipePosX)) / velocity, t_dur);
+ t_easing = 'linear'; // use linear to avoid a slow-down in the transition after user swipe
+ }
- if( displayType == '' ) {
- // first image --> just appear / no slide animation
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 1);
- if( G.CSStransformName == null ) {
- // no CSS transform support -> no animation
- ViewerSetMediaVisibility(itemNew, $new, 1);
- DisplayInternalViewerComplete(displayType, newVomIdx);
- }
- else {
- ViewerSetMediaVisibility(itemNew, $new, 0);
- new NGTweenable().tween({
- from: { opacity: 0 },
- to: { opacity: 1 },
- attachment: { dT: displayType, item: itemOld },
- easing: 'easeInOutSine',
- delay: 30,
- duration: 400,
- step: function (state, att) {
- // using scale is not a good idea on Chrome -> image will be blurred
- G.VOM.$content.css('opacity', state.opacity);
- },
- finish: function (state, att) {
- ViewerToolsUnHide();
- DisplayInternalViewerComplete(att.dT, newVomIdx);
- }
- });
- }
+
+ // animate the image transition between 2 medias
+
+ if( G.CSStransformName == null ) {
+ // no CSS transform support -> no animation
+ ViewerSetMediaVisibility(new_content_item, 1);
+ ViewerSetMediaVisibility(current_content_item, 1);
+ LightboxDisplayFinalize(displayType);
}
else {
- // animate the image transition between 2 images
- if( G.CSStransformName == null ) {
- // no CSS transform support -> no animation
- ViewerSetMediaVisibility(itemNew, $new, 1);
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 1);
- DisplayInternalViewerComplete(displayType, newVomIdx);
- }
- else {
- switch( G.O.imageTransition ) {
- case 'SWIPE':
- case 'SWIPE2':
- var dir = ( displayType == 'nextImage' ? - vP.w : vP.w );
- $new[0].style[G.CSStransformName] = 'translate('+(-dir)+'px, 0px) '
+ switch( G.O.imageTransition ) {
+ case 'SWIPE':
+ case 'SWIPE2':
+ var dir = ( displayType == 'nextImage' ? - vP.w : vP.w );
+ new_content_item.$media[0].style[G.CSStransformName] = 'translate(' + (-dir) + 'px, 0px) '
- new NGTweenable().tween({
- from: { t: G.VOM.swipePosX },
- to: { t: (displayType == 'nextImage' ? - vP.w : vP.w) },
- attachment: { dT: displayType, $e: $new, itemNew: itemNew, itemOld: itemOld, dir: dir },
- delay: 30,
- duration: dur,
- easing: (G.O.imageTransition == 'swipe' ? 'easeInOutSine' : 'easeInOutCubic'),
- step: function (state, att) {
- // current media
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 1);
- // G.VOM.$mediaCurrent[0].style[G.CSStransformName] = 'translate(' + state.t + 'px, 0px) rotate(' + att.itemOld.rotationAngle + 'deg)';
- G.VOM.$mediaCurrent[0].style[G.CSStransformName] = 'translate(' + state.t + 'px, 0px)';
- // new media
- if( att.itemNew.mediaTransition() ) {
- ViewerSetMediaVisibility(att.itemNew, att.$e, 1);
-
- var sc = Math.min( Math.max( (Math.abs(state.t)) / G.VOM.window.lastWidth, .8), 1);
- if( G.O.imageTransition == 'SWIPE' ) { sc = 1; }
- // att.$e[0].style[G.CSStransformName] = 'translate(' + (-att.dir+state.t) + 'px, 0px) scale(' + sc + ') rotate(' + att.itemNew.rotationAngle + 'deg)';
- att.$e[0].style[G.CSStransformName] = 'translate(' + (-att.dir+state.t) + 'px, 0px) scale(' + sc + ')';
- }
- },
- finish: function (state, att) {
- G.VOM.$mediaCurrent[0].style[G.CSStransformName] = '';
- att.$e[0].style[G.CSStransformName] = '';
- DisplayInternalViewerComplete(att.dT, newVomIdx);
+ if( velocity == 0 ) {
+ t_easing = G.O.imageTransition == 'swipe' ? 'easeInOutSine' : 'easeInQuart';
+ }
+
+ ViewerSetMediaVisibility(G.VOM.content.current, 1);
+ G.VOM.content.current.$media[0].style[G.CSStransformName] = 'translate(0px, 0px)';
+ ViewerSetMediaVisibility(new_content_item, 1);
+
+ new NGTweenable().tween({
+ from: { t: G.VOM.swipePosX },
+ to: { t: (displayType == 'nextImage' ? - vP.w : vP.w) },
+ attachment: { dT: displayType, new_content_item: new_content_item, dir: dir, media_transition: new_content_item.NGY2Item().mediaTransition()},
+ // delay: 30,
+ duration: t_dur,
+ easing: ( t_easing ),
+ step: function (state, att) {
+ // current displayed media
+ G.VOM.content.current.$media[0].style[G.CSStransformName] = 'translate(' + state.t + 'px, 0px)';
+
+ // new media
+ if( att.media_transition ) {
+ // new media supports transition
+ var sc = Math.min( Math.max( (Math.abs(state.t)) / G.VOM.window.lastWidth, .8), 1);
+ if( G.O.imageTransition == 'SWIPE' ) { sc = 1; }
+ att.new_content_item.$media[0].style[G.CSStransformName] = 'translate(' + (-att.dir+state.t) + 'px, 0px) scale(' + sc + ')';
}
- });
- break;
-
- case 'SLIDEAPPEAR':
- default:
- var dir=(displayType == 'nextImage' ? - vP.w : vP.w);
- var op = (Math.abs(G.VOM.swipePosX)) / G.VOM.window.lastWidth;
- $new[0].style[G.CSStransformName] = '';
- new NGTweenable().tween({
- from: { o: op, t: G.VOM.swipePosX },
- to: { o: 1, t: (displayType == 'nextImage' ? - vP.w : vP.w) },
- attachment: { dT:displayType, $e:$new, itemNew: itemNew, itemOld: itemOld, dir: dir },
- delay: 30,
- duration: dur,
- easing: 'easeInOutSine',
- step: function (state, att) {
- // current media - translate
- // G.VOM.$mediaCurrent[0].style[G.CSStransformName]= 'translate('+state.t+'px, 0px) rotate(' + att.itemOld.rotationAngle + 'deg)';
- G.VOM.$mediaCurrent[0].style[G.CSStransformName]= 'translate('+state.t+'px, 0px)';
- // new media - opacity
- if( att.itemNew.mediaTransition() ) {
- ViewerSetMediaVisibility(att.itemNew, att.$e, state.o);
- }
- },
- finish: function (state, att) {
- G.VOM.$mediaCurrent[0].style[G.CSStransformName]= '';
- DisplayInternalViewerComplete(att.dT, newVomIdx);
+ },
+ finish: function (state, att) {
+ G.VOM.content.current.$media[0].style[G.CSStransformName] = '';
+ ViewerSetMediaVisibility(G.VOM.content.current, 0);
+ att.new_content_item.$media[0].style[G.CSStransformName] = '';
+ LightboxDisplayFinalize(att.dT);
+ }
+ });
+ break;
+
+ case 'SLIDEAPPEAR':
+ default:
+ var dir=(displayType == 'nextImage' ? - vP.w : vP.w);
+ var op = (Math.abs(G.VOM.swipePosX)) / G.VOM.window.lastWidth;
+ new_content_item.$media[0].style[G.CSStransformName] = '';
+ if( velocity == 0 ) {
+ t_easing ='easeInOutSine';
+ }
+ new NGTweenable().tween({
+ from: { o: op, t: G.VOM.swipePosX },
+ to: { o: 1, t: (displayType == 'nextImage' ? - vP.w : vP.w) },
+ attachment: { dT: displayType, new_content_item:new_content_item, media_transition: new_content_item.NGY2Item().mediaTransition() },
+ delay: 30,
+ duration: t_dur,
+ easing: t_easing,
+ step: function (state, att) {
+ // current media - translate
+ G.VOM.content.current.$media[0].style[G.CSStransformName]= 'translate('+state.t+'px, 0px)';
+
+ // new media - opacity
+ if( att.media_transition ) {
+ // new media supports transition
+ ViewerSetMediaVisibility(att.new_content_item, state.o);
}
- });
- break;
- }
+ },
+ finish: function (state, att) {
+ G.VOM.content.current.$media[0].style[G.CSStransformName]= '';
+ LightboxDisplayFinalize(att.dT);
+ }
+ });
+ break;
}
}
+
}
- function DisplayInternalViewerComplete( displayType, newVomIdx ) {
- G.VOM.currItemIdx = newVomIdx;
+ function LightboxDisplayFinalize( displayType ) {
+
+ var newVomIdx = 0;
+ switch( displayType ) {
+ case '':
+ // first media to display in lightbox
+ newVomIdx = G.VOM.content.current.vIdx;
+ break;
+ case 'previousImage':
+ // previous media
+ newVomIdx = G.VOM.content.previous.vIdx;
+ break;
+ default:
+ // next media
+ newVomIdx = G.VOM.content.next.vIdx;
+ }
+
+
+
+ G.VOM.content.current.vIdx = newVomIdx;
+ G.VOM.content.next.vIdx = G.VOM.IdxNext();
+ G.VOM.content.previous.vIdx = G.VOM.IdxPrevious();
+ G.VOM.gallery.Resize();
+ G.VOM.gallery.SetThumbnailActive();
- var ngy2item = G.VOM.NGY2Item(0);
+ var ngy2item = G.VOM.content.current.NGY2Item();
ViewerToolbarElementContent();
if( G.O.debugMode && console.timeline ) { console.timelineEnd('nanogallery2_viewer'); }
@@ -8966,73 +9838,74 @@
G.VOM.swipePosX = 0;
if( displayType != '' ) {
// not on first media display
- // G.VOM.$mediaCurrent.off("click");
- G.VOM.$mediaCurrent.removeClass('imgCurrent');
+ G.VOM.content.current.$media.removeClass('imgCurrent');
- var $tmp = G.VOM.$mediaCurrent;
+ var $tmp = G.VOM.content.current.$media;
switch( displayType ) {
case 'nextImage':
- G.VOM.$mediaCurrent = G.VOM.$mediaNext;
- G.VOM.$mediaNext = $tmp;
+ G.VOM.content.current.$media = G.VOM.content.next.$media;
+ G.VOM.content.next.$media = $tmp;
break;
case 'previousImage':
- G.VOM.$mediaCurrent = G.VOM.$mediaPrevious;
- G.VOM.$mediaPrevious = $tmp;
+ G.VOM.content.current.$media = G.VOM.content.previous.$media;
+ G.VOM.content.previous.$media = $tmp;
break;
}
}
- G.VOM.$mediaCurrent.addClass('imgCurrent');
+ G.VOM.content.current.$media.addClass('imgCurrent');
// re-sort the media containers --> current on top
var $pans = G.VOM.$content.find('.nGY2ViewerMediaPan');
- G.VOM.$mediaCurrent.insertAfter($pans.last());
+ G.VOM.content.current.$media.insertAfter($pans.last());
if( ngy2item.mediaKind == 'img' && ngy2item.imageWidth == 0 ) {
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 0);
+ ViewerSetMediaVisibility(G.VOM.content.current, 0);
}
else {
- G.VOM.$mediaCurrent.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 1);
+ G.VOM.content.current.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
+ ViewerSetMediaVisibility(G.VOM.content.current, 1);
}
// set the new NEXT media
- G.VOM.$mediaNext.empty();
- var nextItem = G.VOM.NGY2Item(1);
+ G.VOM.content.next.$media.empty();
+ var nextItem = G.VOM.content.next.NGY2Item();
var spreloader = '';
if( nextItem.mediaKind == 'img' && nextItem.imageWidth != 0 && nextItem.imageHeight != 0 ) {
spreloader = '';
}
- G.VOM.$mediaNext.append( spreloader + nextItem.mediaMarkup );
- ViewerSetMediaVisibility(nextItem, G.VOM.$mediaNext, 0);
+ G.VOM.content.next.$media.append( spreloader + nextItem.mediaMarkup );
+ ViewerSetMediaVisibility(G.VOM.content.next, 0);
+ ViewerSetMediaVisibility(G.VOM.content.previous, 0);
if( nextItem.mediaKind == 'img' ) {
G.VOM.ImageLoader.loadImage(VieweImgSizeRetrieved, nextItem);
- }
+ }
else {
- ViewerMediaCenterNotImg( G.VOM.$mediaNext );
+ ViewerMediaCenterNotImg( G.VOM.content.next.$media );
}
// set the new PREVIOUS media
- G.VOM.$mediaPrevious.empty();
- var previousItem = G.VOM.NGY2Item(-1);
+ G.VOM.content.previous.$media.empty();
+ var previousItem = G.VOM.content.previous.NGY2Item();
spreloader = '';
if( previousItem.mediaKind == 'img' && previousItem.imageWidth != 0 && previousItem.imageHeight != 0 ) {
spreloader = '';
}
- G.VOM.$mediaPrevious.append( spreloader + previousItem.mediaMarkup );
- ViewerSetMediaVisibility(previousItem, G.VOM.$mediaPrevious, 0);
+ G.VOM.content.previous.$media.append( spreloader + previousItem.mediaMarkup );
+ ViewerSetMediaVisibility(G.VOM.content.previous, 0);
+ ViewerSetMediaVisibility(G.VOM.content.next, 0);
if( previousItem.mediaKind == 'img' ) {
G.VOM.ImageLoader.loadImage( VieweImgSizeRetrieved, previousItem );
}
else {
- ViewerMediaCenterNotImg( G.VOM.$mediaPrevious );
+ ViewerMediaCenterNotImg( G.VOM.content.previous.$media );
}
// slideshow mode - wait until image is loaded to start the delay for next image
if( G.VOM.playSlideshow ) {
- G.VOM.$mediaCurrent.children().eq(1).ngimagesLoaded().always( function( instance ) {
+ G.VOM.content.current.$media.children().eq(1).ngimagesLoaded().always( function( instance ) {
if( G.VOM.playSlideshow ) {
// in the meantime the user could have stopped the slideshow
G.VOM.playSlideshowTimerID = window.setTimeout( function(){ DisplayNextMedia(); }, G.VOM.slideshowDelay );
@@ -9045,11 +9918,11 @@
// e.stopPropagation();
// if( (new Date().getTime()) - G.VOM.timeImgChanged < 400 ) { return; }
// StopPropagationPreventDefault(e);
- // CloseInternalViewer(G.VOM.currItemIdx);
+ // LightboxClose(G.VOM.currItemIdx);
// return false;
// });
- ResizeInternalViewer();
+ ResizeLightbox();
G.VOM.viewerMediaIsChanged = false;
TriggerCustomEvent('lightboxImageDisplayed');
@@ -9059,36 +9932,40 @@
// Is fired as soon as the size of an image has been retrieved (the download may not be finished)
function VieweImgSizeRetrieved(w, h, item, n) {
+
item.imageWidth = w;
item.imageHeight = h;
// image sized retrieved for currently displayed media
- // if( G.VOM.$mediaCurrent !== null && G.VOM.$mediaCurrent.children().attr('src') == item.responsiveURL() ) {
- if( G.VOM.NGY2Item(0) == item ) {
+ if( G.VOM.content.current.NGY2Item() == item ) {
// it is the current displayed media
- G.VOM.$mediaCurrent.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
- ViewerSetMediaVisibility(G.VOM.NGY2Item(0), G.VOM.$mediaCurrent, 1);
+ G.VOM.content.current.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
+ ViewerSetMediaVisibility(G.VOM.content.current, 1);
G.VOM.zoom.userFactor = 1;
}
-
- if( G.VOM.NGY2Item(1) == item ) { // next media
- G.VOM.$mediaNext.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
- }
- if( G.VOM.NGY2Item(-1) == item ) { // previous media
- G.VOM.$mediaPrevious.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
- }
+
+ if( G.VOM.content.next.NGY2Item() == item ) { // next media
+ G.VOM.content.next.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
+ }
+ if( G.VOM.content.previous.NGY2Item() == item ) { // previous media
+ G.VOM.content.previous.$media.children().eq(0).attr('class', 'nGY2ViewerMediaLoaderHidden'); // hide preloader
+ }
ViewerMediaSetPosAndZoom();
}
// Viewer - Set the visibility of the media and it's container
- function ViewerSetMediaVisibility(item, $media, opacity ) {
+ // function ViewerSetMediaVisibility(item, $media, opacity ) {
+ function ViewerSetMediaVisibility( content_item, opacity ) {
+
+ var item = content_item.NGY2Item();
+ var $media = content_item.$media;
if( item.mediaKind == 'img' && item.imageWidth == 0 ) {
// do not display image if width is unknown (--> callback will set the width when know)
// setting opacity to 0 is not enough -> it is mandatory to change also the visibility to hidden to avoid responds to events (click/touch)
- // $media.children().css({ opacity: 0, visibility: 'hidden' });
+ // $media.children().css({ opacity: 0, visibility: 'hidden' });
$media.children().eq(1).css({ opacity: 0, visibility: 'hidden' }); // hide media
// $media.css({ opacity: 0, visibility: 'hidden' });
return;
@@ -9101,25 +9978,29 @@
}
else {
// $media.css({ opacity: opacity, visibility: 'visible' });
- $media.children().css({ opacity: opacity, visibility: 'visible' }); // display media
+ $media.children().css({ opacity: opacity, visibility: 'visible' }); // display media
}
}
// Close the internal lightbox
- function CloseInternalViewer( vomIdx ) {
+ function LightboxClose( vomIdx ) {
+
+
+ if( vomIdx == undefined ) {
+ vomIdx = G.VOM.content.current.vIdx;
+ }
G.VOM.viewerMediaIsChanged = false;
if( G.VOM.viewerDisplayed ) {
// set scrollbar visible again
- jQuery('body').css({ overflowX: G.VOM.saveOverflowX, overflowY: G.VOM.saveOverflowY});
- // jQuery('body').css({overflow: 'visible'});
-
+ jQuery("body").removeClass("nGY2_body_scrollbar");
+ jQuery("#nGY2_body_scrollbar_style").remove();
if( G.VOM.playSlideshow ) {
- window.clearTimeout(G.VOM.playSlideshowTimerID);
+ window.clearTimeout( G.VOM.playSlideshowTimerID );
G.VOM.playSlideshow = false;
}
@@ -9133,9 +10014,11 @@
ngscreenfull.exit();
}
- G.VOM.$cont.hide(0).off().show(0).html('').remove();
+ G.VOM.$baseCont.hide(0).off().show(0).html('').remove();
G.VOM.viewerDisplayed = false;
+ if( G.O.lightboxStandalone ) { return; }
+
if( G.O.thumbnailAlbumDisplayImage ) {
// content of album displayed directly in lightbox (no gallery display for album content)
if( vomIdx == null ) {
@@ -9175,8 +10058,8 @@
}
- // Internal viewer resized -> reposition elements
- function ResizeInternalViewer( forceUpdate ) {
+ // Lightbox resized -> reposition elements
+ function ResizeLightbox( forceUpdate ) {
forceUpdate = typeof forceUpdate !== 'undefined' ? forceUpdate : false;
if( G.VOM.$toolbar === null ) { return; } // viewer build not finished
@@ -9185,44 +10068,56 @@
// window.requestAnimationFrame( function() { // synchronize with screen
var windowsW = G.VOM.$viewer.width();
var windowsH = G.VOM.$viewer.height();
- var $elt = G.VOM.$mediaCurrent.children().eq(1);
- if( $elt == null || G.VOM.currItemIdx == -1 ) { return; }
-
+ var $elt = G.VOM.content.current.$media.children().eq(1);
+ if( $elt == null || G.VOM.content.current.vIdx == -1 ) { return; }
+
if( !forceUpdate && G.VOM.window.lastWidth == windowsW && G.VOM.window.lastHeight == windowsH ) { return; }
G.VOM.window.lastWidth = windowsW;
G.VOM.window.lastHeight = windowsH;
- // var vwImgC_H=$elt.height(),
- // vwImgC_W=$elt.width(),
- // vwImgC_OHt=$elt.outerHeight(true),
- // vwImgC_OHf=$elt.outerHeight(false);
-
var $tb = G.VOM.$toolbar.find('.toolbar');
- var tb_OHt = $tb.outerHeight(true);
+ // var tb_OHt = $tb.outerHeight(true);
+
+ var galleryHeight = 0;
+ var cBottom = 0;
+ // Height of the thumbnails gallery
+ if( G.O.viewerGallery != 'none' ) {
+ galleryHeight = G.O.viewerGalleryTHeight + 10;
+ }
+ if( G.O.viewerGallery == 'bottom' ) {
+ cBottom = galleryHeight;
+ }
+
+
switch( G.O.viewerToolbar.position ) {
+ case 'top':
case 'topOverImage':
G.VOM.$content.css({height: windowsH, width: windowsW, top: 0 });
G.VOM.$toolbar.css({top: 0, bottom: ''});
break;
- case 'top':
- windowsH -= tb_OHt;
- G.VOM.$content.css({height: windowsH, width: windowsW, top: tb_OHt });
- G.VOM.$toolbar.css({top: 0});
- break;
- case 'bottomOverImage':
- G.VOM.$content.css({height:windowsH, width: windowsW, bottom: 0, top: 0 });
- G.VOM.$toolbar.css({bottom: 0});
- break;
+ // case 'top':
+ // windowsH -= tb_OHt;
+ // G.VOM.$content.css({height: windowsH, width: windowsW, top: tb_OHt });
+ // G.VOM.$toolbar.css({top: 0});
+ // break;
case 'bottom':
+ case 'bottomOverImage':
default:
- windowsH -= tb_OHt;
- G.VOM.$content.css({ width: windowsW, top: 0, bottom: tb_OHt });
- G.VOM.$toolbar.css({bottom: 0});
+ windowsH -= cBottom;
+ G.VOM.$content.css({height: windowsH, width: windowsW, bottom: -cBottom, top: 0 });
+ G.VOM.$toolbar.css({bottom: galleryHeight});
break;
+ // case 'bottom':
+ // default:
+ // windowsH -= tb_OHt;
+ // G.VOM.$content.css({ width: windowsW, top: 0, bottom: tb_OHt });
+ // G.VOM.$toolbar.css({bottom: galleryHeight});
+ // break;
}
-
+
+
if( !G.VOM.viewerMediaIsChanged && G.VOM.zoom.isZooming ) {
ViewerMediaSetPosAndZoom();
}
@@ -9237,11 +10132,11 @@
delay: 0,
duration: 150,
step: function (state) {
- G.VOM.zoom.userFactor=state.userFactor;
- G.VOM.panPosX=state.panPosX;
- G.VOM.panPosY=state.panPosY;
- G.VOM.zoom.posX=state.zoomPosX;
- G.VOM.zoom.posY=state.zoomPosY;
+ G.VOM.zoom.userFactor = state.userFactor;
+ G.VOM.panPosX = state.panPosX;
+ G.VOM.panPosY = state.panPosY;
+ G.VOM.zoom.posX = state.zoomPosX;
+ G.VOM.zoom.posY = state.zoomPosY;
ViewerMediaSetPosAndZoom();
},
finish: function (state) {
@@ -9262,115 +10157,156 @@
}
}
+ // Retrieve the first parent element which is scrollable
+ // source: ncubica - https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
+ // returns null if nothing found
+ function getScrollableParent (node) {
+ const regex = /(auto|scroll)/;
+ const parents = (_node, ps) => {
+ if (_node.parentNode === null) { return ps; }
+ return parents(_node.parentNode, ps.concat([_node]));
+ };
+
+ const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+ const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+ const scroll = _node => regex.test(overflow(_node));
+
+ const scrollParent = (_node) => {
+ if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+ return undefined;
+ }
+
+ const ps = parents(_node.parentNode, []);
+
+ for (let i = 0; i < ps.length; i += 1) {
+ if( ps[i] === document.body ) {
+ return null;
+ }
+ if (scroll(ps[i])) {
+ return ps[i];
+ }
+ }
+
+ return document.scrollingElement || document.documentElement;
+ };
+
+ return scrollParent(node);
+ };
+
/** @function BuildSkeleton */
/** Build the gallery structure **/
function BuildSkeleton() {
-
+
+
// store markup if defined
- var $elements = G.$E.base.children('a');
+ // var $elements = G.$E.base.children('a');
+ var $elements = G.$E.base.children();
if( $elements.length > 0 ) {
G.O.$markup = $elements;
}
- G.$E.base.text('');
- G.$E.base.addClass('ngy2_container');
-
- // RTL or LTR
- var sRTL='';
- if( G.O.RTL ) {
- sRTL = 'style="text-align:right;direction:rtl;"';
- }
- // theme
- G.$E.base.addClass(G.O.theme)
- // gallery color scheme
- SetGalleryTheme();
+ if( !G.O.lightboxStandalone ) {
+ G.$E.base.text('');
+ G.$E.base.addClass('ngy2_container');
+
+ // RTL or LTR
+ var sRTL='';
+ if( G.O.RTL ) {
+ sRTL = 'style="text-align:right;direction:rtl;"';
+ }
+
+ // theme
+ G.$E.base.addClass(G.O.theme)
+ // gallery color scheme
+ SetGalleryTheme();
- // Hide icons (thumbnails and breadcrumb)
- if( G.O.thumbnailLabel.get('hideIcons') ) {
- G.O.icons.thumbnailAlbum = '';
- G.O.icons.thumbnailImage = '';
- }
+ // Hide icons (thumbnails and breadcrumb)
+ if( G.O.thumbnailLabel.get('hideIcons') ) {
+ G.O.icons.thumbnailAlbum = '';
+ G.O.icons.thumbnailImage = '';
+ }
- // Navigation bar
- var styleNavigation="";
- if( G.O.navigationFontSize != undefined && G.O.navigationFontSize != '' ) {
- styleNavigation=' style="font-size:'+G.O.navigationFontSize+';"';
- }
- G.$E.conNavigationBar = jQuery('').appendTo(G.$E.base);
+ // Navigation bar
+ var styleNavigation="";
+ if( G.O.navigationFontSize != undefined && G.O.navigationFontSize != '' ) {
+ styleNavigation=' style="font-size:'+G.O.navigationFontSize+';"';
+ }
+ G.$E.conNavigationBar = jQuery('').appendTo(G.$E.base);
- // pre-loader
- G.$E.conLoadingB = jQuery('
').appendTo(G.$E.base);
+ // pre-loader
+ G.$E.conLoadingB = jQuery('
').appendTo(G.$E.base);
- // gallery
- G.$E.conTnParent = jQuery('').appendTo( G.$E.base );
- G.$E.conTn = jQuery('').appendTo( G.$E.conTnParent );
+ // gallery
+ G.$E.conTnParent = jQuery('').appendTo( G.$E.base );
+ G.$E.conTn = jQuery('').appendTo( G.$E.conTnParent );
- // configure gallery
- switch( G.O.thumbnailAlignment ) {
- case 'left':
- G.$E.conTnParent.css({'text-align':'left'});
- // G.$E.conNavBCon.css({'margin-left':0 });
- break;
- case 'right':
- G.$E.conTnParent.css({'text-align':'right'});
- // G.$E.conNavBCon.css({ 'margin-right':0});
- break;
- }
-
- // apply galleryBuildInit2 css settings to the gallery
- if( G.O.galleryBuildInit2 !== undefined ) {
- var t1=G.O.galleryBuildInit2.split('|');
- for( var i=0; i