#248 PhotoSwipe v.4.1.0

plugins_public/photo-swipe/default-skin/default-skin.css

@@ -1,4 +1,22 @@
 /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+
+	Contents:
+
+	1. Buttons
+	2. Share modal and links
+	3. Index indicator ("1 of X" counter)
+	4. Caption
+	5. Loading indicator
+	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+
+*/
+/*
+	
+	1. Buttons
+
+ */
+/* <button> css reset */
 .pswp__button {
   width: 44px;
   height: 44px;
@@ -17,7 +35,8 @@
           transition: opacity 0.2s;
   -webkit-box-shadow: none;
           box-shadow: none; }
-  .pswp__button:focus, .pswp__button:hover {
+  .pswp__button:focus,
+  .pswp__button:hover {
     opacity: 1; }
   .pswp__button:active {
     outline: none;
@@ -26,22 +45,27 @@
     padding: 0;
     border: 0; }
 
+/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
 .pswp__ui--over-close .pswp__button--close {
   opacity: 1; }
 
-.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
+.pswp__button,
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
   background: url(default-skin.png) 0 0 no-repeat;
   background-size: 264px 88px;
   width: 44px;
   height: 44px; }
 
-@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
-  .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before {
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left:before,
+  .pswp--svg .pswp__button--arrow--right:before {
     background-image: url(default-skin.svg); }
-
-  .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right {
-    background: none; }
- }
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none; } }
 
 .pswp__button--close {
   background-position: 0 -44px; }
@@ -68,10 +92,17 @@
 .pswp--zoomed-in .pswp__button--zoom {
   background-position: -132px 0; }
 
