以下是 手机PC兼容JS图片画廊特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机PC兼容JS图片画廊特效</title>
<link rel="stylesheet" href="dist/photoswipe.css">
<link rel="stylesheet" href="dist/default-skin/default-skin.css">
<link rel="stylesheet" href="css/site.css">
<script src="dist/photoswipe.min.js"></script>
<script src="dist/photoswipe-ui-default.min.js"></script>
</head>
<body>
<article class="htmleaf-container">
<div class="row">
<div id="demo-test-gallery" class="demo-gallery">
<a href="img/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="img/15008465772_d50c8f0531_h.jpg" data-med-size="1024x1024" data-author="Folkert Gorter" class="demo-gallery__img--main">
<img src="img/15008518202_b016d7d289_m.jpg" alt="" />
<figure>This is dummy caption.</figure>
</a>
<a href="img/15008465772_d50c8f0531_h.jpg" data-size="1600x1067" data-med="img/15008465772_d50c8f0531_h.jpg" data-med-size="1024x683" data-author="Thomas Lefebvre">
<img src="img/15008465772_383e697089_m.jpg" alt="" />
<figure>It's a dummy caption. He who searches for meaning here will be sorely disappointed.</figure>
</a>
<a href="img/14985868676_b51baa4071_h.jpg" data-size="1600x1067" data-med="img/14985868676_b51baa4071_h.jpg" data-med-size="1024x683" data-author="Michael Hull">
<img src="img/14985868676_4b802b932a_m.jpg" alt="" />
<figure>Dummy caption. It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense.</figure>
</a>
<a href="img/14985871946_24f47d4b53_h.jpg" data-size="1600x1067" data-med="img/14985871946_24f47d4b53_h.jpg" data-med-size="1024x683" data-author="Ales Krivec">
<img src="img/14985871946_86abb8c56f_m.jpg" alt="" />
<figure>This is dummy caption. It is not meant to be read.</figure>
</a>
<a href="img/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="img/15008867125_b61960af01_h.jpg" data-med-size="1024x683" data-author="Samuel Rohl">
<img src="img/15008867125_68a8ed88cc_m.jpg" alt="" />
<figure>This is dummy caption. It has been placed here solely to demonstrate the look and feel of finished, typeset text.</figure>
</a>
</div>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</article>
<script type="text/javascript">
(function() {
var initPhotoSwipeFromDOM = function(gallerySelector) {
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
el,
childElements,
thumbnailEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
el = thumbElements[i];
// include only element nodes
if(el.nodeType !== 1) {
continue;
}
childElements = el.children;
size = el.getAttribute('data-size').split('x');
// create slide object
item = {
src: el.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
author: el.getAttribute('data-author')
};
item.el = el; // save link to element for getThumbBoundsFn
if(childElements.length > 0) {
item.msrc = childElements[0].getAttribute('src'); // thumbnail url
if(childElements.length > 1) {
item.title = childElements[1].innerHTML; // caption (contents of figure)
}
}
var mediumSrc = el.getAttribute('data-med');
if(mediumSrc) {
size = el.getAttribute('data-med-size').split('x');
// "medium-sized" image
item.m = {
src: mediumSrc,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
// original image
item.o = {
src: item.src,
w: item.w,
h: item.h
};
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return el.tagName === 'A';
});
if(!clickedListItem) {
return;
}
var clickedGallery = clickedListItem.parentNode;
var childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
openPhotoSwipe( index, clickedGallery );
}
return false;
};
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) { // pid=1
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options->getThumbBoundsFn section of docs for more info
var thumbnail = items[index].el.children[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
},
addCaptionHTMLFn: function(item, captionEl, isFake) {
if(!item.title) {
captionEl.children[0].innerText = '';
return false;
}
captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
return true;
}
};
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
var radios = document.getElementsByName('gallery-style');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
if(radios[i].id == 'radio-all-controls') {
} else if(radios[i].id == 'radio-minimal-black') {
options.mainClass = 'pswp--minimal--dark';
options.barsSize = {top:0,bottom:0};
options.captionEl = false;
options.fullscreenEl = false;
options.shareEl = false;
options.bgOpacity = 0.85;
options.tapToClose = true;
options.tapToToggleControls = false;
}
break;
}
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
// see: http://photoswipe.com/documentation/responsive-images.html
var realViewportWidth,
useLargeImages = false,
firstResize = true,
imageSrcWillChange;
gallery.listen('beforeResize', function() {
var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
dpiRatio = Math.min(dpiRatio, 2.5);
realViewportWidth = gallery.viewportSize.x * dpiRatio;
if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
if(!useLargeImages) {
useLargeImages = true;
imageSrcWillChange = true;
}
} else {
if(useLargeImages) {
useLargeImages = false;
imageSrcWillChange = true;
}
}
if(imageSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if(firstResize) {
firstResize = false;
}
imageSrcWillChange = false;
});
gallery.listen('gettingData', function(index, item) {
if( useLargeImages ) {
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
} else {
item.src = item.m.src;
item.w = item.m.w;
item.h = item.m.h;
}
});
gallery.init();
};
// select all gallery elements
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );
}
};
initPhotoSwipeFromDOM('.demo-gallery');
})();
</script>
</body>
</html>
JS代码(photoswipe.js):
/*! PhotoSwipe - v4.1.0 - 2015-09-24* http://photoswipe.com* Copyright (c) 2015 Dmitry Semenov;
*/
(function (root,factory){
if (typeof define === 'function' && define.amd){
define(factory);
}
else if (typeof exports === 'object'){
module.exports = factory();
}
else{
root.PhotoSwipe = factory();
}
}
)(this,function (){
'use strict';
var PhotoSwipe = function(template,UiClass,items,options){
/*>>framework-bridge*/
/** * * Set of generic functions used by gallery. * * You're free to modify anything here as long as functionality is kept. * */
var framework ={
features:null,bind:function(target,type,listener,unbind){
var methodName = (unbind ? 'remove':'add') + 'EventListener';
type = type.split(' ');
for(var i = 0;
i < type.length;
i++){
if(type[i]){
target[methodName]( type[i],listener,false);
}
}
}
,isArray:function(obj){
return (obj instanceof Array);
}
,createEl:function(classes,tag){
var el = document.createElement(tag || 'div');
if(classes){
el.className = classes;
}
return el;
}
,getScrollY:function(){
var yOffset = window.pageYOffset;
return yOffset !== undefined ? yOffset:document.documentElement.scrollTop;
}
,unbind:function(target,type,listener){
framework.bind(target,type,listener,true);
}
,removeClass:function(el,className){
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg,' ').replace(/^\s\s*/
,'').replace(/\s\s*$/,'');
}
,addClass:function(el,className){
if( !framework.hasClass(el,className) ){
el.className += (el.className ? ' ':'') + className;
}
}
,hasClass:function(el,className){
return el.className && new RegExp('(^|\\s)' + className + '(\\s|$)').test(el.className);
}
,getChildByClass:function(parentEl,childClassName){
var node = parentEl.firstChild;
while(node){
if( framework.hasClass(node,childClassName) ){
return node;
}
node = node.nextSibling;
}
}
,arraySearch:function(array,value,key){
var i = array.length;
while(i--){
if(array[i][key] === value){
return i;
}
}
return -1;
}
,extend:function(o1,o2,preventOverwrite){
for (var prop in o2){
if (o2.hasOwnProperty(prop)){
if(preventOverwrite && o1.hasOwnProperty(prop)){
continue;
}
o1[prop] = o2[prop];
}
}
}
,easing:{
sine:{
out:function(k){
return Math.sin(k * (Math.PI / 2));
}
,inOut:function(k){
return - (Math.cos(Math.PI * k) - 1) / 2;
}
}
,cubic:{
out:function(k){
return --k * k * k + 1;
}
}
/*elastic:{
out:function ( k ){
var s,a = 0.1,p = 0.4;
if ( k === 0 ) return 0;
if ( k === 1 ) return 1;
if ( !a || a < 1 ){
a = 1;
s = p / 4;
}
else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
return ( a * Math.pow( 2,- 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
}
,}
,back:{
out:function ( k ){
var s = 1.70158;
return --k * k * ( ( s + 1 ) * k + s ) + 1;
}
}
*/
}
,/** * * @return{
object}
* *{
* raf:request animation frame function * caf:cancel animation frame function * transfrom:transform property key (with vendor),or null if not supported * oldIE:IE8 or below *}
* */
detectFeatures:function(){
if(framework.features){
return framework.features;
}
var helperEl = framework.createEl(),helperStyle = helperEl.style,vendor = '',features ={
}
;
// IE8 and belowfeatures.oldIE = document.all && !document.addEventListener;
features.touch = 'ontouchstart' in window;
if(window.requestAnimationFrame){
features.raf = window.requestAnimationFrame;
features.caf = window.cancelAnimationFrame;
}
features.pointerEvent = navigator.pointerEnabled || navigator.msPointerEnabled;
// fix false-positive detection of old Android in new IE// (IE11 ua string contains "Android 4.0")if(!features.pointerEvent){
var ua = navigator.userAgent;
// Detect if device is iPhone or iPod and if it's older than iOS 8// http://stackoverflow.com/a/14223920//// This detection is made because of buggy top/bottom toolbars// that don't trigger window.resize event.// For more info refer to _isFixedPosition variable in core.jsif (/iP(hone|od)/.test(navigator.platform)){
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if(v && v.length > 0){
v = parseInt(v[1],10);
if(v >= 1 && v < 8 ){
features.isOldIOSPhone = true;
}
}
}
// Detect old Android (before KitKat)// due to bugs related to position:fixed// http://stackoverflow.com/questions/7184573/pick-up-the-android-version-in-the-browser-by-javascriptvar match = ua.match(/Android\s([0-9\.]*)/);
var androidversion = match ? match[1]:0;
androidversion = parseFloat(androidversion);
if(androidversion >= 1 ){
if(androidversion < 4.4){
features.isOldAndroid = true;
// for fixed position bug & performance}
features.androidVersion = androidversion;
// for touchend bug}
features.isMobileOpera = /opera mini|opera mobi/i.test(ua);
// p.s. yes,yes,UA sniffing is bad,propose your solution for above bugs.}
var styleChecks = ['transform','perspective','animationName'],vendors = ['','webkit','Moz','ms','O'],styleCheckItem,styleName;
for(var i = 0;
i < 4;
i++){
vendor = vendors[i];
for(var a = 0;
a < 3;
a++){
styleCheckItem = styleChecks[a];
// uppercase first letter of property name,if vendor is presentstyleName = vendor + (vendor ?styleCheckItem.charAt(0).toUpperCase() + styleCheckItem.slice(1):styleCheckItem);
if(!features[styleCheckItem] && styleName in helperStyle ){
features[styleCheckItem] = styleName;
}
}
if(vendor && !features.raf){
vendor = vendor.toLowerCase();
features.raf = window[vendor+'RequestAnimationFrame'];
if(features.raf){
features.caf = window[vendor+'CancelAnimationFrame'] ||window[vendor+'CancelRequestAnimationFrame'];
}
}
}
if(!features.raf){
var lastTime = 0;
features.raf = function(fn){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16 - (currTime - lastTime));
var id = window.setTimeout(function(){
fn(currTime + timeToCall);
}
,timeToCall);
lastTime = currTime + timeToCall;
return id;
}
;
features.caf = function(id){
clearTimeout(id);
}
;
}
// Detect SVG supportfeatures.svg = !!document.createElementNS &&!!document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;
framework.features = features;
return features;
}
}
;
framework.detectFeatures();
// Override addEventListener for old versions of IEif(framework.features.oldIE){
framework.bind = function(target,type,listener,unbind){
type = type.split(' ');
var methodName = (unbind ? 'detach':'attach') + 'Event',evName,_handleEv = function(){
listener.handleEvent.call(listener);
}
;
for(var i = 0;
i < type.length;
i++){
evName = type[i];
if(evName){
if(typeof listener === 'object' && listener.handleEvent){
if(!unbind){
listener['oldIE' + evName] = _handleEv;
}
else{
if(!listener['oldIE' + evName]){
return false;
}
}
target[methodName]( 'on' + evName,listener['oldIE' + evName]);
}
else{
target[methodName]( 'on' + evName,listener);
}
}
}
}
;
}
/*>>framework-bridge*/
/*>>core*/
//function(template,UiClass,items,options)var self = this;
/** * Static vars,don't change unless you know what you're doing. */
var DOUBLE_TAP_RADIUS = 25,NUM_HOLDERS = 3;
/** * Options */
var _options ={
allowPanToNext:true,spacing:0.12,bgOpacity:1,mouseUsed:false,loop:true,pinchToClose:true,closeOnScroll:true,closeOnVerticalDrag:true,verticalDragRange:0.75,hideAnimationDuration:333,showAnimationDuration:333,showHideOpacity:false,focus:true,escKey:true,arrowKeys:true,mainScrollEndFriction:0.35,panEndFriction:0.35,isClickableElement:function(el){
return el.tagName === 'A';
}
,getDoubleTapZoom:function(isMouseClick,item){
if(isMouseClick){
return 1;
}
else{
return item.initialZoomLevel < 0.7 ? 1:1.33;
}
}
,maxSpreadZoom:1.33,modal:true,// not fully implemented yetscaleMode:'fit' // TODO}
;
framework.extend(_options,options);
/** * Private helper variables & functions */
var _getEmptyPoint = function(){
return{
x:0,y:0}
;
}
;
var _isOpen,_isDestroying,_closedByScroll,_currentItemIndex,_containerStyle,_containerShiftIndex,_currPanDist = _getEmptyPoint(),_startPanOffset = _getEmptyPoint(),_panOffset = _getEmptyPoint(),_upMoveEvents,// drag move,drag end & drag cancel events array_downEvents,// drag start events array_globalEventHandlers,_viewportSize ={
}
,_currZoomLevel,_startZoomLevel,_translatePrefix,_translateSufix,_updateSizeInterval,_itemsNeedUpdate,_currPositionIndex = 0,_offset ={
}
,_slideSize = _getEmptyPoint(),// size of slide area,including spacing_itemHolders,_prevItemIndex,_indexDiff = 0,// difference of indexes since last content update_dragStartEvent,_dragMoveEvent,_dragEndEvent,_dragCancelEvent,_transformKey,_pointerEventEnabled,_isFixedPosition = true,_likelyTouchDevice,_modules = [],_requestAF,_cancelAF,_initalClassName,_initalWindowScrollY,_oldIE,_currentWindowScrollY,_features,_windowVisibleSize ={
}
,_renderMaxResolution = false,// Registers PhotoSWipe module (History,Controller ...)_registerModule = function(name,module){
framework.extend(self,module.publicMethods);
_modules.push(name);
}
,_getLoopedId = function(index){
var numSlides = _getNumItems();
if(index > numSlides - 1){
return index - numSlides;
}
else if(index < 0){
return numSlides + index;
}
return index;
}
,// Micro bind/trigger_listeners ={
}
,_listen = function(name,fn){
if(!_listeners[name]){
_listeners[name] = [];
}
return _listeners[name].push(fn);
}
,_shout = function(name){
var listeners = _listeners[name];
if(listeners){
var args = Array.prototype.slice.call(arguments);
args.shift();
for(var i = 0;
i < listeners.length;
i++){
listeners[i].apply(self,args);
}
}
}
,_getCurrentTime = function(){
return new Date().getTime();
}
,_applyBgOpacity = function(opacity){
_bgOpacity = opacity;
self.bg.style.opacity = opacity * _options.bgOpacity;
}
,_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( 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);
}
}
,_setTranslateX = function(x,elStyle){
elStyle[_transformKey] = _translatePrefix + x + 'px,0px' + _translateSufix;
}
,_moveMainScroll = function(x,dragging){
if(!_options.loop && dragging){
var newSlideIndexOffset = _currentItemIndex + (_slideSize.x * _currPositionIndex - x) / _slideSize.x,delta = Math.round(x - _mainScrollPos.x);
if( (newSlideIndexOffset < 0 && delta > 0) ||(newSlideIndexOffset >= _getNumItems() - 1 && delta < 0) ){
x = _mainScrollPos.x + delta * _options.mainScrollEndFriction;
}
}
_mainScrollPos.x = x;
_setTranslateX(x,_containerStyle);
}
,_calculatePanOffset = function(axis,zoomLevel){
var m = _midZoomPoint[axis] - _offset[axis];
return _startPanOffset[axis] + _currPanDist[axis] + m - m * ( zoomLevel / _startZoomLevel );
}
,_equalizePoints = function(p1,p2){
p1.x = p2.x;
p1.y = p2.y;
if(p2.id){
p1.id = p2.id;
}
}
,_roundPoint = function(p){
p.x = Math.round(p.x);
p.y = Math.round(p.y);
}
,_mouseMoveTimeout = null,_onFirstMouseMove = function(){
// Wait until mouse move event is fired at least twice during 100ms// We do this,because some mobile browsers trigger it on touchstartif(_mouseMoveTimeout ){
framework.unbind(document,'mousemove',_onFirstMouseMove);
framework.addClass(template,'pswp--has_mouse');
_options.mouseUsed = true;
_shout('mouseUsed');
}
_mouseMoveTimeout = setTimeout(function(){
_mouseMoveTimeout = null;
}
,100);
}
,_bindEvents = function(){
framework.bind(document,'keydown',self);
if(_features.transform){
// don't bind click event in browsers that don't support transform (mostly IE8)framework.bind(self.scrollWrap,'click',self);
}
if(!_options.mouseUsed){
framework.bind(document,'mousemove',_onFirstMouseMove);
}
framework.bind(window,'resize scroll',self);
_shout('bindEvents');
}
,_unbindEvents = function(){
framework.unbind(window,'resize',self);
framework.unbind(window,'scroll',_globalEventHandlers.scroll);
framework.unbind(document,'keydown',self);
framework.unbind(document,'mousemove',_onFirstMouseMove);
if(_features.transform){
framework.unbind(self.scrollWrap,'click',self);
}
if(_isDragging){
framework.unbind(window,_upMoveEvents,self);
}
_shout('unbindEvents');
}
,_calculatePanBounds = function(zoomLevel,update){
var bounds = _calculateItemSize( self.currItem,_viewportSize,zoomLevel );
if(update){
_currPanBounds = bounds;
}
return bounds;
}
,_getMinZoomLevel = function(item){
if(!item){
item = self.currItem;
}
return item.initialZoomLevel;
}
,_getMaxZoomLevel = function(item){
if(!item){
item = self.currItem;
}
return item.w > 0 ? _options.maxSpreadZoom:1;
}
,// Return true if offset is out of the bounds_modifyDestPanOffset = function(axis,destPanBounds,destPanOffset,destZoomLevel){
if(destZoomLevel === self.currItem.initialZoomLevel){
destPanOffset[axis] = self.currItem.initialPosition[axis];
return true;
}
else{
destPanOffset[axis] = _calculatePanOffset(axis,destZoomLevel);
if(destPanOffset[axis] > destPanBounds.min[axis]){
destPanOffset[axis] = destPanBounds.min[axis];
return true;
}
else if(destPanOffset[axis] < destPanBounds.max[axis] ){
destPanOffset[axis] = destPanBounds.max[axis];
return true;
}
}
return false;
}
,_setupTransforms = function(){
if(_transformKey){
// setup 3d transformsvar allow3dTransform = _features.perspective && !_likelyTouchDevice;
_translatePrefix = 'translate' + (allow3dTransform ? '3d(':'(');
_translateSufix = _features.perspective ? ',0px)':')';
return;
}
// Override zoom/pan/move functions in case old browser is used (most likely IE)// (so they use left/top/width/height,instead of CSS transform)_transformKey = 'left';
framework.addClass(template,'pswp--ie');
_setTranslateX = function(x,elStyle){
elStyle.left = x + 'px';
}
;
_applyZoomPanToItem = function(item){
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';
s.left = item.initialPosition.x + 'px';
s.top = item.initialPosition.y + 'px';
}
;
_applyCurrentZoomPan = function(){
if(_currZoomElementStyle){
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';
s.left = _panOffset.x + 'px';
s.top = _panOffset.y + 'px';
}
}
;
}
,_onKeyDown = function(e){
var keydownAction = '';
if(_options.escKey && e.keyCode === 27){
keydownAction = 'close';
}
else if(_options.arrowKeys){
if(e.keyCode === 37){
keydownAction = 'prev';
}
else if(e.keyCode === 39){
keydownAction = 'next';
}
}
if(keydownAction){
// don't do anything if special key pressed to prevent from overriding default browser actions// e.g. in Chrome on Mac cmd+arrow-left returns to previous pageif( !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey ){
if(e.preventDefault){
e.preventDefault();
}
else{
e.returnValue = false;
}
self[keydownAction]();
}
}
}
,_onGlobalClick = function(e){
if(!e){
return;
}
// don't allow click event to pass through when triggering after drag or some other gestureif(_moved || _zoomStarted || _mainScrollAnimating || _verticalDragInitiated){
e.preventDefault();
e.stopPropagation();
}
}
,_updatePageScrollOffset = function(){
self.setScrollOffset(0,framework.getScrollY());
}
;
// Micro animation enginevar _animations ={
}
,_numAnimations = 0,_stopAnimation = function(name){
if(_animations[name]){
if(_animations[name].raf){
_cancelAF( _animations[name].raf );
}
_numAnimations--;
delete _animations[name];
}
}
,_registerStartAnimation = function(name){
if(_animations[name]){
_stopAnimation(name);
}
if(!_animations[name]){
_numAnimations++;
_animations[name] ={
}
;
}
}
,_stopAllAnimations = function(){
for (var prop in _animations){
if( _animations.hasOwnProperty( prop ) ){
_stopAnimation(prop);
}
}
}
,_animateProp = function(name,b,endProp,d,easingFn,onUpdate,onComplete){
var startAnimTime = _getCurrentTime(),t;
_registerStartAnimation(name);
var animloop = function(){
if ( _animations[name] ){
t = _getCurrentTime() - startAnimTime;
// time diff//b - beginning (start prop)//d - anim durationif ( t >= d ){
_stopAnimation(name);
onUpdate(endProp);
if(onComplete){
onComplete();
}
return;
}
onUpdate( (endProp - b) * easingFn(t/d) + b );
_animations[name].raf = _requestAF(animloop);
}
}
;
animloop();
}
;
var publicMethods ={
// make a few local variables and functions publicshout:_shout,listen:_listen,viewportSize:_viewportSize,options:_options,isMainScrollAnimating:function(){
return _mainScrollAnimating;
}
,getZoomLevel:function(){
return _currZoomLevel;
}
,getCurrentIndex:function(){
return _currentItemIndex;
}
,isDragging:function(){
return _isDragging;
}
,isZooming:function(){
return _isZooming;
}
,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( allowRenderResolution );
}
,init:function(){
if(_isOpen || _isDestroying){
return;
}
var i;
self.framework = framework;
// basic functionalityself.template = template;
// root DOM element of PhotoSwipeself.bg = framework.getChildByClass(template,'pswp__bg');
_initalClassName = template.className;
_isOpen = true;
_features = framework.detectFeatures();
_requestAF = _features.raf;
_cancelAF = _features.caf;
_transformKey = _features.transform;
_oldIE = _features.oldIE;
self.scrollWrap = framework.getChildByClass(template,'pswp__scroll-wrap');
self.container = framework.getChildByClass(self.scrollWrap,'pswp__container');
_containerStyle = self.container.style;
// for fast access// Objects that hold slides (there are only 3 in DOM)self.itemHolders = _itemHolders = [{
el:self.container.children[0],wrap:0,index:-1}
,{
el:self.container.children[1],wrap:0,index:-1}
,{
el:self.container.children[2],wrap:0,index:-1}
];
// hide nearby item holders until initial zoom animation finishes (to avoid extra Paints)_itemHolders[0].el.style.display = _itemHolders[2].el.style.display = 'none';
_setupTransforms();
// Setup global events_globalEventHandlers ={
resize:self.updateSize,scroll:_updatePageScrollOffset,keydown:_onKeyDown,click:_onGlobalClick}
;
// disable show/hide effects on old browsers that don't support CSS animations or transforms,// old IOS,Android and Opera mobile. Blackberry seems to work fine,even older models.var oldPhone = _features.isOldIOSPhone || _features.isOldAndroid || _features.isMobileOpera;
if(!_features.animationName || !_features.transform || oldPhone){
_options.showAnimationDuration = _options.hideAnimationDuration = 0;
}
// init modulesfor(i = 0;
i < _modules.length;
i++){
self['init' + _modules[i]]();
}
// initif(UiClass){
var ui = self.ui = new UiClass(self,framework);
ui.init();
}
_shout('firstUpdate');
_currentItemIndex = _currentItemIndex || _options.index || 0;
// validate indexif( isNaN(_currentItemIndex) || _currentItemIndex < 0 || _currentItemIndex >= _getNumItems() ){
_currentItemIndex = 0;
}
self.currItem = _getItemAt( _currentItemIndex );
if(_features.isOldIOSPhone || _features.isOldAndroid){
_isFixedPosition = false;
}
template.setAttribute('aria-hidden','false');
if(_options.modal){
if(!_isFixedPosition){
template.style.position = 'absolute';
template.style.top = framework.getScrollY() + 'px';
}
else{
template.style.position = 'fixed';
}
}
if(_currentWindowScrollY === undefined){
_shout('initialLayout');
_currentWindowScrollY = _initalWindowScrollY = framework.getScrollY();
}
// add classes to root element of PhotoSwipevar rootClasses = 'pswp--open ';
if(_options.mainClass){
rootClasses += _options.mainClass + ' ';
}
if(_options.showHideOpacity){
rootClasses += 'pswp--animate_opacity ';
}
rootClasses += _likelyTouchDevice ? 'pswp--touch':'pswp--notouch';
rootClasses += _features.animationName ? ' pswp--css_animation':'';
rootClasses += _features.svg ? ' pswp--svg':'';
framework.addClass(template,rootClasses);
self.updateSize();
// initial update_containerShiftIndex = -1;
_indexDiff = null;
for(i = 0;
i < NUM_HOLDERS;
i++){
_setTranslateX( (i+_containerShiftIndex) * _slideSize.x,_itemHolders[i].el.style);
}
if(!_oldIE){
framework.bind(self.scrollWrap,_downEvents,self);
// no dragging for old IE}
_listen('initialZoomInEnd',function(){
self.setContent(_itemHolders[0],_currentItemIndex-1);
self.setContent(_itemHolders[2],_currentItemIndex+1);
_itemHolders[0].el.style.display = _itemHolders[2].el.style.display = 'block';
if(_options.focus){
// focus causes layout,// which causes lag during the animation,// that's why we delay it untill the initial zoom transition endstemplate.focus();
}
_bindEvents();
}
);
// set content for center slide (first time)self.setContent(_itemHolders[1],_currentItemIndex);
self.updateCurrItem();
_shout('afterInit');
if(!_isFixedPosition){
// On all versions of iOS lower than 8.0,we check size of viewport every second.//// This is done to detect when Safari top & bottom bars appear,// as this action doesn't trigger any events (like resize).//// On iOS8 they fixed this.//// 10 Nov 2014:iOS 7 usage ~40%. iOS 8 usage 56%._updateSizeInterval = setInterval(function(){
if(!_numAnimations && !_isDragging && !_isZooming && (_currZoomLevel === self.currItem.initialZoomLevel) ){
self.updateSize();
}
}
,1000);
}
framework.addClass(template,'pswp--visible');
}
,// Close the gallery,then destroy itclose:function(){
if(!_isOpen){
return;
}
_isOpen = false;
_isDestroying = true;
_shout('close');
_unbindEvents();
_showOrHide(self.currItem,null,true,self.destroy);
}
,// destroys the gallery (unbinds events,cleans up intervals and timeouts to avoid memory leaks)destroy:function(){
_shout('destroy');
if(_showOrHideTimeout){
clearTimeout(_showOrHideTimeout);
}
template.setAttribute('aria-hidden','true');
template.className = _initalClassName;
if(_updateSizeInterval){
clearInterval(_updateSizeInterval);
}
framework.unbind(self.scrollWrap,_downEvents,self);
// we unbind scroll event at the end,as closing animation may depend on itframework.unbind(window,'scroll',self);
_stopDragUpdateLoop();
_stopAllAnimations();
_listeners = null;
}
,/** * Pan image to position * @param{
Number}
x * @param{
Number}
y * @param{
Boolean}
force Will ignore bounds if set to true. */
panTo:function(x,y,force){
if(!force){
if(x > _currPanBounds.min.x){
x = _currPanBounds.min.x;
}
else if(x < _currPanBounds.max.x){
x = _currPanBounds.max.x;
}
if(y > _currPanBounds.min.y){
y = _currPanBounds.min.y;
}
else if(y < _currPanBounds.max.y){
y = _currPanBounds.max.y;
}
}
_panOffset.x = x;
_panOffset.y = y;
_applyCurrentZoomPan();
}
,handleEvent:function (e){
e = e || window.event;
if(_globalEventHandlers[e.type]){
_globalEventHandlers[e.type](e);
}
}
,goTo:function(index){
index = _getLoopedId(index);
var diff = index - _currentItemIndex;
_indexDiff = diff;
_currentItemIndex = index;
self.currItem = _getItemAt( _currentItemIndex );
_currPositionIndex -= diff;
_moveMainScroll(_slideSize.x * _currPositionIndex);
_stopAllAnimations();
_mainScrollAnimating = false;
self.updateCurrItem();
}
,next:function(){
self.goTo( _currentItemIndex + 1);
}
,prev:function(){
self.goTo( _currentItemIndex - 1);
}
,// update current zoom/pan objectsupdateCurrZoomItem:function(emulateSetContent){
if(emulateSetContent){
_shout('beforeChange',0);
}
// itemHolder[1] is middle (current) itemif(_itemHolders[1].el.children.length){
var zoomElement = _itemHolders[1].el.children[0];
if( framework.hasClass(zoomElement,'pswp__zoom-wrap') ){
_currZoomElementStyle = zoomElement.style;
}
else{
_currZoomElementStyle = null;
}
}
else{
_currZoomElementStyle = null;
}
_currPanBounds = self.currItem.bounds;
_startZoomLevel = _currZoomLevel = self.currItem.initialZoomLevel;
_panOffset.x = _currPanBounds.center.x;
_panOffset.y = _currPanBounds.center.y;
if(emulateSetContent){
_shout('afterChange');
}
}
,invalidateCurrItems:function(){
_itemsNeedUpdate = true;
for(var i = 0;
i < NUM_HOLDERS;
i++){
if( _itemHolders[i].item ){
_itemHolders[i].item.needsUpdate = true;
}
}
}
,updateCurrItem:function(beforeAnimation){
if(_indexDiff === 0){
return;
}
var diffAbs = Math.abs(_indexDiff),tempHolder;
if(beforeAnimation && diffAbs < 2){
return;
}
self.currItem = _getItemAt( _currentItemIndex );
_renderMaxResolution = false;
_shout('beforeChange',_indexDiff);
if(diffAbs >= NUM_HOLDERS){
_containerShiftIndex += _indexDiff + (_indexDiff > 0 ? -NUM_HOLDERS:NUM_HOLDERS);
diffAbs = NUM_HOLDERS;
}
for(var i = 0;
i < diffAbs;
i++){
if(_indexDiff > 0){
tempHolder = _itemHolders.shift();
_itemHolders[NUM_HOLDERS-1] = tempHolder;
// move first to last_containerShiftIndex++;
_setTranslateX( (_containerShiftIndex+2) * _slideSize.x,tempHolder.el.style);
self.setContent(tempHolder,_currentItemIndex - diffAbs + i + 1 + 1);
}
else{
tempHolder = _itemHolders.pop();
_itemHolders.unshift( tempHolder );
// move last to first_containerShiftIndex--;
_setTranslateX( _containerShiftIndex * _slideSize.x,tempHolder.el.style);
self.setContent(tempHolder,_currentItemIndex + diffAbs - i - 1 - 1);
}
}
// reset zoom/pan on previous itemif(_currZoomElementStyle && Math.abs(_indexDiff) === 1){
var prevItem = _getItemAt(_prevItemIndex);
if(prevItem.initialZoomLevel !== _currZoomLevel){
_calculateItemSize(prevItem,_viewportSize );
_setImageSize(prevItem);
_applyZoomPanToItem( prevItem );
}
}
// reset diff after update_indexDiff = 0;
self.updateCurrZoomItem();
_prevItemIndex = _currentItemIndex;
_shout('afterChange');
}
,updateSize:function(force){
if(!_isFixedPosition && _options.modal){
var windowScrollY = framework.getScrollY();
if(_currentWindowScrollY !== windowScrollY){
template.style.top = windowScrollY + 'px';
_currentWindowScrollY = windowScrollY;
}
if(!force && _windowVisibleSize.x === window.innerWidth && _windowVisibleSize.y === window.innerHeight){
return;
}
_windowVisibleSize.x = window.innerWidth;
_windowVisibleSize.y = window.innerHeight;
//template.style.width = _windowVisibleSize.x + 'px';
template.style.height = _windowVisibleSize.y + 'px';
}
_viewportSize.x = self.scrollWrap.clientWidth;
_viewportSize.y = self.scrollWrap.clientHeight;
_updatePageScrollOffset();
_slideSize.x = _viewportSize.x + Math.round(_viewportSize.x * _options.spacing);
_slideSize.y = _viewportSize.y;
_moveMainScroll(_slideSize.x * _currPositionIndex);
_shout('beforeResize');
// even may be used for example to switch image sources// don't re-calculate size on inital size updateif(_containerShiftIndex !== undefined){
var holder,item,hIndex;
for(var i = 0;
i < NUM_HOLDERS;
i++){
holder = _itemHolders[i];
_setTranslateX( (i+_containerShiftIndex) * _slideSize.x,holder.el.style);
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( item && (_itemsNeedUpdate || item.needsUpdate || !item.bounds) ){
self.cleanSlide( item );
self.setContent( holder,hIndex );
// if "center" slideif(i === 1){
self.currItem = item;
self.updateCurrZoomItem(true);
}
item.needsUpdate = false;
}
else if(holder.index === -1 && hIndex >= 0){
// add content first timeself.setContent( holder,hIndex );
}
if(item && item.container){
_calculateItemSize(item,_viewportSize);
_setImageSize(item);
_applyZoomPanToItem( item );
}
}
_itemsNeedUpdate = false;
}
_startZoomLevel = _currZoomLevel = self.currItem.initialZoomLevel;
_currPanBounds = self.currItem.bounds;
if(_currPanBounds){
_panOffset.x = _currPanBounds.center.x;
_panOffset.y = _currPanBounds.center.y;
_applyCurrentZoomPan( true );
}
_shout('resize');
}
,// Zoom current item tozoomTo:function(destZoomLevel,centerPoint,speed,easingFn,updateFn){
/*if(destZoomLevel === 'fit'){
destZoomLevel = self.currItem.fitRatio;
}
else if(destZoomLevel === 'fill'){
destZoomLevel = self.currItem.fillRatio;
}
*/
if(centerPoint){
_startZoomLevel = _currZoomLevel;
_midZoomPoint.x = Math.abs(centerPoint.x) - _panOffset.x;
_midZoomPoint.y = Math.abs(centerPoint.y) - _panOffset.y;
_equalizePoints(_startPanOffset,_panOffset);
}
var destPanBounds = _calculatePanBounds(destZoomLevel,false),destPanOffset ={
}
;
_modifyDestPanOffset('x',destPanBounds,destPanOffset,destZoomLevel);
_modifyDestPanOffset('y',destPanBounds,destPanOffset,destZoomLevel);
var initialZoomLevel = _currZoomLevel;
var initialPanOffset ={
x:_panOffset.x,y:_panOffset.y}
;
_roundPoint(destPanOffset);
var onUpdate = function(now){
if(now === 1){
_currZoomLevel = destZoomLevel;
_panOffset.x = destPanOffset.x;
_panOffset.y = destPanOffset.y;
}
else{
_currZoomLevel = (destZoomLevel - initialZoomLevel) * now + initialZoomLevel;
_panOffset.x = (destPanOffset.x - initialPanOffset.x) * now + initialPanOffset.x;
_panOffset.y = (destPanOffset.y - initialPanOffset.y) * now + initialPanOffset.y;
}
if(updateFn){
updateFn(now);
}
_applyCurrentZoomPan( now === 1 );
}
;
if(speed){
_animateProp('customZoomTo',0,1,speed,easingFn || framework.easing.sine.inOut,onUpdate);
}
else{
onUpdate(1);
}
}
}
;
/*>>core*/
/*>>gestures*/
/** * Mouse/touch/pointer event handlers. * * separated from @core.js for readability */
var MIN_SWIPE_DISTANCE = 30,DIRECTION_CHECK_OFFSET = 10;
// amount of pixels to drag to determine direction of swipevar _gestureStartTime,_gestureCheckSpeedTime,// pool of objects that are used during dragging of zoomingp ={
}
,// first pointp2 ={
}
,// second point (for zoom gesture)delta ={
}
,_currPoint ={
}
,_startPoint ={
}
,_currPointers = [],_startMainScrollPos ={
}
,_releaseAnimData,_posPoints = [],// array of points during dragging,used to determine type of gesture_tempPoint ={
}
,_isZoomingIn,_verticalDragInitiated,_oldAndroidTouchEndTimeout,_currZoomedItemIndex = 0,_centerPoint = _getEmptyPoint(),_lastReleaseTime = 0,_isDragging,// at least one pointer is down_isMultitouch,// at least two _pointers are down_zoomStarted,// zoom level changed during zoom gesture_moved,_dragAnimFrame,_mainScrollShifted,_currentPoints,// array of current touch points_isZooming,_currPointsDistance,_startPointsDistance,_currPanBounds,_mainScrollPos = _getEmptyPoint(),_currZoomElementStyle,_mainScrollAnimating,// true,if animation after swipe gesture is running_midZoomPoint = _getEmptyPoint(),_currCenterPoint = _getEmptyPoint(),_direction,_isFirstMove,_opacityChanged,_bgOpacity,_wasOverInitialZoom,_isEqualPoints = function(p1,p2){
return p1.x === p2.x && p1.y === p2.y;
}
,_isNearbyPoints = function(touch0,touch1){
return Math.abs(touch0.x - touch1.x) < DOUBLE_TAP_RADIUS && Math.abs(touch0.y - touch1.y) < DOUBLE_TAP_RADIUS;
}
,_calculatePointsDistance = function(p1,p2){
_tempPoint.x = Math.abs( p1.x - p2.x );
_tempPoint.y = Math.abs( p1.y - p2.y );
return Math.sqrt(_tempPoint.x * _tempPoint.x + _tempPoint.y * _tempPoint.y);
}
,_stopDragUpdateLoop = function(){
if(_dragAnimFrame){
_cancelAF(_dragAnimFrame);
_dragAnimFrame = null;
}
}
,_dragUpdateLoop = function(){
if(_isDragging){
_dragAnimFrame = _requestAF(_dragUpdateLoop);
_renderMovement();
}
}
,_canPan = function(){
return !(_options.scaleMode === 'fit' && _currZoomLevel === self.currItem.initialZoomLevel);
}
,// find the closest parent DOM element_closestElement = function(el,fn){
if(!el){
return false;
}
// don't search elements above pswp__scroll-wrapif(el.className && el.className.indexOf('pswp__scroll-wrap') > -1 ){
return false;
}
if( fn(el) ){
return el;
}
return _closestElement(el.parentNode,fn);
}
,_preventObj ={
}
,_preventDefaultEventBehaviour = function(e,isDown){
_preventObj.prevent = !_closestElement(e.target,_options.isClickableElement);
_shout('preventDragEvent',e,isDown,_preventObj);
return _preventObj.prevent;
}
,_convertTouchToPoint = function(touch,p){
p.x = touch.pageX;
p.y = touch.pageY;
p.id = touch.identifier;
return p;
}
,_findCenterOfPoints = function(p1,p2,pCenter){
pCenter.x = (p1.x + p2.x) * 0.5;
pCenter.y = (p1.y + p2.y) * 0.5;
}
,_pushPosPoint = function(time,x,y){
if(time - _gestureCheckSpeedTime > 50){
var o = _posPoints.length > 2 ? _posPoints.shift():{
}
;
o.x = x;
o.y = y;
_posPoints.push(o);
_gestureCheckSpeedTime = time;
}
}
,_calculateVerticalDragOpacityRatio = function(){
var yOffset = _panOffset.y - self.currItem.initialPosition.y;
// difference between initial and current positionreturn 1 - Math.abs( yOffset / (_viewportSize.y / 2) );
}
,// points pool,reused during touch events_ePoint1 ={
}
,_ePoint2 ={
}
,_tempPointsArr = [],_tempCounter,_getTouchPoints = function(e){
// clean up previous points,without recreating arraywhile(_tempPointsArr.length > 0){
_tempPointsArr.pop();
}
if(!_pointerEventEnabled){
if(e.type.indexOf('touch') > -1){
if(e.touches && e.touches.length > 0){
_tempPointsArr[0] = _convertTouchToPoint(e.touches[0],_ePoint1);
if(e.touches.length > 1){
_tempPointsArr[1] = _convertTouchToPoint(e.touches[1],_ePoint2);
}
}
}
else{
_ePoint1.x = e.pageX;
_ePoint1.y = e.pageY;
_ePoint1.id = '';
_tempPointsArr[0] = _ePoint1;
//_ePoint1;
}
}
else{
_tempCounter = 0;
// we can use forEach,as pointer events are supported only in modern browsers_currPointers.forEach(function(p){
if(_tempCounter === 0){
_tempPointsArr[0] = p;
}
else if(_tempCounter === 1){
_tempPointsArr[1] = p;
}
_tempCounter++;
}
);
}
return _tempPointsArr;
}
,_panOrMoveMainScroll = function(axis,delta){
var panFriction,overDiff = 0,newOffset = _panOffset[axis] + delta[axis],startOverDiff,dir = delta[axis] > 0,newMainScrollPosition = _mainScrollPos.x + delta.x,mainScrollDiff = _mainScrollPos.x - _startMainScrollPos.x,newPanPos,newMainScrollPos;
// calculate fdistance over the bounds and frictionif(newOffset > _currPanBounds.min[axis] || newOffset < _currPanBounds.max[axis]){
panFriction = _options.panEndFriction;
// Linear increasing of friction,so at 1/4 of viewport it's at max value.// Looks not as nice as was expected. Left for history.// panFriction = (1 - (_panOffset[axis] + delta[axis] + panBounds.min[axis]) / (_viewportSize[axis] / 4) );
}
else{
panFriction = 1;
}
newOffset = _panOffset[axis] + delta[axis] * panFriction;
// move main scroll or start panningif(_options.allowPanToNext || _currZoomLevel === self.currItem.initialZoomLevel){
if(!_currZoomElementStyle){
newMainScrollPos = newMainScrollPosition;
}
else if(_direction === 'h' && axis === 'x' && !_zoomStarted ){
if(dir){
if(newOffset > _currPanBounds.min[axis]){
panFriction = _options.panEndFriction;
overDiff = _currPanBounds.min[axis] - newOffset;
startOverDiff = _currPanBounds.min[axis] - _startPanOffset[axis];
}
// drag rightif( (startOverDiff <= 0 || mainScrollDiff < 0) && _getNumItems() > 1 ){
newMainScrollPos = newMainScrollPosition;
if(mainScrollDiff < 0 && newMainScrollPosition > _startMainScrollPos.x){
newMainScrollPos = _startMainScrollPos.x;
}
}
else{
if(_currPanBounds.min.x !== _currPanBounds.max.x){
newPanPos = newOffset;
}
}
}
else{
if(newOffset < _currPanBounds.max[axis] ){
panFriction =_options.panEndFriction;
overDiff = newOffset - _currPanBounds.max[axis];
startOverDiff = _startPanOffset[axis] - _currPanBounds.max[axis];
}
if( (startOverDiff <= 0 || mainScrollDiff > 0) && _getNumItems() > 1 ){
newMainScrollPos = newMainScrollPosition;
if(mainScrollDiff > 0 && newMainScrollPosition < _startMainScrollPos.x){
newMainScrollPos = _startMainScrollPos.x;
}
}
else{
if(_currPanBounds.min.x !== _currPanBounds.max.x){
newPanPos = newOffset;
}
}
}
//}
if(axis === 'x'){
if(newMainScrollPos !== undefined){
_moveMainScroll(newMainScrollPos,true);
if(newMainScrollPos === _startMainScrollPos.x){
_mainScrollShifted = false;
}
else{
_mainScrollShifted = true;
}
}
if(_currPanBounds.min.x !== _currPanBounds.max.x){
if(newPanPos !== undefined){
_panOffset.x = newPanPos;
}
else if(!_mainScrollShifted){
_panOffset.x += delta.x * panFriction;
}
}
return newMainScrollPos !== undefined;
}
}
if(!_mainScrollAnimating){
if(!_mainScrollShifted){
if(_currZoomLevel > self.currItem.fitRatio){
_panOffset[axis] += delta[axis] * panFriction;
}
}
}
}
,// Pointerdown/touchstart/mousedown handler_onDragStart = function(e){
// Allow dragging only via left mouse button.// As this handler is not added in IE8 - we ignore e.which//// http://www.quirksmode.org/js/events_properties.html// https://developer.mozilla.org/en-US/docs/Web/API/event.buttonif(e.type === 'mousedown' && e.button > 0 ){
return;
}
if(_initialZoomRunning){
e.preventDefault();
return;
}
if(_oldAndroidTouchEndTimeout && e.type === 'mousedown'){
return;
}
if(_preventDefaultEventBehaviour(e,true)){
e.preventDefault();
}
_shout('pointerDown');
if(_pointerEventEnabled){
var pointerIndex = framework.arraySearch(_currPointers,e.pointerId,'id');
if(pointerIndex < 0){
pointerIndex = _currPointers.length;
}
_currPointers[pointerIndex] ={
x:e.pageX,y:e.pageY,id:e.pointerId}
;
}
var startPointsList = _getTouchPoints(e),numPoints = startPointsList.length;
_currentPoints = null;
_stopAllAnimations();
// init dragif(!_isDragging || numPoints === 1){
_isDragging = _isFirstMove = true;
framework.bind(window,_upMoveEvents,self);
_isZoomingIn =_wasOverInitialZoom =_opacityChanged =_verticalDragInitiated =_mainScrollShifted =_moved =_isMultitouch =_zoomStarted = false;
_direction = null;
_shout('firstTouchStart',startPointsList);
_equalizePoints(_startPanOffset,_panOffset);
_currPanDist.x = _currPanDist.y = 0;
_equalizePoints(_currPoint,startPointsList[0]);
_equalizePoints(_startPoint,_currPoint);
//_equalizePoints(_startMainScrollPos,_mainScrollPos);
_startMainScrollPos.x = _slideSize.x * _currPositionIndex;
_posPoints = [{
x:_currPoint.x,y:_currPoint.y}
];
_gestureCheckSpeedTime = _gestureStartTime = _getCurrentTime();
//_mainScrollAnimationEnd(true);
_calculatePanBounds( _currZoomLevel,true );
// Start rendering_stopDragUpdateLoop();
_dragUpdateLoop();
}
// init zoomif(!_isZooming && numPoints > 1 && !_mainScrollAnimating && !_mainScrollShifted){
_startZoomLevel = _currZoomLevel;
_zoomStarted = false;
// true if zoom changed at least once_isZooming = _isMultitouch = true;
_currPanDist.y = _currPanDist.x = 0;
_equalizePoints(_startPanOffset,_panOffset);
_equalizePoints(p,startPointsList[0]);
_equalizePoints(p2,startPointsList[1]);
_findCenterOfPoints(p,p2,_currCenterPoint);
_midZoomPoint.x = Math.abs(_currCenterPoint.x) - _panOffset.x;
_midZoomPoint.y = Math.abs(_currCenterPoint.y) - _panOffset.y;
_currPointsDistance = _startPointsDistance = _calculatePointsDistance(p,p2);
}
}
,// Pointermove/touchmove/mousemove handler_onDragMove = function(e){
e.preventDefault();
if(_pointerEventEnabled){
var pointerIndex = framework.arraySearch(_currPointers,e.pointerId,'id');
if(pointerIndex > -1){
var p = _currPointers[pointerIndex];
p.x = e.pageX;
p.y = e.pageY;
}
}
if(_isDragging){
var touchesList = _getTouchPoints(e);
if(!_direction && !_moved && !_isZooming){
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 movementif(Math.abs(diff) >= DIRECTION_CHECK_OFFSET){
_direction = diff > 0 ? 'h':'v';
_currentPoints = touchesList;
}
}
}
else{
_currentPoints = touchesList;
}
}
}
,//_renderMovement = function(){
if(!_currentPoints){
return;
}
var numPoints = _currentPoints.length;
if(numPoints === 0){
return;
}
_equalizePoints(p,_currentPoints[0]);
delta.x = p.x - _currPoint.x;
delta.y = p.y - _currPoint.y;
if(_isZooming && numPoints > 1){
// Handle behaviour for more than 1 point_currPoint.x = p.x;
_currPoint.y = p.y;
// check if one of two points changedif( !delta.x && !delta.y && _isEqualPoints(_currentPoints[1],p2) ){
return;
}
_equalizePoints(p2,_currentPoints[1]);
if(!_zoomStarted){
_zoomStarted = true;
_shout('zoomGestureStarted');
}
// Distance between two pointsvar pointsDistance = _calculatePointsDistance(p,p2);
var zoomLevel = _calculateZoomLevel(pointsDistance);
// slightly over the of initial zoom levelif(zoomLevel > self.currItem.initialZoomLevel + self.currItem.initialZoomLevel / 15){
_wasOverInitialZoom = true;
}
// Apply the friction if zoom level is out of the boundsvar zoomFriction = 1,minZoomLevel = _getMinZoomLevel(),maxZoomLevel = _getMaxZoomLevel();
if ( zoomLevel < minZoomLevel ){
if(_options.pinchToClose && !_wasOverInitialZoom && _startZoomLevel <= self.currItem.initialZoomLevel){
// fade out background if zooming outvar minusDiff = minZoomLevel - zoomLevel;
var percent = 1 - minusDiff / (minZoomLevel / 1.2);
_applyBgOpacity(percent);
_shout('onPinchClose',percent);
_opacityChanged = true;
}
else{
zoomFriction = (minZoomLevel - zoomLevel) / minZoomLevel;
if(zoomFriction > 1){
zoomFriction = 1;
}
zoomLevel = minZoomLevel - zoomFriction * (minZoomLevel / 3);
}
}
else if ( zoomLevel > maxZoomLevel ){
// 1.5 - extra zoom level above the max. E.g. if max is x6,real max 6 + 1.5 = 7.5zoomFriction = (zoomLevel - maxZoomLevel) / ( minZoomLevel * 6 );
if(zoomFriction > 1){
zoomFriction = 1;
}
zoomLevel = maxZoomLevel + zoomFriction * minZoomLevel;
}
if(zoomFriction < 0){
zoomFriction = 0;
}
// distance between touch points after friction is applied_currPointsDistance = pointsDistance;
// _centerPoint - The point in the middle of two pointers_findCenterOfPoints(p,p2,_centerPoint);
// paning with two pointers pressed_currPanDist.x += _centerPoint.x - _currCenterPoint.x;
_currPanDist.y += _centerPoint.y - _currCenterPoint.y;
_equalizePoints(_currCenterPoint,_centerPoint);
_panOffset.x = _calculatePanOffset('x',zoomLevel);
_panOffset.y = _calculatePanOffset('y',zoomLevel);
_isZoomingIn = zoomLevel > _currZoomLevel;
_currZoomLevel = zoomLevel;
_applyCurrentZoomPan();
}
else{
// handle behaviour for one point (dragging or panning)if(!_direction){
return;
}
if(_isFirstMove){
_isFirstMove = false;
// subtract drag distance that was used during the detection directionif( Math.abs(delta.x) >= DIRECTION_CHECK_OFFSET){
delta.x -= _currentPoints[0].x - _startPoint.x;
}
if( Math.abs(delta.y) >= DIRECTION_CHECK_OFFSET){
delta.y -= _currentPoints[0].y - _startPoint.y;
}
}
_currPoint.x = p.x;
_currPoint.y = p.y;
// do nothing if pointers position hasn't changedif(delta.x === 0 && delta.y === 0){
return;
}
if(_direction === 'v' && _options.closeOnVerticalDrag){
if(!_canPan()){
_currPanDist.y += delta.y;
_panOffset.y += delta.y;
var opacityRatio = _calculateVerticalDragOpacityRatio();
_verticalDragInitiated = true;
_shout('onVerticalDrag',opacityRatio);
_applyBgOpacity(opacityRatio);
_applyCurrentZoomPan();
return;
}
}
_pushPosPoint(_getCurrentTime(),p.x,p.y);
_moved = true;
_currPanBounds = self.currItem.bounds;
var mainScrollChanged = _panOrMoveMainScroll('x',delta);
if(!mainScrollChanged){
_panOrMoveMainScroll('y',delta);
_roundPoint(_panOffset);
_applyCurrentZoomPan();
}
}
}
,// Pointerup/pointercancel/touchend/touchcancel/mouseup event handler_onDragRelease = function(e){
if(_features.isOldAndroid ){
if(_oldAndroidTouchEndTimeout && e.type === 'mouseup'){
return;
}
// on Android (v4.1,4.2,4.3 & possibly older)// ghost mousedown/up event isn't preventable via e.preventDefault,// which causes fake mousedown event// so we block mousedown/up for 600msif( e.type.indexOf('touch') > -1 ){
clearTimeout(_oldAndroidTouchEndTimeout);
_oldAndroidTouchEndTimeout = setTimeout(function(){
_oldAndroidTouchEndTimeout = 0;
}
,600);
}
}
_shout('pointerUp');
if(_preventDefaultEventBehaviour(e,false)){
e.preventDefault();
}
var releasePoint;
if(_pointerEventEnabled){
var pointerIndex = framework.arraySearch(_currPointers,e.pointerId,'id');
if(pointerIndex > -1){
releasePoint = _currPointers.splice(pointerIndex,1)[0];
if(navigator.pointerEnabled){
releasePoint.type = e.pointerType || 'mouse';
}
else{
var MSPOINTER_TYPES ={
4:'mouse',// event.MSPOINTER_TYPE_MOUSE2:'touch',// event.MSPOINTER_TYPE_TOUCH3:'pen' // event.MSPOINTER_TYPE_PEN}
;
releasePoint.type = MSPOINTER_TYPES[e.pointerType];
if(!releasePoint.type){
releasePoint.type = e.pointerType || 'mouse';
}
}
}
}
var touchList = _getTouchPoints(e),gestureType,numPoints = touchList.length;
if(e.type === 'mouseup'){
numPoints = 0;
}
// Do nothing if there were 3 touch points or moreif(numPoints === 2){
_currentPoints = null;
return true;
}
// if second pointer releasedif(numPoints === 1){
_equalizePoints(_startPoint,touchList[0]);
}
// pointer hasn't moved,send "tap release" pointif(numPoints === 0 && !_direction && !_mainScrollAnimating){
if(!releasePoint){
if(e.type === 'mouseup'){
releasePoint ={
x:e.pageX,y:e.pageY,type:'mouse'}
;
}
else if(e.changedTouches && e.changedTouches[0]){
releasePoint ={
x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY,type:'touch'}
;
}
}
_shout('touchRelease',e,releasePoint);
}
// Difference in time between releasing of two last touch points (zoom gesture)var releaseTimeDiff = -1;
// Gesture completed,no pointers leftif(numPoints === 0){
_isDragging = false;
framework.unbind(window,_upMoveEvents,self);
_stopDragUpdateLoop();
if(_isZooming){
// Two points released at the same timereleaseTimeDiff = 0;
}
else if(_lastReleaseTime !== -1){
releaseTimeDiff = _getCurrentTime() - _lastReleaseTime;
}
}
_lastReleaseTime = numPoints === 1 ? _getCurrentTime():-1;
if(releaseTimeDiff !== -1 && releaseTimeDiff < 150){
gestureType = 'zoom';
}
else{
gestureType = 'swipe';
}
if(_isZooming && numPoints < 2){
_isZooming = false;
// Only second point releasedif(numPoints === 1){
gestureType = 'zoomPointerUp';
}
_shout('zoomGestureEnded');
}
_currentPoints = null;
if(!_moved && !_zoomStarted && !_mainScrollAnimating && !_verticalDragInitiated){
// nothing to animatereturn;
}
_stopAllAnimations();
if(!_releaseAnimData){
_releaseAnimData = _initDragReleaseAnimationData();
}
_releaseAnimData.calculateSwipeSpeed('x');
if(_verticalDragInitiated){
var opacityRatio = _calculateVerticalDragOpacityRatio();
if(opacityRatio < _options.verticalDragRange){
self.close();
}
else{
var initalPanY = _panOffset.y,initialBgOpacity = _bgOpacity;
_animateProp('verticalDrag',0,1,300,framework.easing.cubic.out,function(now){
_panOffset.y = (self.currItem.initialPosition.y - initalPanY) * now + initalPanY;
_applyBgOpacity( (1 - initialBgOpacity) * now + initialBgOpacity );
_applyCurrentZoomPan();
}
);
_shout('onVerticalDrag',1);
}
return;
}
// main scrollif( (_mainScrollShifted || _mainScrollAnimating) && numPoints === 0){
var itemChanged = _finishSwipeMainScrollGesture(gestureType,_releaseAnimData);
if(itemChanged){
return;
}
gestureType = 'zoomPointerUp';
}
// prevent zoom/pan animation when main scroll animation runsif(_mainScrollAnimating){
return;
}
// Complete simple zoom gesture (reset zoom level if it's out of the bounds)if(gestureType !== 'swipe'){
_completeZoomGesture();
return;
}
// Complete pan gesture if main scroll is not shifted,and it's possible to pan current imageif(!_mainScrollShifted && _currZoomLevel > self.currItem.fitRatio){
_completePanGesture(_releaseAnimData);
}
}
,// Returns object with data about gesture// It's created only once and then reused_initDragReleaseAnimationData = function(){
// temp local varsvar lastFlickDuration,tempReleasePos;
// s = thisvar s ={
lastFlickOffset:{
}
,lastFlickDist:{
}
,lastFlickSpeed:{
}
,slowDownRatio:{
}
,slowDownRatioReverse:{
}
,speedDecelerationRatio:{
}
,speedDecelerationRatioAbs:{
}
,distanceOffset:{
}
,backAnimDestination:{
}
,backAnimStarted:{
}
,calculateSwipeSpeed:function(axis){
if( _posPoints.length > 1){
lastFlickDuration = _getCurrentTime() - _gestureCheckSpeedTime + 50;
tempReleasePos = _posPoints[_posPoints.length-2][axis];
}
else{
lastFlickDuration = _getCurrentTime() - _gestureStartTime;
// total gesture durationtempReleasePos = _startPoint[axis];
}
s.lastFlickOffset[axis] = _currPoint[axis] - tempReleasePos;
s.lastFlickDist[axis] = Math.abs(s.lastFlickOffset[axis]);
if(s.lastFlickDist[axis] > 20){
s.lastFlickSpeed[axis] = s.lastFlickOffset[axis] / lastFlickDuration;
}
else{
s.lastFlickSpeed[axis] = 0;
}
if( Math.abs(s.lastFlickSpeed[axis]) < 0.1 ){
s.lastFlickSpeed[axis] = 0;
}
s.slowDownRatio[axis] = 0.95;
s.slowDownRatioReverse[axis] = 1 - s.slowDownRatio[axis];
s.speedDecelerationRatio[axis] = 1;
}
,calculateOverBoundsAnimOffset:function(axis,speed){
if(!s.backAnimStarted[axis]){
if(_panOffset[axis] > _currPanBounds.min[axis]){
s.backAnimDestination[axis] = _currPanBounds.min[axis];
}
else if(_panOffset[axis] < _currPanBounds.max[axis]){
s.backAnimDestination[axis] = _currPanBounds.max[axis];
}
if(s.backAnimDestination[axis] !== undefined){
s.slowDownRatio[axis] = 0.7;
s.slowDownRatioReverse[axis] = 1 - s.slowDownRatio[axis];
if(s.speedDecelerationRatioAbs[axis] < 0.05){
s.lastFlickSpeed[axis] = 0;
s.backAnimStarted[axis] = true;
_animateProp('bounceZoomPan'+axis,_panOffset[axis],s.backAnimDestination[axis],speed || 300,framework.easing.sine.out,function(pos){
_panOffset[axis] = pos;
_applyCurrentZoomPan();
}
);
}
}
}
}
,// Reduces the speed by slowDownRatio (per 10ms)calculateAnimOffset:function(axis){
if(!s.backAnimStarted[axis]){
s.speedDecelerationRatio[axis] = s.speedDecelerationRatio[axis] * (s.slowDownRatio[axis] +s.slowDownRatioReverse[axis] -s.slowDownRatioReverse[axis] * s.timeDiff / 10);
s.speedDecelerationRatioAbs[axis] = Math.abs(s.lastFlickSpeed[axis] * s.speedDecelerationRatio[axis]);
s.distanceOffset[axis] = s.lastFlickSpeed[axis] * s.speedDecelerationRatio[axis] * s.timeDiff;
_panOffset[axis] += s.distanceOffset[axis];
}
}
,panAnimLoop:function(){
if ( _animations.zoomPan ){
_animations.zoomPan.raf = _requestAF(s.panAnimLoop);
s.now = _getCurrentTime();
s.timeDiff = s.now - s.lastNow;
s.lastNow = s.now;
s.calculateAnimOffset('x');
s.calculateAnimOffset('y');
_applyCurrentZoomPan();
s.calculateOverBoundsAnimOffset('x');
s.calculateOverBoundsAnimOffset('y');
if (s.speedDecelerationRatioAbs.x < 0.05 && s.speedDecelerationRatioAbs.y < 0.05){
// round pan position_panOffset.x = Math.round(_panOffset.x);
_panOffset.y = Math.round(_panOffset.y);
_applyCurrentZoomPan();
_stopAnimation('zoomPan');
return;
}
}
}
}
;
return s;
}
,_completePanGesture = function(animData){
// calculate swipe speed for Y axis (paanning)animData.calculateSwipeSpeed('y');
_currPanBounds = self.currItem.bounds;
animData.backAnimDestination ={
}
;
animData.backAnimStarted ={
}
;
// Avoid acceleration animation if speed is too lowif(Math.abs(animData.lastFlickSpeed.x) <= 0.05 && Math.abs(animData.lastFlickSpeed.y) <= 0.05 ){
animData.speedDecelerationRatioAbs.x = animData.speedDecelerationRatioAbs.y = 0;
// Run pan drag release animation. E.g. if you drag image and release finger without momentum.animData.calculateOverBoundsAnimOffset('x');
animData.calculateOverBoundsAnimOffset('y');
return true;
}
// Animation loop that controls the acceleration after pan gesture ends_registerStartAnimation('zoomPan');
animData.lastNow = _getCurrentTime();
animData.panAnimLoop();
}
,_finishSwipeMainScrollGesture = function(gestureType,_releaseAnimData){
var itemChanged;
if(!_mainScrollAnimating){
_currZoomedItemIndex = _currentItemIndex;
}
var itemsDiff;
if(gestureType === 'swipe'){
var totalShiftDist = _currPoint.x - _startPoint.x,isFastLastFlick = _releaseAnimData.lastFlickDist.x < 10;
// if container is shifted for more than MIN_SWIPE_DISTANCE,// and last flick gesture was in right directionif(totalShiftDist > MIN_SWIPE_DISTANCE &&(isFastLastFlick || _releaseAnimData.lastFlickOffset.x > 20) ){
// go to prev itemitemsDiff = -1;
}
else if(totalShiftDist < -MIN_SWIPE_DISTANCE &&(isFastLastFlick || _releaseAnimData.lastFlickOffset.x < -20) ){
// go to next itemitemsDiff = 1;
}
}
var nextCircle;
if(itemsDiff){
_currentItemIndex += itemsDiff;
if(_currentItemIndex < 0){
_currentItemIndex = _options.loop ? _getNumItems()-1:0;
nextCircle = true;
}
else if(_currentItemIndex >= _getNumItems()){
_currentItemIndex = _options.loop ? 0:_getNumItems()-1;
nextCircle = true;
}
if(!nextCircle || _options.loop){
_indexDiff += itemsDiff;
_currPositionIndex -= itemsDiff;
itemChanged = true;
}
}
var animateToX = _slideSize.x * _currPositionIndex;
var animateToDist = Math.abs( animateToX - _mainScrollPos.x );
var finishAnimDuration;
if(!itemChanged && animateToX > _mainScrollPos.x !== _releaseAnimData.lastFlickSpeed.x > 0){
// "return to current" duration,e.g. when dragging from slide 0 to -1finishAnimDuration = 333;
}
else{
finishAnimDuration = Math.abs(_releaseAnimData.lastFlickSpeed.x) > 0 ?animateToDist / Math.abs(_releaseAnimData.lastFlickSpeed.x):333;
finishAnimDuration = Math.min(finishAnimDuration,400);
finishAnimDuration = Math.max(finishAnimDuration,250);
}
if(_currZoomedItemIndex === _currentItemIndex){
itemChanged = false;
}
_mainScrollAnimating = true;
_shout('mainScrollAnimStart');
_animateProp('mainScroll',_mainScrollPos.x,animateToX,finishAnimDuration,framework.easing.cubic.out,_moveMainScroll,function(){
_stopAllAnimations();
_mainScrollAnimating = false;
_currZoomedItemIndex = -1;
if(itemChanged || _currZoomedItemIndex !== _currentItemIndex){
self.updateCurrItem();
}
_shout('mainScrollAnimComplete');
}
);
if(itemChanged){
self.updateCurrItem(true);
}
return itemChanged;
}
,_calculateZoomLevel = function(touchesDistance){
return 1 / _startPointsDistance * touchesDistance * _startZoomLevel;
}
,// Resets zoom if it's out of bounds_completeZoomGesture = function(){
var destZoomLevel = _currZoomLevel,minZoomLevel = _getMinZoomLevel(),maxZoomLevel = _getMaxZoomLevel();
if ( _currZoomLevel < minZoomLevel ){
destZoomLevel = minZoomLevel;
}
else if ( _currZoomLevel > maxZoomLevel ){
destZoomLevel = maxZoomLevel;
}
var destOpacity = 1,onUpdate,initialOpacity = _bgOpacity;
if(_opacityChanged && !_isZoomingIn && !_wasOverInitialZoom && _currZoomLevel < minZoomLevel){
//_closedByScroll = true;
self.close();
return true;
}
if(_opacityChanged){
onUpdate = function(now){
_applyBgOpacity( (destOpacity - initialOpacity) * now + initialOpacity );
}
;
}
self.zoomTo(destZoomLevel,0,200,framework.easing.cubic.out,onUpdate);
return true;
}
;
_registerModule('Gestures',{
publicMethods:{
initGestures:function(){
// helper function that builds touch/pointer/mouse eventsvar addEventNames = function(pref,down,move,up,cancel){
_dragStartEvent = pref + down;
_dragMoveEvent = pref + move;
_dragEndEvent = pref + up;
if(cancel){
_dragCancelEvent = pref + cancel;
}
else{
_dragCancelEvent = '';
}
}
;
_pointerEventEnabled = _features.pointerEvent;
if(_pointerEventEnabled && _features.touch){
// we don't need touch events,if browser supports pointer events_features.touch = false;
}
if(_pointerEventEnabled){
if(navigator.pointerEnabled){
addEventNames('pointer','down','move','up','cancel');
}
else{
// IE10 pointer events are case-sensitiveaddEventNames('MSPointer','Down','Move','Up','Cancel');
}
}
else if(_features.touch){
addEventNames('touch','start','move','end','cancel');
_likelyTouchDevice = true;
}
else{
addEventNames('mouse','down','move','up');
}
_upMoveEvents = _dragMoveEvent + ' ' + _dragEndEvent + ' ' + _dragCancelEvent;
_downEvents = _dragStartEvent;
if(_pointerEventEnabled && !_likelyTouchDevice){
_likelyTouchDevice = (navigator.maxTouchPoints > 1) || (navigator.msMaxTouchPoints > 1);
}
// make variable publicself.likelyTouchDevice = _likelyTouchDevice;
_globalEventHandlers[_dragStartEvent] = _onDragStart;
_globalEventHandlers[_dragMoveEvent] = _onDragMove;
_globalEventHandlers[_dragEndEvent] = _onDragRelease;
// the Krakenif(_dragCancelEvent){
_globalEventHandlers[_dragCancelEvent] = _globalEventHandlers[_dragEndEvent];
}
// Bind mouse events on device with detected hardware touch support,in case it supports multiple types of input.if(_features.touch){
_downEvents += ' mousedown';
_upMoveEvents += ' mousemove mouseup';
_globalEventHandlers.mousedown = _globalEventHandlers[_dragStartEvent];
_globalEventHandlers.mousemove = _globalEventHandlers[_dragMoveEvent];
_globalEventHandlers.mouseup = _globalEventHandlers[_dragEndEvent];
}
if(!_likelyTouchDevice){
// don't allow pan to next slide from zoomed state on Desktop_options.allowPanToNext = false;
}
}
}
}
);
/*>>gestures*/
/*>>show-hide-transition*/
/** * show-hide-transition.js:* * Manages initial opening or closing transition. * * If you're not planning to use transition for gallery at all,* you may set options hideAnimationDuration and showAnimationDuration to 0,* and just delete startAnimation function. * */
var _showOrHideTimeout,_showOrHide = function(item,img,out,completeFn){
if(_showOrHideTimeout){
clearTimeout(_showOrHideTimeout);
}
_initialZoomRunning = true;
_initialContentSet = true;
// dimensions of small thumbnail{
x:,y:,w:}
.// Height is optional,as calculated based on large image.var thumbBounds;
if(item.initialLayout){
thumbBounds = item.initialLayout;
item.initialLayout = null;
}
else{
thumbBounds = _options.getThumbBoundsFn && _options.getThumbBoundsFn(_currentItemIndex);
}
var duration = out ? _options.hideAnimationDuration:_options.showAnimationDuration;
var onComplete = function(){
_stopAnimation('initialZoom');
if(!out){
_applyBgOpacity(1);
if(img){
img.style.display = 'block';
}
framework.addClass(template,'pswp--animated-in');
_shout('initialZoom' + (out ? 'OutEnd':'InEnd'));
}
else{
self.template.removeAttribute('style');
self.bg.removeAttribute('style');
}
if(completeFn){
completeFn();
}
_initialZoomRunning = false;
}
;
// if bounds aren't provided,just open gallery without animationif(!duration || !thumbBounds || thumbBounds.x === undefined){
_shout('initialZoom' + (out ? 'Out':'In') );
_currZoomLevel = item.initialZoomLevel;
_equalizePoints(_panOffset,item.initialPosition );
_applyCurrentZoomPan();
template.style.opacity = out ? 0:1;
_applyBgOpacity(1);
if(duration){
setTimeout(function(){
onComplete();
}
,duration);
}
else{
onComplete();
}
return;
}
var startAnimation = function(){
var closeWithRaf = _closedByScroll,fadeEverything = !self.currItem.src || self.currItem.loadError || _options.showHideOpacity;
// apply hw-acceleration to imageif(item.miniImg){
item.miniImg.style.webkitBackfaceVisibility = 'hidden';
}
if(!out){
_currZoomLevel = thumbBounds.w / item.w;
_panOffset.x = thumbBounds.x;
_panOffset.y = thumbBounds.y - _initalWindowScrollY;
self[fadeEverything ? 'template':'bg'].style.opacity = 0.001;
_applyCurrentZoomPan();
}
_registerStartAnimation('initialZoom');
if(out && !closeWithRaf){
framework.removeClass(template,'pswp--animated-in');
}
if(fadeEverything){
if(out){
framework[ (closeWithRaf ? 'remove':'add') + 'Class' ](template,'pswp--animate_opacity');
}
else{
setTimeout(function(){
framework.addClass(template,'pswp--animate_opacity');
}
,30);
}
}
_showOrHideTimeout = setTimeout(function(){
_shout('initialZoom' + (out ? 'Out':'In') );
if(!out){
// "in" animation always uses CSS transitions (instead of rAF).// CSS transition work faster here,// as developer may also want to animate other things,// like ui on top of sliding area,which can be animated just via CSS_currZoomLevel = item.initialZoomLevel;
_equalizePoints(_panOffset,item.initialPosition );
_applyCurrentZoomPan();
_applyBgOpacity(1);
if(fadeEverything){
template.style.opacity = 1;
}
else{
_applyBgOpacity(1);
}
_showOrHideTimeout = setTimeout(onComplete,duration + 20);
}
else{
// "out" animation uses rAF only when PhotoSwipe is closed by browser scroll,to recalculate positionvar destZoomLevel = thumbBounds.w / item.w,initialPanOffset ={
x:_panOffset.x,y:_panOffset.y}
,initialZoomLevel = _currZoomLevel,initalBgOpacity = _bgOpacity,onUpdate = function(now){
if(now === 1){
_currZoomLevel = destZoomLevel;
_panOffset.x = thumbBounds.x;
_panOffset.y = thumbBounds.y - _currentWindowScrollY;
}
else{
_currZoomLevel = (destZoomLevel - initialZoomLevel) * now + initialZoomLevel;
_panOffset.x = (thumbBounds.x - initialPanOffset.x) * now + initialPanOffset.x;
_panOffset.y = (thumbBounds.y - _currentWindowScrollY - initialPanOffset.y) * now + initialPanOffset.y;
}
_applyCurrentZoomPan();
if(fadeEverything){
template.style.opacity = 1 - now;
}
else{
_applyBgOpacity( initalBgOpacity - now * initalBgOpacity );
}
}
;
if(closeWithRaf){
_animateProp('initialZoom',0,1,duration,framework.easing.cubic.out,onUpdate,onComplete);
}
else{
onUpdate(1);
_showOrHideTimeout = setTimeout(onComplete,duration + 20);
}
}
}
,out ? 25:90);
// Main purpose of this delay is to give browser time to paint and// create composite layers of PhotoSwipe UI parts (background,controls,caption,arrows).// Which avoids lag at the beginning of scale transition.}
;
startAnimation();
}
;
/*>>show-hide-transition*/
/*>>items-controller*/
/**** Controller manages gallery items,their dimensions,and their content.**/
var _items,_tempPanAreaSize ={
}
,_imagesToAppendPool = [],_initialContentSet,_initialZoomRunning,_controllerDefaultOptions ={
index:0,errorMsg:'<div class="pswp__error-msg"><a href="%url%" target="_blank">The image</a> could not be loaded.</div>',forceProgressiveLoading:false,// TODOpreload:[1,1],getNumItemsFn:function(){
return _items.length;
}
}
;
var _getItemAt,_getNumItems,_initialIsLoop,_getZeroBounds = function(){
return{
center:{
x:0,y:0}
,max:{
x:0,y:0}
,min:{
x:0,y:0}
}
;
}
,_calculateSingleItemPanBounds = function(item,realPanElementW,realPanElementH ){
var bounds = item.bounds;
// position of element when it's centeredbounds.center.x = Math.round((_tempPanAreaSize.x - realPanElementW) / 2);
bounds.center.y = Math.round((_tempPanAreaSize.y - realPanElementH) / 2) + item.vGap.top;
// maximum pan positionbounds.max.x = (realPanElementW > _tempPanAreaSize.x) ?Math.round(_tempPanAreaSize.x - realPanElementW):bounds.center.x;
bounds.max.y = (realPanElementH > _tempPanAreaSize.y) ?Math.round(_tempPanAreaSize.y - realPanElementH) + item.vGap.top:bounds.center.y;
// minimum pan positionbounds.min.x = (realPanElementW > _tempPanAreaSize.x) ? 0:bounds.center.x;
bounds.min.y = (realPanElementH > _tempPanAreaSize.y) ? item.vGap.top:bounds.center.y;
}
,_calculateItemSize = function(item,viewportSize,zoomLevel){
if (item.src && !item.loadError){
var isInitial = !zoomLevel;
if(isInitial){
if(!item.vGap){
item.vGap ={
top:0,bottom:0}
;
}
// allows overriding vertical margin for individual items_shout('parseVerticalMargin',item);
}
_tempPanAreaSize.x = viewportSize.x;
_tempPanAreaSize.y = viewportSize.y - item.vGap.top - item.vGap.bottom;
if (isInitial){
var hRatio = _tempPanAreaSize.x / item.w;
var vRatio = _tempPanAreaSize.y / item.h;
item.fitRatio = hRatio < vRatio ? hRatio:vRatio;
//item.fillRatio = hRatio > vRatio ? hRatio:vRatio;
var scaleMode = _options.scaleMode;
if (scaleMode === 'orig'){
zoomLevel = 1;
}
else if (scaleMode === 'fit'){
zoomLevel = item.fitRatio;
}
if (zoomLevel > 1){
zoomLevel = 1;
}
item.initialZoomLevel = zoomLevel;
if(!item.bounds){
// reuse bounds objectitem.bounds = _getZeroBounds();
}
}
if(!zoomLevel){
return;
}
_calculateSingleItemPanBounds(item,item.w * zoomLevel,item.h * zoomLevel);
if (isInitial && zoomLevel === item.initialZoomLevel){
item.initialPosition = item.bounds.center;
}
return item.bounds;
}
else{
item.w = item.h = 0;
item.initialZoomLevel = item.fitRatio = 1;
item.bounds = _getZeroBounds();
item.initialPosition = item.bounds.center;
// if it's not image,we return zero bounds (content is not zoomable)return item.bounds;
}
}
,_appendImage = function(index,item,baseDiv,img,preventAnimation,keepPlaceholder){
if(item.loadError){
return;
}
if(img){
item.imageAppended = true;
_setImageSize(item,img,(item === self.currItem && _renderMaxResolution) );
baseDiv.appendChild(img);
if(keepPlaceholder){
setTimeout(function(){
if(item && item.loaded && item.placeholder){
item.placeholder.style.display = 'none';
item.placeholder = null;
}
}
,500);
}
}
}
,_preloadImage = function(item){
item.loading = true;
item.loaded = false;
var img = item.img = framework.createEl('pswp__img','img');
var onComplete = function(){
item.loading = false;
item.loaded = true;
if(item.loadComplete){
item.loadComplete(item);
}
else{
item.img = null;
// no need to store image object}
img.onload = img.onerror = null;
img = null;
}
;
img.onload = onComplete;
img.onerror = function(){
item.loadError = true;
onComplete();
}
;
img.src = item.src;
// + '?a=' + Math.random();
return img;
}
,_checkForError = function(item,cleanUp){
if(item.src && item.loadError && item.container){
if(cleanUp){
item.container.innerHTML = '';
}
item.container.innerHTML = _options.errorMsg.replace('%url%',item.src );
return true;
}
}
,_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){
var poolItem;
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,false,poolItem.clearPlaceholder);
}
}
_imagesToAppendPool = [];
}
}
;
_registerModule('Controller',{
publicMethods:{
lazyLoadItem:function(index){
index = _getLoopedId(index);
var item = _getItemAt(index);
if(!item || ((item.loaded || item.loading) && !_itemsNeedUpdate)){
return;
}
_shout('gettingData',index,item);
if (!item.src){
return;
}
_preloadImage(item);
}
,initController:function(){
framework.extend(_options,_controllerDefaultOptions,true);
self.items = _items = items;
_getItemAt = self.getItemAt;
_getNumItems = _options.getNumItemsFn;
//self.getNumItems;
_initialIsLoop = _options.loop;
if(_getNumItems() < 3){
_options.loop = false;
// disable loop if less then 3 items}
_listen('beforeChange',function(diff){
var p = _options.preload,isNext = diff === null ? true:(diff >= 0),preloadBefore = Math.min(p[0],_getNumItems() ),preloadAfter = Math.min(p[1],_getNumItems() ),i;
for(i = 1;
i <= (isNext ? preloadAfter:preloadBefore);
i++){
self.lazyLoadItem(_currentItemIndex+i);
}
for(i = 1;
i <= (isNext ? preloadBefore:preloadAfter);
i++){
self.lazyLoadItem(_currentItemIndex-i);
}
}
);
_listen('initialLayout',function(){
self.currItem.initialLayout = _options.getThumbBoundsFn && _options.getThumbBoundsFn(_currentItemIndex);
}
);
_listen('mainScrollAnimComplete',_appendImagesPool);
_listen('initialZoomInEnd',_appendImagesPool);
_listen('destroy',function(){
var item;
for(var i = 0;
i < _items.length;
i++){
item = _items[i];
// remove reference to DOM elements,for GCif(item.container){
item.container = null;
}
if(item.placeholder){
item.placeholder = null;
}
if(item.img){
item.img = null;
}
if(item.preloader){
item.preloader = null;
}
if(item.loadError){
item.loaded = item.loadError = false;
}
}
_imagesToAppendPool = null;
}
);
}
,getItemAt:function(index){
if (index >= 0){
return _items[index] !== undefined ? _items[index]:false;
}
return false;
}
,allowProgressiveImg:function(){
// 1. Progressive image loading isn't working on webkit/blink// when hw-acceleration (e.g. translateZ) is applied to IMG element.// That's why in PhotoSwipe parent element gets zoom transform,not image itself.//// 2. Progressive image loading sometimes blinks in webkit/blink when applying animation to parent element.// That's why it's disabled on touch devices (mainly because of swipe transition)//// 3. Progressive image loading sometimes doesn't work in IE (up to 11).// Don't allow progressive loading on non-large touch devicesreturn _options.forceProgressiveLoading || !_likelyTouchDevice || _options.mouseUsed || screen.width > 1200;
// 1200 - to eliminate touch devices with large screen (like Chromebook Pixel)}
,setContent:function(holder,index){
if(_options.loop){
index = _getLoopedId(index);
}
var prevItem = self.getItemAt(holder.index);
if(prevItem){
prevItem.container = null;
}
var item = self.getItemAt(index),img;
if(!item){
holder.el.innerHTML = '';
return;
}
// allow to override data_shout('gettingData',index,item);
holder.index = index;
holder.item = item;
// base container DIV is created only once for each of 3 holdersvar baseDiv = item.container = framework.createEl('pswp__zoom-wrap');
if(!item.src && item.html){
if(item.html.tagName){
baseDiv.appendChild(item.html);
}
else{
baseDiv.innerHTML = item.html;
}
}
_checkForError(item);
_calculateItemSize(item,_viewportSize);
if(item.src && !item.loadError && !item.loaded){
item.loadComplete = function(item){
// gallery closed before image finished loadingif(!_isOpen){
return;
}
// check if holder hasn't changed while image was loadingif(holder && holder.index === index ){
if( _checkForError(item,true) ){
item.loadComplete = item.img = null;
_calculateItemSize(item,_viewportSize);
_applyZoomPanToItem(item);
if(holder.index === _currentItemIndex){
// recalculate dimensionsself.updateCurrZoomItem();
}
return;
}
if( !item.imageAppended ){
if(_features.transform && (_mainScrollAnimating || _initialZoomRunning) ){
_imagesToAppendPool.push({
item:item,baseDiv:baseDiv,img:item.img,index:index,holder:holder,clearPlaceholder:true}
);
}
else{
_appendImage(index,item,baseDiv,item.img,_mainScrollAnimating || _initialZoomRunning,true);
}
}
else{
// remove preloader & mini-imgif(!_initialZoomRunning && item.placeholder){
item.placeholder.style.display = 'none';
item.placeholder = null;
}
}
}
item.loadComplete = null;
item.img = null;
// no need to store image element after it's added_shout('imageLoadComplete',index,item);
}
;
if(framework.features.transform){
var placeholderClassName = 'pswp__img pswp__img--placeholder';
placeholderClassName += (item.msrc ? '':' pswp__img--placeholder--blank');
var placeholder = framework.createEl(placeholderClassName,item.msrc ? 'img':'');
if(item.msrc){
placeholder.src = item.msrc;
}
_setImageSize(item,placeholder);
baseDiv.appendChild(placeholder);
item.placeholder = placeholder;
}
if(!item.loading){
_preloadImage(item);
}
if( self.allowProgressiveImg() ){
// just append imageif(!_initialContentSet && _features.transform){
_imagesToAppendPool.push({
item:item,baseDiv:baseDiv,img:item.img,index:index,holder:holder}
);
}
else{
_appendImage(index,item,baseDiv,item.img,true,true);
}
}
}
else if(item.src && !item.loadError){
// image object is created every time,due to bugs of image loading & delay when switching imagesimg = framework.createEl('pswp__img','img');
img.style.opacity = 1;
img.src = item.src;
_setImageSize(item,img);
_appendImage(index,item,baseDiv,img,true);
}
if(!_initialContentSet && index === _currentItemIndex){
_currZoomElementStyle = baseDiv.style;
_showOrHide(item,(img ||item.img) );
}
else{
_applyZoomPanToItem(item);
}
holder.el.innerHTML = '';
holder.el.appendChild(baseDiv);
}
,cleanSlide:function( item ){
if(item.img ){
item.img.onload = item.img.onerror = null;
}
item.loaded = item.loading = item.img = item.imageAppended = false;
}
}
}
);
/*>>items-controller*/
/*>>tap*/
/** * tap.js:* * Displatches tap and double-tap events. * */
var tapTimer,tapReleasePoint ={
}
,_dispatchTapEvent = function(origEvent,releasePoint,pointerType){
var e = document.createEvent( 'CustomEvent' ),eDetail ={
origEvent:origEvent,target:origEvent.target,releasePoint:releasePoint,pointerType:pointerType || 'touch'}
;
e.initCustomEvent( 'pswpTap',true,true,eDetail );
origEvent.target.dispatchEvent(e);
}
;
_registerModule('Tap',{
publicMethods:{
initTap:function(){
_listen('firstTouchStart',self.onTapStart);
_listen('touchRelease',self.onTapRelease);
_listen('destroy',function(){
tapReleasePoint ={
}
;
tapTimer = null;
}
);
}
,onTapStart:function(touchList){
if(touchList.length > 1){
clearTimeout(tapTimer);
tapTimer = null;
}
}
,onTapRelease:function(e,releasePoint){
if(!releasePoint){
return;
}
if(!_moved && !_isMultitouch && !_numAnimations){
var p0 = releasePoint;
if(tapTimer){
clearTimeout(tapTimer);
tapTimer = null;
// Check if taped on the same placeif ( _isNearbyPoints(p0,tapReleasePoint) ){
_shout('doubleTap',p0);
return;
}
}
if(releasePoint.type === 'mouse'){
_dispatchTapEvent(e,releasePoint,'mouse');
return;
}
var clickedTagName = e.target.tagName.toUpperCase();
// avoid double tap delay on buttons and elements that have class pswp__single-tapif(clickedTagName === 'BUTTON' || framework.hasClass(e.target,'pswp__single-tap') ){
_dispatchTapEvent(e,releasePoint);
return;
}
_equalizePoints(tapReleasePoint,p0);
tapTimer = setTimeout(function(){
_dispatchTapEvent(e,releasePoint);
tapTimer = null;
}
,300);
}
}
}
}
);
/*>>tap*/
/*>>desktop-zoom*/
/** * * desktop-zoom.js:* * - Binds mousewheel event for paning zoomed image. * - Manages "dragging","zoomed-in","zoom-out" classes. * (which are used for cursors and zoom icon) * - Adds toggleDesktopZoom function. * */
var _wheelDelta;
_registerModule('DesktopZoom',{
publicMethods:{
initDesktopZoom:function(){
if(_oldIE){
// no zoom for old IE (<=8)return;
}
if(_likelyTouchDevice){
// if detected hardware touch support,we wait until mouse is used,// and only then apply desktop-zoom features_listen('mouseUsed',function(){
self.setupDesktopZoom();
}
);
}
else{
self.setupDesktopZoom(true);
}
}
,setupDesktopZoom:function(onInit){
_wheelDelta ={
}
;
var events = 'wheel mousewheel DOMMouseScroll';
_listen('bindEvents',function(){
framework.bind(template,events,self.handleMouseWheel);
}
);
_listen('unbindEvents',function(){
if(_wheelDelta){
framework.unbind(template,events,self.handleMouseWheel);
}
}
);
self.mouseZoomedIn = false;
var hasDraggingClass,updateZoomable = function(){
if(self.mouseZoomedIn){
framework.removeClass(template,'pswp--zoomed-in');
self.mouseZoomedIn = false;
}
if(_currZoomLevel < 1){
framework.addClass(template,'pswp--zoom-allowed');
}
else{
framework.removeClass(template,'pswp--zoom-allowed');
}
removeDraggingClass();
}
,removeDraggingClass = function(){
if(hasDraggingClass){
framework.removeClass(template,'pswp--dragging');
hasDraggingClass = false;
}
}
;
_listen('resize',updateZoomable);
_listen('afterChange',updateZoomable);
_listen('pointerDown',function(){
if(self.mouseZoomedIn){
hasDraggingClass = true;
framework.addClass(template,'pswp--dragging');
}
}
);
_listen('pointerUp',removeDraggingClass);
if(!onInit){
updateZoomable();
}
}
,handleMouseWheel:function(e){
if(_currZoomLevel <= self.currItem.fitRatio){
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;
}
// allow just one event to firee.stopPropagation();
// https://developer.mozilla.org/en-US/docs/Web/Events/wheel_wheelDelta.x = 0;
if('deltaX' in e){
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{
_wheelDelta.y = -0.16 * e.wheelDelta;
}
}
else if('detail' in e){
_wheelDelta.y = e.detail;
}
else{
return;
}
_calculatePanBounds(_currZoomLevel,true);
var newPanX = _panOffset.x - _wheelDelta.x,newPanY = _panOffset.y - _wheelDelta.y;
// only prevent scrolling in nonmodal mode when not at edgesif (_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 + _offset.x,y:_viewportSize.y/2 + _offset.y}
;
var doubleTapZoomLevel = _options.getDoubleTapZoom(true,self.currItem);
var zoomOut = _currZoomLevel === doubleTapZoomLevel;
self.mouseZoomedIn = !zoomOut;
self.zoomTo(zoomOut ? self.currItem.initialZoomLevel:doubleTapZoomLevel,centerPoint,333);
framework[ (!zoomOut ? 'add':'remove') + 'Class'](template,'pswp--zoomed-in');
}
}
}
);
/*>>desktop-zoom*/
/*>>history*/
/** * * history.js:* * - Back button to close gallery. * * - Unique URL for each slide:example.com/&pid=1&gid=3 * (where PID is picture index,and GID and gallery index) * * - Switch URL when slides change. * */
var _historyDefaultOptions ={
history:true,galleryUID:1}
;
var _historyUpdateTimeout,_hashChangeTimeout,_hashAnimCheckTimeout,_hashChangedByScript,_hashChangedByHistory,_hashReseted,_initialHash,_historyChanged,_closedFromURL,_urlChangedOnce,_windowLoc,_supportsPushState,_getHash = function(){
return _windowLoc.hash.substring(1);
}
,_cleanHistoryTimeouts = function(){
if(_historyUpdateTimeout){
clearTimeout(_historyUpdateTimeout);
}
if(_hashAnimCheckTimeout){
clearTimeout(_hashAnimCheckTimeout);
}
}
,// pid - Picture index// gid - Gallery index_parseItemIndexFromURL = function(){
var hash = _getHash(),params ={
}
;
if(hash.length < 5){
// pid=1return params;
}
var i,vars = hash.split('&');
for (i = 0;
i < vars.length;
i++){
if(!vars[i]){
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2){
continue;
}
params[pair[0]] = pair[1];
}
if(_options.galleryPIDs){
// detect custom pid in hash and search for it among the items collectionvar searchfor = params.pid;
params.pid = 0;
// if custom pid cannot be found,fallback to the first itemfor(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;
}
return params;
}
,_updateHash = function(){
if(_hashAnimCheckTimeout){
clearTimeout(_hashAnimCheckTimeout);
}
if(_numAnimations || _isDragging){
// changing browser URL forces layout/paint in some browsers,which causes noticable lag during animation// that's why we update hash only when no animations running_hashAnimCheckTimeout = setTimeout(_updateHash,500);
return;
}
if(_hashChangedByScript){
clearTimeout(_hashChangeTimeout);
}
else{
_hashChangedByScript = true;
}
var pid = (_currentItemIndex + 1);
var item = _getItemAt( _currentItemIndex );
if(item.hasOwnProperty('pid')){
// carry forward any custom pid assigned to the itempid = item.pid;
}
var newHash = _initialHash + '&' + 'gid=' + _options.galleryUID + '&' + 'pid=' + pid;
if(!_historyChanged){
if(_windowLoc.hash.indexOf(newHash) === -1){
_urlChangedOnce = true;
}
// first time - add new hisory record,then just replace}
var newURL = _windowLoc.href.split('#')[0] + '#' + newHash;
if( _supportsPushState ){
if('#' + newHash !== window.location.hash){
history[_historyChanged ? 'replaceState':'pushState']('',document.title,newURL);
}
}
else{
if(_historyChanged){
_windowLoc.replace( newURL );
}
else{
_windowLoc.hash = newHash;
}
}
_historyChanged = true;
_hashChangeTimeout = setTimeout(function(){
_hashChangedByScript = false;
}
,60);
}
;
_registerModule('History',{
publicMethods:{
initHistory:function(){
framework.extend(_options,_historyDefaultOptions,true);
if( !_options.history ){
return;
}
_windowLoc = window.location;
_urlChangedOnce = false;
_closedFromURL = false;
_historyChanged = false;
_initialHash = _getHash();
_supportsPushState = ('pushState' in history);
if(_initialHash.indexOf('gid=') > -1){
_initialHash = _initialHash.split('&gid=')[0];
_initialHash = _initialHash.split('?gid=')[0];
}
_listen('afterChange',self.updateURL);
_listen('unbindEvents',function(){
framework.unbind(window,'hashchange',self.onHashChange);
}
);
var returnToOriginal = function(){
_hashReseted = true;
if(!_closedFromURL){
if(_urlChangedOnce){
history.back();
}
else{
if(_initialHash){
_windowLoc.hash = _initialHash;
}
else{
if (_supportsPushState){
// remove hash from url without refreshing it or scrolling to tophistory.pushState('',document.title,_windowLoc.pathname + _windowLoc.search );
}
else{
_windowLoc.hash = '';
}
}
}
}
_cleanHistoryTimeouts();
}
;
_listen('unbindEvents',function(){
if(_closedByScroll){
// if PhotoSwipe is closed by scroll,we go "back" before the closing animation starts// this is done to keep the scroll positionreturnToOriginal();
}
}
);
_listen('destroy',function(){
if(!_hashReseted){
returnToOriginal();
}
}
);
_listen('firstUpdate',function(){
_currentItemIndex = _parseItemIndexFromURL().pid;
}
);
var index = _initialHash.indexOf('pid=');
if(index > -1){
_initialHash = _initialHash.substring(0,index);
if(_initialHash.slice(-1) === '&'){
_initialHash = _initialHash.slice(0,-1);
}
}
setTimeout(function(){
if(_isOpen){
// hasn't destroyed yetframework.bind(window,'hashchange',self.onHashChange);
}
}
,40);
}
,onHashChange:function(){
if(_getHash() === _initialHash){
_closedFromURL = true;
self.close();
return;
}
if(!_hashChangedByScript){
_hashChangedByHistory = true;
self.goTo( _parseItemIndexFromURL().pid );
_hashChangedByHistory = false;
}
}
,updateURL:function(){
// Delay the update of URL,to avoid lag during transition,// and to not to trigger actions like "refresh page sound" or "blinking favicon" to often_cleanHistoryTimeouts();
if(_hashChangedByHistory){
return;
}
if(!_historyChanged){
_updateHash();
// first time}
else{
_historyUpdateTimeout = setTimeout(_updateHash,800);
}
}
}
}
);
/*>>history*/
framework.extend(self,publicMethods);
}
;
return PhotoSwipe;
}
);
CSS代码(photoswipe.css):
/* pswp = photoswipe */
.pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;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 *{-webkit-box-sizing:border-box;box-sizing:border-box;}
.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);}
.pswp--open{display:block;}
.pswp--zoom-allowed .pswp__img{/* autoprefixer:off */
cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in;}
.pswp--zoomed-in .pswp__img{/* autoprefixer:off */
cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}
.pswp--dragging .pswp__img{/* autoprefixer:off */
cursor:-webkit-grabbing;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;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-backface-visibility:hidden;will-change:opacity;}
.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute;left:0;right:0;top:0;bottom:0;}
/* 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:transparent;-webkit-touch-callout:none;}
.pswp__zoom-wrap{position:absolute;width:100%;-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{-webkit-transition:none;transition:none;}
.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden;}
.pswp__item{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;}
.pswp__img{position:absolute;width:auto;height:auto;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 imagelarge image loads on top of it*/
.pswp__img--placeholder--blank{background:#222;}
.pswp--ie .pswp__img{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;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#CCC;}
.pswp__error-msg a{color:#CCC;text-decoration:underline;}
CSS代码(site.css):
/* Demo site CSS. Not mobile first,not semantic,not optimized,made for 20 minutes,mess */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,fieldset,legend,label,table,header,footer,nav,section,figure{margin:0;padding:0;}
figure{display:block;}
html{/*overflow-y:scroll;*/
}
a{color:#3169B3;}
a:hover{color:#C00;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{font-family:"myriad-pro","Myriad Pro","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:26px;color:#282B30;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga","kern";}
/*code{background:#F8F8F8;padding:.1em .4em;color:#c82829;font-size:14px;}
*/
code,pre{font-family:Menlo,Monaco,monospace;font-size:12px;line-height:1.45;color:#333;tab-size:4;}
pre{padding:0;margin:0;overflow:auto;word-wrap:normal;text-rendering:auto;-webkit-font-smoothing:auto;}
code{padding:0;padding:3px 5px;margin:0;background:#f2f2f2;border-radius:2px;}
pre code{background:none;padding:0;border-radius:0;}
h3 code{font-size:22px;font-weight:normal;padding:6px 10px;}
h3 code.default{font-size:12px;padding:0;background:none;opacity:0.7;}
.docs p{margin:0;padding-bottom:12px;padding-top:12px;}
.docs h1{margin-bottom:32px;}
.docs h1 a{text-decoration:none;}
.docs h1 a:hover{text-decoration:underline;}
.docs h2{margin:0;margin:36px 0 12px;}
.docs h3{margin:0;margin:24px 0 8px 0;font-size:22px;line-height:28px;}
.docs ul,.docs ol{margin-top:8px;margin-bottom:8px;}
.docs li{margin:0;padding:4px 0;}
.docs-menu{position:absolute;width:160px;left:0;top:106px;}
.docs-menu ul{list-style:none;margin:0;padding:25px 0;border-top:1px solid #CCC;border-bottom:1px solid #CCC;}
.docs-menu__ad{padding:25px 10px;border-bottom:1px solid #CCC;font-size:13px;line-height:17px;position:relative;}
.docs-menu a{text-decoration:none;width:100%;}
a.docs-logo{font-weight:600;font-size:20px;margin-bottom:0;text-decoration:none;}
.docs-menu li{list-style:none;margin:0;padding:0;}
a.docs-menu__item--active{color:#222;font-weight:normal;}
.codepen-embed{margin-left:-30px;padding:16px 30px;width:100%;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;background-color:#f8f8f8;height:600px;}
.codepen-embed--disabled{height:auto;}
.codepen-embed p{margin-bottom:0;}
.docs .highlight{border-radius:2px;margin-left:-30px;padding:16px 30px;width:100%;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin-bottom:26px;}
/* Syntax highlighter styles (for docs) */
.highlight{background-color:#f8f8f8}
.c{color:#888;}
/* Comment */
.err{color:#a61717;background-color:#e3d2d2}
/* Error */
.k{color:#a71d5d;}
/* Keyword */
.o{color:#000000;}
/* Operator */
.cm{color:#888;}
/* Comment.Multiline */
.cp{color:#888;font-weight:bold;}
/* Comment.Preproc */
.c1{color:#888;}
/* Comment.Single */
.cs{color:#888;font-weight:bold;}
/* Comment.Special */
.gd{color:#000000;background-color:#ffdddd}
/* Generic.Deleted */
.ge{color:#000000;}
/* Generic.Emph */
.gr{color:#aa0000}
/* Generic.Error */
.gh{color:#888}
/* Generic.Heading */
.gi{color:#000000;background-color:#ddffdd}
/* Generic.Inserted */
.go{color:#888888}
/* Generic.Output */
.gp{color:#555555}
/* Generic.Prompt */
.gs{font-weight:bold}
/* Generic.Strong */
.gu{color:#aaaaaa}
/* Generic.Subheading */
.gt{color:#aa0000}
/* Generic.Traceback */
.kc{color:#0086b3;}
/* Keyword.Constant */
.kd{color:#a71d5d;}
/* Keyword.Declaration */
.kn{color:#000000;font-weight:bold}
/* Keyword.Namespace */
.kp{color:#000000;font-weight:bold}
/* Keyword.Pseudo */
.kr{color:#000000;font-weight:bold}
/* Keyword.Reserved */
.kt{color:#795da3;}
/* Keyword.Type */
.m{color:#009999}
/* Literal.Number */
.s{color:#df5000}
/* Literal.String */
.na{color:#a71d5d}
/* Name.Attribute */
.nb{color:#0086B3}
/* Name.Builtin */
.nc{color:#795da3;}
/* Name.Class */
.no{color:#a71d5d}
/* Name.Constant */
.nd{color:#3c5d5d;font-weight:bold}
/* Name.Decorator */
.ni{color:#800080}
/* Name.Entity */
.ne{color:#990000;font-weight:bold}
/* Name.Exception */
.nf{color:#990000;font-weight:bold}
/* Name.Function */
.nl{color:#990000;font-weight:bold}
/* Name.Label */
.nn{color:#555555}
/* Name.Namespace */
.nt{color:#0086b3}
/* Name.Tag */
.nv{color:#a71d5d}
/* Name.Variable */
.ow{color:#000000;font-weight:bold}
/* Operator.Word */
.w{color:#bbbbbb}
/* Text.Whitespace */
.mf{color:#009999}
/* Literal.Number.Float */
.mh{color:#009999}
/* Literal.Number.Hex */
.mi{color:#009999}
/* Literal.Number.Integer */
.mo{color:#009999}
/* Literal.Number.Oct */
.sb{color:#df5000}
/* Literal.String.Backtick */
.sc{color:#df5000}
/* Literal.String.Char */
.sd{color:#df5000}
/* Literal.String.Doc */
.s2{color:#df5000}
/* Literal.String.Double */
.se{color:#df5000}
/* Literal.String.Escape */
.sh{color:#df5000}
/* Literal.String.Heredoc */
.si{color:#df5000}
/* Literal.String.Interpol */
.sx{color:#df5000}
/* Literal.String.Other */
.sr{color:#009926}
/* Literal.String.Regex */
.s1{color:#df5000}
/* Literal.String.Single */
.ss{color:#990073}
/* Literal.String.Symbol */
.bp{color:#888}
/* Name.Builtin.Pseudo */
.vc{color:#a71d5d}
/* Name.Variable.Class */
.vg{color:#a71d5d}
/* Name.Variable.Global */
.vi{color:#a71d5d}
/* Name.Variable.Instance */
.il{color:#009999}
/* Literal.Number.Integer.Long */
.language-css .k{color:#0086b3;}
.language-css .nt{color:#63a35c;}
/*body.open-sans{font-family:"open-sans";}
.futura-pt{}
.futura-pt p{font-family:"adelle";}
.futura-pt h1,.futura-pt h2{font-family:"futura-pt";text-transform:uppercase;}
.futura-pt h3{font-weight:bold;}
*/
img{width:auto;max-width:100%;height:auto;border:0;}
.video{width:100%%;margin:0 0 24px 0;}
.video__container{position:relative;width:100%;padding-bottom:56.25%;padding-top:35px;height:0;overflow:hidden;}
.video__container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.video-desc{width:100%;max-width:740px;margin:12px auto;}
p{margin:0 0 12px;}
ul{list-style:disc;}
ul,ol{padding:0;margin:0 0 12px 25px;}
li{margin:0 0 12px 0;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:normal;}
h1{font-size:48px;line-height:1;margin:0;font-weight:600;margin-bottom:6px;}
.row--heading{position:relative;}
.section--head p{text-align:left;font-size:26px;line-height:32px;margin-bottom:24px;font-size:19px;line-height:29px;}
.section--head .github-button{position:absolute;right:0;top:0;}
.row--nav{text-align:center;font-size:32px;line-height:1.1;}
.navigation{width:100%;background:#F7F7F7;position:relative;padding:30px 0;}
.navigation a{text-decoration:none;border-bottom:1px solid #92ABCD;}
a.twitter-nav-link{border:0;margin:0 0.2em;}
.twitter-nav-link span{border-bottom:1px solid #92ABCD;}
.navigation a:hover,.twitter-nav-link:hover span{border-bottom-color:#C00;}
.twitter-nav-link:before{content:'';background:url('../images/twitter.svg');display:inline-block;width:0.8em;height:0.8em;background-size:0.7em 0.7em;background-repeat:no-repeat;background-position:0 0.1em;margin-right:0.1em;}
h2{font-size:32px;line-height:1.1;margin-bottom:12px;font-weight:600;}
h3{font-size:22px;line-height:28px;margin:0 0 8px 0;font-size:18px;line-height:24px;font-weight:600;}
strong{font-weight:600;}
span.highlight{background:rgb(246,243,226);}
.title-block p{font-size:22px;line-height:28px;max-width:600px;margin-bottom:24px;}
p,ul.text-list{color:#444;}
.section--head p,.title-block p{color:#666;}
.title-block p{font-size:19px;line-height:29px;}
.section{width:100%;margin-top:176px;}
.docs{margin-top:60px;}
.section--head{margin:0;background:#EEE;/*background:linear-gradient(180deg,#eee 0%,#fff 100%);*/
padding:132px 0;}
.row{max-width:800px;margin:24px auto;padding:0 30px;position:relative;}
.row--docs{max-width:960px;padding-left:210px;}
.row--heading{margin-top:0;margin-bottom:0;}
.row--footer{text-align:center;padding:132px 0;}
.row--wide{max-width:1000px;}
.row--video{max-width:1160px;}
.row--wide img{float:left;margin:0 12px 12px 0;width:200px;}
img.img--with_border{border:1px solid #DDD;border-radius:2px;}
.img-desc{margin-left:212px;}
/*.main-wrapper{background:none;width:100%;padding-top:0;}
.content-wrap{}
*/
/* clearfix */
.row:after{content:" ";visibility:hidden;display:block;height:0;clear:both;}
.row--large{margin-bottom:48px;}
.section--head h1 a{vertical-align:super;font-size:14px;text-decoration:none;}
/*p.intro{margin-top:24px;font-size:18px;line-height:24px;}
*/
.col-50{width:48%;float:left;}
.col-50:nth-child(1){margin-right:4%;}
.col-img{width:auto;max-width:100%;height:auto;}
.style-select{width:100%;float:left;}
.style-select .radio{position:relative;margin-bottom:12px;display:block;float:left;width:100%;}
.style-select label{padding-left:24px;position:relative;display:block;cursor:pointer;}
.style-select input{position:absolute;left:0;top:0;width:24px;height:24px;overflow:hidden;margin:0;padding:0;border:0;outline:0;opacity:0;cursor:pointer;}
.style-select input + label:before{content:'';position:absolute;left:0;top:4px;background:none;border-radius:50%;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(0,0,0,0.6);}
.radio:hover label:before{border-color:#3169B3;}
.style-select input:checked + label:before{border-color:#3169B3;}
.style-select input:checked + label:after{content:'';position:absolute;left:5px;top:9px;width:6px;height:6px;background:#3169B3;border-radius:50%;}
/*.section--developers{color:#FFF;background:#222;background:#1f1f1f;padding:80px 0;}
.section--developers a{color:#FFFFFF;}
.section--developers p,.section--developers ul.text-list{color:#ddd;}
.section--developers .section--head p,.section--developers .title-block p{color:#ddd;}
*/
.row--modules ul{list-style:none;margin-left:0;/*color:rgba(255,255,255,0.8);*/
}
.row--modules span{font-wight:600;border-left:5px solid #FFF;padding-left:5px;margin-left:-10px;}
.size-chart{width:100%;display:inline-block;}
.size-chart div{height:21px;float:left;font-size:13px;padding:4px;line-height:1;}
.block__ui-separated{position:relative;}
.block__ui-separated .col-50{position:absolute;left:0;top:12px;}
.block__ui-separated img{float:right;max-width:450px;}
.demo-gallery{width:100%;height:auto;float:left;}
.demo-gallery a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;display:block;float:left;margin:0 12px 12px 0;width:171px;line-height:0;}
a.demo-gallery__img--main{width:auto;height:auto;}
.ukraine-flag{width:21px;height:14px;position:relative;background:#ffcc00;top:1px;display:inline-block;}
.ukraine-flag:before{content:'';position:absolute;width:21px;height:7px;left:0;top:0;background:#0066cc;}
.demo-gallery figure{display:none;}
.demo-gallery__title{line-height:14px;font-size:14px;opacity:0.8;margin-top:5px;width:100%;float:left;}
.share-buttons h2{text-align:center;border:0;}
.share-buttons{text-align:center;position:relative;margin:0 0 24px;}
.share-buttons a{-moz-border-radius:2px;border-radius:2px;display:inline-block;padding:10px 20px;margin:10px;color:#FFF;text-decoration:none;background:#5AAF63;font-size:16px;line-height:22px;cursor:pointer;}
.share-buttons a:hover{opacity:0.7;}
#tweet{background:#0096c4;}
#like{background:#3b5998;}
#gplus{background:#d34836;}
@media screen and (max-width:1000px){.row--wide{max-width:800px;}
.row--wide img{float:none;}
.img-desc{margin-left:0;}
.section{margin-top:132px;}
.row--docs{max-width:800px;padding-left:30px;}
.section--head{margin-top:0;padding:30px 0;}
.docs{margin-top:48px;}
.docs-menu{position:relative;margin:15px 0;left:0;top:0;}
.docs-menu ul{position:relative;}
.docs-menu__ad{display:none;}
.row--nav{font-size:24px;line-height:1.1;}
}
@media screen and (max-width:650px){h1{font-size:40px;}
.block__ui-separated .col-50{position:relative;top:0;}
.block__ui-separated img{max-width:100%;width:100%;float:left;}
}
@media screen and (max-width:450px){.col-50:nth-child(1){margin-right:0;}
.row--wide img{margin-bottom:6px;}
.col-50{width:100%;margin-bottom:12px;}
.row{padding:0 18px;}
.docs .highlight,.codepen-embed{padding-left:18px;padding-right:18px;margin-left:-18px;}
.section{margin-top:88px;}
.docs{margin-top:32px;}
.section--head{margin-top:0;padding:24px 0;}
.row--nav{font-size:18px;line-height:26px;}
}
@media screen and (max-width:700px){.row--nav{font-size:18px;line-height:26px;}
.demo-gallery{max-width:500px;}
.demo-gallery a{width:120px;margin:0 4px 4px 0;}
a.demo-gallery__img--main{width:164px;}
.section--head p{font-size:18px;line-height:24px;}
}
/*@media screen and (max-width:490px){.demo-gallery a{width:100px;margin:0 4px 4px 0;}
a.demo-gallery__img--main{width:137px;}
}
*/
@media screen and (max-width:450px){.demo-gallery a{width:95px;margin:0 1px 1px 0;}
a.demo-gallery__img--main{width:127px;}
}
@media screen and (max-width:350px){.demo-gallery a{width:81px;margin:0 1px 1px 0;}
a.demo-gallery__img--main{width:109px;}
}
分享到QQ
分享到微博
微信扫一扫
