PhotoSwipe导航不响应输入
[英]PhotoSwipe Navigation Does Not Respond to Input
问题描述
I'm using PhotoSwipe in conjunction with Jquery Masonry and navigation does not respond to input. 
我将PhotoSwipe与Jquery Masonry结合使用，导航不响应输入。 Neither the navigation arrows or key board input (key codes 37 and 39), do not locate images forward or backwards. 导航箭头或键盘输入（键码37和39）都不会向前或向后定位图像。
</head>
<body>
<div class="page">
<div class="header-container">
<header class="wrapper clearfix">
<div class="menumain">
<div id="logotype">
<a href="index.html">TEST</a>
</div>
<nav class="menudesktop">
<div class="menu">
<ul>
<li><a href="portfolio.html" class="selected">PORTFOLIO</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href=""><i class="fa fa-instagram fa-lg"></i></a></li>
<li><a href=""><i class="fa fa-twitter fa-lg"></i></a></li>
</ul>
</div>
</nav>
<a class="mtoggle"></a>
</header>
</div>
<div class="container-fluid">
<div class="main clearfix">
<div id="content">
<!-- Portfolio Rendering -->
<div class="grid">
<div class="grid-sizer">
<div class="grid-item">
<a href="fashion/01.jpg" data-size="900x1200" data-med="fashion/600/01.jpg" data-med-size="600x800" data-author="">
<img src="fashion/600/01.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
</div>
<div class="grid-item">
<a href="fashion/02.jpg" data-size="900x1200" data-med="fashion/600/02.jpg" data-med-size="600x900" data-author="">
<img src="fashion/600/02.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
</div>
<div class="grid-item">
<a href="fashion/03.jpg" data-size="900x1200" data-med="fashion/600/03.jpg" data-med-size="600x800" data-author="">
<img src="fashion/600/03.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
</div>
<div class="grid-item">
<a href="fashion/04.jpg" data-size="900x1200" data-med="fashion/600/04.jpg" data-med-size="600x906" data-author="">
<img src="fashion/600/04.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
</div>
</div>
</div>
</div></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">
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></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__loading-indicator"><div class="pswp__loading-indicator__line"></div></div> -->
</div></div></div>
<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('.grid-item');
})();
</script>
1 个解决方案
解决方案1
0 2017-06-21 18:08:51
FIXED Removed the 固定删除
<div class="grid-item">
<a href="fashion/01.jpg" data-size="900x1200" data-med="fashion/600/01.jpg" data-med-size="600x800" data-author="">
<img src="fashion/600/01.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
</div>
and replaced with: 并替换为：
<a class="grid-item" href="fashion/01.jpg" data-size="900x1200" data-med="fashion/600/01.jpg" data-med-size="600x800" data-author="">
<img src="fashion/600/01.jpg" alt="" class="over" /><div class="overlay"><img class="zoom" src="images/mag.png" alt="mag" width="37" height="39"></div>
</a>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
PhotoSwipe和砌体导航箭头丢失 - PhotoSwipe and Masonry Navigation Arrows Missing
渲染的输入文本框不响应箭头键 - rendered input text box does not respond to arrow keys
如何让AngularJS响应导航 - How to get AngularJS to respond to navigation
不响应对函数的调用 - Does not respond to call to function
ColorPicker 没有响应 - ColorPicker does not respond
Ajax请求不响应 - Ajax Request Does not Respond
浏览器不响应 - Browser does not respond
机器人不回复消息 - The bot does not respond to the message
不回复总和function - Does not respond to the sum function
为什么 scrollTop 没有响应？ - Why does scrollTop not respond?
相关标签