-.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right {
+/* no arrows on touch screens */
+.pswp--touch .pswp__button--arrow--left,
+.pswp--touch .pswp__button--arrow--right {
   visibility: hidden; }
 
-.pswp__button--arrow--left, .pswp__button--arrow--right {
+/*
+	Arrow buttons hit area
+	(icon is added to :before pseudo-element)
+*/
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
   background: none;
   top: 50%;
   margin-top: -50px;
@@ -85,7 +116,8 @@
 .pswp__button--arrow--right {
   right: 0; }
 
-.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
   content: '';
   top: 35px;
   background-color: rgba(0, 0, 0, 0.3);
@@ -101,7 +133,13 @@
   right: 6px;
   background-position: -94px -44px; }
 
-.pswp__counter, .pswp__share-modal {
+/*
+
+	2. Share modal/popup and links
+
+ */
+.pswp__counter,
+.pswp__share-modal {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -155,6 +193,7 @@
       text-decoration: none;
       color: #000; }
     .pswp__share-tooltip a:first-child {
+      /* round corners on the first/last list item */
       border-radius: 2px 2px 0 0; }
     .pswp__share-tooltip a:last-child {
       border-radius: 0 0 2px 2px; }
@@ -166,6 +205,7 @@
         -ms-transform: translateY(0);
             transform: translateY(0); }
 
+/* increase size of share links on touch devices */
 .pswp--touch .pswp__share-tooltip a {
   padding: 16px 12px; }
 
@@ -177,11 +217,12 @@ a.pswp__share--facebook:before {
   position: absolute;
   top: -12px;
   right: 15px;
-  border: 6px solid rgba(0, 0, 0, 0);
+  border: 6px solid transparent;
   border-bottom-color: #FFF;
   -webkit-pointer-events: none;
   -moz-pointer-events: none;
   pointer-events: none; }
+
 a.pswp__share--facebook:hover {
   background: #3E5C9A;
   color: #FFF; }
@@ -199,6 +240,11 @@ a.pswp__share--pinterest:hover {
 a.pswp__share--download:hover {
   background: #DDD; }
 
+/*
+
+	3. Index indicator ("1 of X" counter)
+
+ */
 .pswp__counter {
   position: absolute;
   left: 0;
@@ -210,6 +256,11 @@ a.pswp__share--download:hover {
   opacity: 0.75;
   padding: 0 10px; }
 
+/*
+	
+	4. Caption
+
+ */
 .pswp__caption {
   position: absolute;
   left: 0;
@@ -232,9 +283,17 @@ a.pswp__share--download:hover {
 .pswp__caption--empty {
   display: none; }
 
+/* Fake caption element, used to calculate height of next/prev image */
 .pswp__caption--fake {
   visibility: hidden; }
 
+/*
+
+	5. Loading indicator (preloader)
+
+	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+
+ */
 .pswp__preloader {
   width: 44px;
   height: 44px;
@@ -245,7 +304,8 @@ a.pswp__share--download:hover {
   opacity: 0;
   -webkit-transition: opacity 0.25s ease-out;
           transition: opacity 0.25s ease-out;
-  will-change: opacity; }
+  will-change: opacity;
+  direction: ltr; }
 
 .pswp__preloader__icn {
   width: 20px;
@@ -255,6 +315,7 @@ a.pswp__share--download:hover {
 .pswp__preloader--active {
   opacity: 1; }
   .pswp__preloader--active .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
     background: url(preloader.gif) 0 0 no-repeat; }
 
 .pswp--css_animation .pswp__preloader--active {
@@ -265,6 +326,7 @@ a.pswp__share--download:hover {
   .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
     -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
             animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
+
 .pswp--css_animation .pswp__preloader__icn {
   background: none;
   opacity: 0.75;
@@ -274,11 +336,17 @@ a.pswp__share--download:hover {
   left: 15px;
   top: 15px;
   margin: 0; }
+
 .pswp--css_animation .pswp__preloader__cut {
+  /* 
+			The idea of animating inner circle is based on Polymer ("material") loading indicator 
+			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+		*/
   position: relative;
   width: 7px;
   height: 14px;
   overflow: hidden; }
+
 .pswp--css_animation .pswp__preloader__donut {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -300,14 +368,12 @@ a.pswp__share--download:hover {
     left: auto;
     top: auto;
     margin: 0;
-    float: right; }
- }
+    float: right; } }
 
 @-webkit-keyframes clockwise {
   0% {
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg); }
-
   100% {
     -webkit-transform: rotate(360deg);
             transform: rotate(360deg); } }
@@ -316,7 +382,6 @@ a.pswp__share--download:hover {
   0% {
     -webkit-transform: rotate(0deg);
             transform: rotate(0deg); }
-
   100% {
     -webkit-transform: rotate(360deg);
             transform: rotate(360deg); } }
@@ -325,11 +390,9 @@ a.pswp__share--download:hover {
   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0); }
-
   50% {
     -webkit-transform: rotate(-140deg);
             transform: rotate(-140deg); }
-
   100% {
     -webkit-transform: rotate(0);
             transform: rotate(0); } }
@@ -338,21 +401,26 @@ a.pswp__share--download:hover {
   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0); }
-
   50% {
     -webkit-transform: rotate(-140deg);
             transform: rotate(-140deg); }
-
   100% {
     -webkit-transform: rotate(0);
             transform: rotate(0); } }
 
+/*
+	
+	6. Additional styles
+
+ */
+/* root element of UI */
 .pswp__ui {
   -webkit-font-smoothing: auto;
   visibility: visible;
   opacity: 1;
   z-index: 1550; }
 
+/* top black bar with buttons and "1 of X" indicator */
 .pswp__top-bar {
   position: absolute;
   left: 0;
@@ -360,30 +428,52 @@ a.pswp__share--download:hover {
   height: 44px;
   width: 100%; }
 
-.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
+.pswp__caption,
+.pswp__top-bar,
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
   -webkit-backface-visibility: hidden;
   will-change: opacity;
   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
           transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 
-.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right {
+/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
   visibility: visible; }
 
-.pswp__top-bar, .pswp__caption {
+.pswp__top-bar,
+.pswp__caption {
   background-color: rgba(0, 0, 0, 0.5); }
 
-.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
+/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+.pswp__ui--fit .pswp__top-bar,
+.pswp__ui--fit .pswp__caption {
   background-color: rgba(0, 0, 0, 0.3); }
 
+/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
 .pswp__ui--idle .pswp__top-bar {
   opacity: 0; }
-.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right {
+
+.pswp__ui--idle .pswp__button--arrow--left,
+.pswp__ui--idle .pswp__button--arrow--right {
   opacity: 0; }
 
-.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right {
+/*
+	pswp__ui--hidden class is added when controls are hidden
+	e.g. when user taps to toggle visibility of controls
+*/
+.pswp__ui--hidden .pswp__top-bar,
+.pswp__ui--hidden .pswp__caption,
+.pswp__ui--hidden .pswp__button--arrow--left,
+.pswp__ui--hidden .pswp__button--arrow--right {
+  /* Force paint & create composition layer for controls. */
   opacity: 0.001; }
 
-.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter {
+/* pswp__ui--one-slide class is added when there is just one item in gallery */
+.pswp__ui--one-slide .pswp__button--arrow--left,
+.pswp__ui--one-slide .pswp__button--arrow--right,
+.pswp__ui--one-slide .pswp__counter {
   display: none; }
 
 .pswp__element--disabled {

plugins_public/photo-swipe/photoswipe-ui-default.js

@@ -1,4 +1,4 @@
-/*! PhotoSwipe Default UI - 4.0.5 - 2015-01-15
+/*! PhotoSwipe Default UI - 4.1.0 - 2015-07-11
 * http://photoswipe.com
 * Copyright (c) 2015 Dmitry Semenov; */
 /**
@@ -357,7 +357,7 @@ var PhotoSwipeUI_Default =
 						gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
 					}
 				} else {
-					gap.bottom = bars.bottom;
+					gap.bottom = bars.bottom === 'auto' ? 0 : bars.bottom;
 				}
 				
 				// height of top bar is static, no need to calculate it
@@ -694,8 +694,18 @@ var PhotoSwipeUI_Default =
 		_countNumItems();
 	};
 
-	ui.updateFullscreen = function() {
-		_togglePswpClass(pswp.template, 'fs', _fullscrenAPI.isFullscreen());
+	ui.updateFullscreen = function(e) {
+
+		if(e) {
+			// some browsers change window scroll position during the fullscreen
+			// so PhotoSwipe updates it just in case
+			setTimeout(function() {
+				pswp.setScrollOffset( 0, framework.getScrollY() );
+			}, 50);
+		}
+		
+		// toogle pswp--fs class on root element
+		framework[ (_fullscrenAPI.isFullscreen() ? 'add' : 'remove') + 'Class' ](pswp.template, 'pswp--fs');
 	};
 
 	ui.updateIndexIndicator = function() {

plugins_public/photo-swipe/photoswipe.css

@@ -1,4 +1,8 @@
 /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+/* pswp = photoswipe */
 .pswp {
   display: none;
   position: absolute;
@@ -11,6 +15,7 @@
   touch-action: none;
   z-index: 1500;
   -webkit-text-size-adjust: 100%;
+  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
   -webkit-backface-visibility: hidden;
   outline: none; }
   .pswp * {
@@ -19,9 +24,12 @@
   .pswp img {
     max-width: none; }
 
+/* style is added when JS option showHideOpacity is set to true */
 .pswp--animate_opacity {
+  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
   opacity: 0.001;
   will-change: opacity;
+  /* for open/close transition */
   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
           transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 
@@ -46,6 +54,10 @@
   cursor: -moz-grabbing;
   cursor: grabbing; }
 
+/*
+	Background is added as a separate element.
+	As animating opacity is much faster than animating rgba() background-color.
+*/
 .pswp__bg {
   position: absolute;
   left: 0;
@@ -63,10 +75,10 @@
   top: 0;
   width: 100%;
   height: 100%;
-  -webkit-backface-visibility: hidden;
-  will-change: transform; }
+  overflow: hidden; }
 
-.pswp__container, .pswp__zoom-wrap {
+.pswp__container,
+.pswp__zoom-wrap {
   -ms-touch-action: none;
   touch-action: none;
   position: absolute;
@@ -75,12 +87,14 @@
   top: 0;
   bottom: 0; }
 
-.pswp__container, .pswp__img {
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none; }
 
 .pswp__zoom-wrap {
@@ -89,19 +103,23 @@
   -webkit-transform-origin: left top;
   -ms-transform-origin: left top;
   transform-origin: left top;
+  /* for open/close transition */
   -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
           transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 
 .pswp__bg {
   will-change: opacity;
+  /* for open/close transition */
   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
           transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
 
-.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
+.pswp--animated-in .pswp__bg,
+.pswp--animated-in .pswp__zoom-wrap {
   -webkit-transition: none;
   transition: none; }
 
-.pswp__container, .pswp__zoom-wrap {
+.pswp__container,
+.pswp__zoom-wrap {
   -webkit-backface-visibility: hidden;
   will-change: transform; }
 
@@ -117,21 +135,33 @@
   position: absolute;
   width: auto;
   height: auto;
-  -webkit-transition: opacity 0.15s;
-          transition: opacity 0.15s; }
+  top: 0;
+  left: 0; }
 
+/*
+	stretched thumbnail or div placeholder element (see below)
+	style is added to avoid flickering in webkit/blink when layers overlap
+*/
 .pswp__img--placeholder {
   -webkit-backface-visibility: hidden; }
 
+/*
+	div element that matches size of large image
+	large image loads on top of it
+*/
 .pswp__img--placeholder--blank {
   background: #222; }
 
 .pswp--ie .pswp__img {
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: auto !important;
   left: 0;
   top: 0; }
 
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
 .pswp__error-msg {
   position: absolute;
   left: 0;

plugins_public/photo-swipe/photoswipe.js

@@ -1,4 +1,4 @@
-/*! PhotoSwipe - v4.0.5 - 2015-01-15
+/*! PhotoSwipe - v4.1.0 - 2015-07-11
 * http://photoswipe.com
 * Copyright (c) 2015 Dmitry Semenov; */
 (function (root, factory) { 
@@ -318,6 +318,7 @@ var _options = {
 	pinchToClose: true,
 	closeOnScroll: true,
 	closeOnVerticalDrag: true,
+	verticalDragRange: 0.75,
 	hideAnimationDuration: 333,
 	showAnimationDuration: 333,
 	showHideOpacity: false,
@@ -333,14 +334,14 @@ var _options = {
     	if(isMouseClick) {
     		return 1;
     	} else {
-    		return item.initialZoomLevel < 0.7 ? 1 : 1.5;
+    		return item.initialZoomLevel < 0.7 ? 1 : 1.33;
     	}
     },
-    maxSpreadZoom: 2,
+    maxSpreadZoom: 1.33,
+	modal: true,
 
 	// not fully implemented yet
 	scaleMode: 'fit', // TODO
-	modal: true, // TODO
 	alwaysFadeIn: false // TODO
 };
 framework.extend(_options, options);
@@ -374,9 +375,8 @@ var _isOpen,
 	_updateSizeInterval,
 	_itemsNeedUpdate,
 	_currPositionIndex = 0,
-	_offset,
+	_offset = {},
 	_slideSize = _getEmptyPoint(), // size of slide area, including spacing
-	_scrollChanged,
 	_itemHolders,
 	_prevItemIndex,
 	_indexDiff = 0, // difference of indexes since last content update
@@ -397,6 +397,7 @@ var _isOpen,
 	_currentWindowScrollY,
 	_features,
 	_windowVisibleSize = {},
+	_renderMaxResolution = false,
 
 	// Registers PhotoSWipe module (History, Controller ...)
 	_registerModule = function(name, module) {
@@ -442,21 +443,43 @@ var _isOpen,
 		_bgOpacity = opacity;
 		self.bg.style.opacity = opacity * _options.bgOpacity;
 	},
-	
-	_applyZoomTransform = function(styleObj,x,y,zoom) {
+
+	_applyZoomTransform = function(styleObj,x,y,zoom,item) {
+		if(!_renderMaxResolution || (item && item !== self.currItem) ) {
+			zoom = zoom / (item ? item.fitRatio : self.currItem.fitRatio);	
+		}
+			
 		styleObj[_transformKey] = _translatePrefix + x + 'px, ' + y + 'px' + _translateSufix + ' scale(' + zoom + ')';
 	},
-	_applyCurrentZoomPan = function() {
+	_applyCurrentZoomPan = function( allowRenderResolution ) {
 		if(_currZoomElementStyle) {
+
+			if(allowRenderResolution) {
+				if(_currZoomLevel > self.currItem.fitRatio) {
+					if(!_renderMaxResolution) {
+						_setImageSize(self.currItem, false, true);
+						_renderMaxResolution = true;
+					}
+				} else {
+					if(_renderMaxResolution) {
+						_setImageSize(self.currItem);
+						_renderMaxResolution = false;
+					}
+				}
+			}
+			
+
 			_applyZoomTransform(_currZoomElementStyle, _panOffset.x, _panOffset.y, _currZoomLevel);
 		}
 	},
 	_applyZoomPanToItem = function(item) {
 		if(item.container) {
+
 			_applyZoomTransform(item.container.style, 
 								item.initialPosition.x, 
 								item.initialPosition.y, 
-								item.initialZoomLevel);
+								item.initialZoomLevel,
+								item);
 		}
 	},
 	_setTranslateX = function(x, elStyle) {
@@ -606,9 +629,10 @@ var _isOpen,
 		};
 		_applyZoomPanToItem = function(item) {
 
-			var s = item.container.style,
-				w = item.fitRatio * item.w,
-				h = item.fitRatio * item.h;
+			var zoomRatio = item.fitRatio > 1 ? 1 : item.fitRatio,
+				s = item.container.style,
+				w = zoomRatio * item.w,
+				h = zoomRatio * item.h;
 
 			s.width = w + 'px';
 			s.height = h + 'px';
@@ -618,11 +642,12 @@ var _isOpen,
 		};
 		_applyCurrentZoomPan = function() {
 			if(_currZoomElementStyle) {
-				var s = _currZoomElementStyle;
-				var item = self.currItem;
 
-				var w = item.fitRatio * item.w;
-				var h = item.fitRatio * item.h;
+				var s = _currZoomElementStyle,
+					item = self.currItem,
+					zoomRatio = item.fitRatio > 1 ? 1 : item.fitRatio,
+					w = zoomRatio * item.w,
+					h = zoomRatio * item.h;
 
 				s.width = w + 'px';
 				s.height = h + 'px';
@@ -673,16 +698,8 @@ var _isOpen,
 		}
 	},
 
-	_onPageScroll = function() {
-		_scrollChanged = true;
-		// "close" on scroll works only on desktop devices, or when mouse is used
-		if(_options.closeOnScroll && _isOpen && (!self.likelyTouchDevice || _options.mouseUsed) ) { 
-			// if scrolled for more than 2px
-			if(Math.abs(framework.getScrollY() - _initalWindowScrollY) > 2) { 
-				_closedByScroll = true;
-				self.close();
-			}
-		}
+	_updatePageScrollOffset = function() {
+		self.setScrollOffset(0, framework.getScrollY());		
 	};
 	
 
@@ -773,11 +790,16 @@ var publicMethods = {
 	isZooming: function() {
 		return _isZooming;
 	},
-	applyZoomPan: function(zoomLevel,panX,panY) {
+	setScrollOffset: function(x,y) {
+		_offset.x = x;
+		_currentWindowScrollY = _offset.y = y;
+		_shout('updateScrollOffset', _offset);
+	},
+	applyZoomPan: function(zoomLevel,panX,panY,allowRenderResolution) {
 		_panOffset.x = panX;
 		_panOffset.y = panY;
 		_currZoomLevel = zoomLevel;
-		_applyCurrentZoomPan();
+		_applyCurrentZoomPan( allowRenderResolution );
 	},
 
 	init: function() {
@@ -821,7 +843,7 @@ var publicMethods = {
 		// Setup global events
 		_globalEventHandlers = {
 			resize: self.updateSize,
-			scroll: _onPageScroll,
+			scroll: _updatePageScrollOffset,
 			keydown: _onKeyDown,
 			click: _onGlobalClick
 		};
@@ -857,8 +879,8 @@ var publicMethods = {
 			_isFixedPosition = false;
 		}
 		
+		template.setAttribute('aria-hidden', 'false');
 		if(_options.modal) {
-			template.setAttribute('aria-hidden', 'false');
 			if(!_isFixedPosition) {
 				template.style.position = 'absolute';
 				template.style.top = framework.getScrollY() + 'px';
@@ -965,10 +987,8 @@ var publicMethods = {
 			clearTimeout(_showOrHideTimeout);
 		}
 		
-		if(_options.modal) {
-			template.setAttribute('aria-hidden', 'true');
-			template.className = _initalClassName;
-		}
+		template.setAttribute('aria-hidden', 'true');
+		template.className = _initalClassName;
 
 		if(_updateSizeInterval) {
 			clearInterval(_updateSizeInterval);
@@ -1100,6 +1120,7 @@ var publicMethods = {
 
 
 		self.currItem = _getItemAt( _currentItemIndex );
+		_renderMaxResolution = false;
 		
 		_shout('beforeChange', _indexDiff);
 
@@ -1132,7 +1153,8 @@ var publicMethods = {
 			var prevItem = _getItemAt(_prevItemIndex);
 			if(prevItem.initialZoomLevel !== _currZoomLevel) {
 				_calculateItemSize(prevItem , _viewportSize );
-				_applyZoomPanToItem( prevItem ); 
+				_setImageSize(prevItem);
+				_applyZoomPanToItem( prevItem ); 				
 			}
 
 		}
@@ -1152,7 +1174,7 @@ var publicMethods = {
 
 	updateSize: function(force) {
 		
-		if(!_isFixedPosition) {
+		if(!_isFixedPosition && _options.modal) {
 			var windowScrollY = framework.getScrollY();
 			if(_currentWindowScrollY !== windowScrollY) {
 				template.style.top = windowScrollY + 'px';
@@ -1173,8 +1195,7 @@ var publicMethods = {
 		_viewportSize.x = self.scrollWrap.clientWidth;
 		_viewportSize.y = self.scrollWrap.clientHeight;
 
-		
-		_offset = {x:0,y:_currentWindowScrollY};//framework.getOffset(template); 
+		_updatePageScrollOffset();
 
 		_slideSize.x = _viewportSize.x + Math.round(_viewportSize.x * _options.spacing);
 		_slideSize.y = _viewportSize.y;
@@ -1183,6 +1204,7 @@ var publicMethods = {
 
 		_shout('beforeResize'); // even may be used for example to switch image sources
 
+
 		// don't re-calculate size on inital size update
 		if(_containerShiftIndex !== undefined) {
 
@@ -1194,18 +1216,20 @@ var publicMethods = {
 				holder = _itemHolders[i];
 				_setTranslateX( (i+_containerShiftIndex) * _slideSize.x, holder.el.style);
 
-				hIndex = _getLoopedId(_currentItemIndex+i-1);
+				hIndex = _currentItemIndex+i-1;
+
+				if(_options.loop && _getNumItems() > 2) {
+					hIndex = _getLoopedId(hIndex);
+				}
 
 				// update zoom level on items and refresh source (if needsUpdate)
 				item = _getItemAt( hIndex );
 
 				// re-render gallery item if `needsUpdate`,
 				// or doesn't have `bounds` (entirely new slide object)
-				if(_itemsNeedUpdate || item.needsUpdate || !item.bounds) {
+				if( item && (_itemsNeedUpdate || item.needsUpdate || !item.bounds) ) {
 
-					if(item) {
-						self.cleanSlide( item );
-					}
+					self.cleanSlide( item );
 					
 					self.setContent( holder, hIndex );
 
@@ -1216,12 +1240,14 @@ var publicMethods = {
 					}
 
 					item.needsUpdate = false;
+
 				} else if(holder.index === -1 && hIndex >= 0) {
 					// add content first time
 					self.setContent( holder, hIndex );
 				}
 				if(item && item.container) {
 					_calculateItemSize(item, _viewportSize);
+					_setImageSize(item);
 					_applyZoomPanToItem( item );
 				}
 				
@@ -1235,15 +1261,14 @@ var publicMethods = {
 		if(_currPanBounds) {
 			_panOffset.x = _currPanBounds.center.x;
 			_panOffset.y = _currPanBounds.center.y;
-			_applyCurrentZoomPan();
+			_applyCurrentZoomPan( true );
 		}
 		
 		_shout('resize');
 	},
 	
-	//Zoom current item to
+	// Zoom current item to
 	zoomTo: function(destZoomLevel, centerPoint, speed, easingFn, updateFn) {
-		
 		/*
 			if(destZoomLevel === 'fit') {
 				destZoomLevel = self.currItem.fitRatio;
@@ -1273,7 +1298,7 @@ var publicMethods = {
 
 		_roundPoint(destPanOffset);
 
-		//_startZoomLevel = destZoomLevel;
+		// _startZoomLevel = destZoomLevel;
 		var onUpdate = function(now) {
 			if(now === 1) {
 				_currZoomLevel = destZoomLevel;
@@ -1289,7 +1314,7 @@ var publicMethods = {
 				updateFn(now);
 			}
 
-			_applyCurrentZoomPan();
+			_applyCurrentZoomPan( now === 1 );
 		};
 
 		if(speed) {
@@ -1302,6 +1327,7 @@ var publicMethods = {
 
 };
 
+
 /*>>core*/
 
 /*>>gestures*/
@@ -1730,12 +1756,19 @@ var _gestureStartTime,
 		if(_isDragging) {
 			var touchesList = _getTouchPoints(e);
 			if(!_direction && !_moved && !_isZooming) {
-				var diff = Math.abs(touchesList[0].x - _currPoint.x) - Math.abs(touchesList[0].y - _currPoint.y);
-				// check the direction of movement
-				if(Math.abs(diff) >= DIRECTION_CHECK_OFFSET) {
-					_direction = diff > 0 ? 'h' : 'v';
-					_currentPoints = touchesList;
+
+				if(_mainScrollPos.x !== _slideSize.x * _currPositionIndex) {
+					// if main scroll position is shifted – direction is always horizontal
+					_direction = 'h';
+				} else {
+					var diff = Math.abs(touchesList[0].x - _currPoint.x) - Math.abs(touchesList[0].y - _currPoint.y);
+					// check the direction of movement
+					if(Math.abs(diff) >= DIRECTION_CHECK_OFFSET) {
+						_direction = diff > 0 ? 'h' : 'v';
+						_currentPoints = touchesList;
+					}
 				}
+				
 			} else {
 				_currentPoints = touchesList;
 			}
@@ -1874,7 +1907,6 @@ var _gestureStartTime,
 
 			if(_direction === 'v' && _options.closeOnVerticalDrag) {
 				if(!_canPan()) {
-					
 					_currPanDist.y += delta.y;
 					_panOffset.y += delta.y;
 
@@ -2048,7 +2080,7 @@ var _gestureStartTime,
 
 			var opacityRatio = _calculateVerticalDragOpacityRatio();
 
-			if(opacityRatio < 0.6) {
+			if(opacityRatio < _options.verticalDragRange) {
 				self.close();
 			} else {
 				var initalPanY = _panOffset.y,
@@ -2321,6 +2353,8 @@ var _gestureStartTime,
 		}
 		
 		_mainScrollAnimating = true;
+		
+		_shout('mainScrollAnimStart');
 
 		_animateProp('mainScroll', _mainScrollPos.x, animateToX, finishAnimDuration, framework.easing.cubic.out, 
 			_moveMainScroll,
@@ -2372,13 +2406,11 @@ var _gestureStartTime,
 
 		if(_opacityChanged) {
 			onUpdate = function(now) {
-
 				_applyBgOpacity(  (destOpacity - initialOpacity) * now + initialOpacity );
-
 			};
 		}
 
-		self.zoomTo(destZoomLevel, 0, 300,  framework.easing.cubic.out, onUpdate);
+		self.zoomTo(destZoomLevel, 0, 200,  framework.easing.cubic.out, onUpdate);
 		return true;
 	};
 
@@ -2455,6 +2487,7 @@ _registerModule('Gestures', {
 	}
 });
 
+
 /*>>gestures*/
 
 /*>>show-hide-transition*/
@@ -2600,22 +2633,17 @@ var _showOrHideTimeout,
 							y: _panOffset.y
 						},
 						initialZoomLevel = _currZoomLevel,
-						scrollY = _initalWindowScrollY,
 						initalBgOpacity = _bgOpacity,
 						onUpdate = function(now) {
-							if(_scrollChanged) {
-								scrollY = framework.getScrollY();
-								_scrollChanged = false;
-							}
 							
 							if(now === 1) {
 								_currZoomLevel = destZoomLevel;
 								_panOffset.x = thumbBounds.x;
-								_panOffset.y = thumbBounds.y  - scrollY;
+								_panOffset.y = thumbBounds.y  - _currentWindowScrollY;
 							} else {
 								_currZoomLevel = (destZoomLevel - initialZoomLevel) * now + initialZoomLevel;
 								_panOffset.x = (thumbBounds.x - initialPanOffset.x) * now + initialPanOffset.x;
-								_panOffset.y = (thumbBounds.y - scrollY - initialPanOffset.y) * now + initialPanOffset.y;
+								_panOffset.y = (thumbBounds.y - _currentWindowScrollY - initialPanOffset.y) * now + initialPanOffset.y;
 							}
 							
 							_applyCurrentZoomPan();
@@ -2775,37 +2803,20 @@ var _getItemAt,
 			return;
 		}
 
-		var animate,
-			isSwiping = self.isDragging() && !self.isZooming(),
-			slideMightBeVisible = index === _currentItemIndex || self.isMainScrollAnimating() || isSwiping;
-
-		// fade in loaded image only when current holder is active, or might be visible
-		if(!preventAnimation && (_likelyTouchDevice || _options.alwaysFadeIn) && slideMightBeVisible) {
-			animate = true;
-		}
-
 		if(img) {
-			if(animate) {
-				img.style.opacity = 0;
-			}
 
 			item.imageAppended = true;
-
+			_setImageSize(item, img);
+			
 			baseDiv.appendChild(img);
 
-			if(animate) {
+			if(keepPlaceholder) {
 				setTimeout(function() {
-					img.style.opacity = 1;
-					if(keepPlaceholder) {
-						setTimeout(function() {
-							// hide image placeholder "behind"
-							if(item && item.loaded && item.placeholder) {
-								item.placeholder.style.display = 'none';
-								item.placeholder = null;
-							}
-						}, 500);
+					if(item && item.loaded && item.placeholder) {
+						item.placeholder.style.display = 'none';
+						item.placeholder = null;
 					}
-				}, 50);
+				}, 500);
 			}
 		}
 	},
@@ -2850,6 +2861,26 @@ var _getItemAt,
 			
 		}
 	},
+	_setImageSize = function(item, img, maxRes) {
+		if(!item.src) {
+			return;
+		}
+
+		if(!img) {
+			img = item.container.lastChild;
+		}
+
+		var w = maxRes ? item.w : Math.round(item.w * item.fitRatio),
+			h = maxRes ? item.h : Math.round(item.h * item.fitRatio);
+		
+		if(item.placeholder && !item.loaded) {
+			item.placeholder.style.width = w + 'px';
+			item.placeholder.style.height = h + 'px';
+		}
+
+		img.style.width = w + 'px';
+		img.style.height = h + 'px';
+	},
 	_appendImagesPool = function() {
 
 		if(_imagesToAppendPool.length) {
@@ -2858,7 +2889,7 @@ var _getItemAt,
 			for(var i = 0; i < _imagesToAppendPool.length; i++) {
 				poolItem = _imagesToAppendPool[i];
 				if( poolItem.holder.index === poolItem.index ) {
-					_appendImage(poolItem.index, poolItem.item, poolItem.baseDiv, poolItem.img);
+					_appendImage(poolItem.index, poolItem.item, poolItem.baseDiv, poolItem.img, false, poolItem.clearPlaceholder);
 				}
 			}
 			_imagesToAppendPool = [];
@@ -2875,11 +2906,16 @@ _registerModule('Controller', {
 			index = _getLoopedId(index);
 			var item = _getItemAt(index);
 
-			if(!item || !item.src || item.loaded || item.loading) {
+			if(!item || item.loaded || item.loading) {
 				return;
 			}
 
 			_shout('gettingData', index, item);
+
+			if (!item.src) {
+				return;
+			}
+
 			_preloadImage(item);
 		},
 		initController: function() {
@@ -3008,6 +3044,8 @@ _registerModule('Controller', {
 			}
 
 			_checkForError(item);
+
+			_calculateItemSize(item, _viewportSize);
 			
 			if(item.src && !item.loadError && !item.loaded) {
 
@@ -3018,12 +3056,6 @@ _registerModule('Controller', {
 						return;
 					}
 
-					// Apply hw-acceleration only after image is loaded.
-					// This is webkit progressive image loading bugfix.
-					// https://bugs.webkit.org/show_bug.cgi?id=108630
-					// https://code.google.com/p/chromium/issues/detail?id=404547
-					item.img.style.webkitBackfaceVisibility = 'hidden';
-
 					// check if holder hasn't changed while image was loading
 					if(holder && holder.index === index ) {
 						if( _checkForError(item, true) ) {
@@ -3044,10 +3076,11 @@ _registerModule('Controller', {
 									baseDiv:baseDiv,
 									img:item.img,
 									index:index,
-									holder:holder
+									holder:holder,
+									clearPlaceholder:true
 								});
 							} else {
-								_appendImage(index, item, baseDiv, item.img, _mainScrollAnimating || _initialZoomRunning);
+								_appendImage(index, item, baseDiv, item.img, _mainScrollAnimating || _initialZoomRunning, true);
 							}
 						} else {
 							// remove preloader & mini-img
@@ -3074,8 +3107,7 @@ _registerModule('Controller', {
 						placeholder.src = item.msrc;
 					}
 					
-					placeholder.style.width = item.w + 'px';
-					placeholder.style.height = item.h + 'px';
+					_setImageSize(item, placeholder);
 
 					baseDiv.appendChild(placeholder);
 					item.placeholder = placeholder;
@@ -3108,13 +3140,12 @@ _registerModule('Controller', {
 			} else if(item.src && !item.loadError) {
 				// image object is created every time, due to bugs of image loading & delay when switching images
 				img = framework.createEl('pswp__img', 'img');
-				img.style.webkitBackfaceVisibility = 'hidden';
 				img.style.opacity = 1;
 				img.src = item.src;
+				_setImageSize(item, img);
 				_appendImage(index, item, baseDiv, img, true);
 			}
 			
-			_calculateItemSize(item, _viewportSize);
 
 			if(!_initialContentSet && index === _currentItemIndex) {
 				_currZoomElementStyle = baseDiv.style;
@@ -3315,13 +3346,21 @@ _registerModule('DesktopZoom', {
 		handleMouseWheel: function(e) {
 
 			if(_currZoomLevel <= self.currItem.fitRatio) {
-				if(!_options.closeOnScroll) {
-					e.preventDefault();
+				if( _options.modal ) {
+
+					if (!_options.closeOnScroll || _numAnimations || _isDragging) {
+						e.preventDefault();
+					} else if(_transformKey && Math.abs(e.deltaY) > 2) {
+						// close PhotoSwipe
+						// if browser supports transforms & scroll changed enough
+						_closedByScroll = true;
+						self.close();
+					}
+
 				}
 				return true;
 			}
 
-			e.preventDefault();
 			// allow just one event to fire
 			e.stopPropagation();
 
@@ -3329,12 +3368,18 @@ _registerModule('DesktopZoom', {
 			_wheelDelta.x = 0;
 
 			if('deltaX' in e) {
-				_wheelDelta.x = e.deltaX;
-				_wheelDelta.y = e.deltaY;
+				if(e.deltaMode === 1 /* DOM_DELTA_LINE */) {
+					// 18 - average line height
+					_wheelDelta.x = e.deltaX * 18;
+					_wheelDelta.y = e.deltaY * 18;
+				} else {
+					_wheelDelta.x = e.deltaX;
+					_wheelDelta.y = e.deltaY;
+				}
 			} else if('wheelDelta' in e) {
 				if(e.wheelDeltaX) {
 					_wheelDelta.x = -0.16 * e.wheelDeltaX;
-				} 
+				}
 				if(e.wheelDeltaY) {
 					_wheelDelta.y = -0.16 * e.wheelDeltaY;
 				} else {
@@ -3345,14 +3390,27 @@ _registerModule('DesktopZoom', {
 			} else {
 				return;
 			}
-		
-			// TODO: use rAF instead of mousewheel?
+
 			_calculatePanBounds(_currZoomLevel, true);
-			self.panTo(_panOffset.x - _wheelDelta.x, _panOffset.y - _wheelDelta.y);
+
+			var newPanX = _panOffset.x - _wheelDelta.x,
+				newPanY = _panOffset.y - _wheelDelta.y;
+
+			// only prevent scrolling in nonmodal mode when not at edges
+			if (_options.modal ||
+				(
+				newPanX <= _currPanBounds.min.x && newPanX >= _currPanBounds.max.x &&
+				newPanY <= _currPanBounds.min.y && newPanY >= _currPanBounds.max.y
+				) ) {
+				e.preventDefault();
+			}
+
+			// TODO: use rAF instead of mousewheel?
+			self.panTo(newPanX, newPanY);
 		},
 
 		toggleDesktopZoom: function(centerPoint) {
-			centerPoint = centerPoint || {x:_viewportSize.x/2, y:_viewportSize.y/2 + _initalWindowScrollY };
+			centerPoint = centerPoint || {x:_viewportSize.x/2 + _offset.x, y:_viewportSize.y/2 + _offset.y };
 
 			var doubleTapZoomLevel = _options.getDoubleTapZoom(true, self.currItem);
 			var zoomOut = _currZoomLevel === doubleTapZoomLevel;
@@ -3366,6 +3424,7 @@ _registerModule('DesktopZoom', {
 	}
 });
 
+
 /*>>desktop-zoom*/
 
 /*>>history*/
@@ -3426,8 +3485,8 @@ var _historyUpdateTimeout,
 			return params;
 		}
 
-		var vars = hash.split('&');
-		for (var i = 0; i < vars.length; i++) {
+		var i, vars = hash.split('&');
+		for (i = 0; i < vars.length; i++) {
 			if(!vars[i]) {
 				continue;
 			}
@@ -3437,7 +3496,19 @@ var _historyUpdateTimeout,
 			}
 			params[pair[0]] = pair[1];
 		}
-		params.pid = parseInt(params.pid,10)-1;
+		if(_options.galleryPIDs) {
+			// detect custom pid in hash and search for it among the items collection
+			var searchfor = params.pid;
+			params.pid = 0; // if custom pid cannot be found, fallback to the first item
+			for(i = 0; i < _items.length; i++) {
+				if(_items[i].pid === searchfor) {
+					params.pid = i;
+					break;
+				}
+			}
+		} else {
+			params.pid = parseInt(params.pid,10)-1;
+		}
 		if( params.pid < 0 ) {
 			params.pid = 0;
 		}
@@ -3464,7 +3535,13 @@ var _historyUpdateTimeout,
 		}
 
 
-		var newHash = _initialHash + '&'  +  'gid=' + _options.galleryUID + '&' + 'pid=' + (_currentItemIndex + 1);
+		var pid = (_currentItemIndex + 1);
+		var item = _getItemAt( _currentItemIndex );
+		if(item.hasOwnProperty('pid')) {
+			// carry forward any custom pid assigned to the item
+			pid = item.pid;
+		}
+		var newHash = _initialHash + '&'  +  'gid=' + _options.galleryUID + '&' + 'pid=' + pid;
 
 		if(!_historyChanged) {
 			if(_windowLoc.hash.indexOf(newHash) === -1) {
@@ -3635,6 +3712,7 @@ _registerModule('History', {
 	}
 });
 
+
 /*>>history*/
 	framework.extend(self, publicMethods); };
 	return PhotoSwipe;