- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
库在 photoswipe.min.js 上向我返回错误:“未捕获类型错误:无法读取未定义的属性‘x’”
myPhotoswipe 代码与官方网站上的 get start 相同:
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
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) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
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 = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('span')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
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 {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
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('.my-gallery');
最佳答案
确保设置包含照片滑动库的父元素的高度为我解决了这个问题。
例如我将父元素设置为 height: 100vh;
关于javascript - photoswipe js "Cannot read property ' x'未定义”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37744273/
我只是涉足 photoswipe,到目前为止,我没有做任何更高级的事情,只是通过一些非常小的(理论上微不足道的调整)简单地实现入门演示的副本。 我的图片库显示得很好,我总共有 4 个项目,因为我只是想
我已经集成了PhotoSwipe 4在我的网站上。使用鼠标时,它在台式机上运行良好,但是当我在移动设备上打开时,没有任何效果,并且我可以向下滚动(它应该像这样关闭)。有什么想法为什么会发生这种情况吗?
我正在寻找一个解决方案,也可以使用 a 打开 PhotoSwipe 库图片链接。这样就有了一个带有图库图标的 IMG。我想要如果用户单击它即可打开图库。 有人知道我该如何处理吗? 我发现了这一点。但这
我正在尝试使用 Ajax 调用让 Photoswipe 2.1.1 在 jQuery Mobile 网站中工作(每个页面都是一个单独的网页),但我发现了一个看起来像错误的东西。 即使在下载时提供的示例
我正在使用 Jquery Mobile 1.0 和 PhotoSwipe 插件 作为图库。我的问题是,当我打开画廊照片时,它工作得很好,但是当我关闭照片滑动时,它会显示一个空白屏幕,屏幕左上角有未定义
我里面有几张图片已绑定(bind)其点击以获取 photoswipe 图像的正确索引的标签。问题是第一次点击图片打开了正确的图片,但第二次点击总是打开同一张图片。此模式继续,交替单击打开与前一个相同的
我在这个页面上有一个非常简单的 Photoswipe 图库:http://neighborhoodpets.wink1733.com 如何为主页上没有显示缩略图的照片添加说明? 我只希望它在 Phot
是否可以向 Photoswipe 添加按钮?我知道我可以对按钮进行点击事件,但我无法更改按钮图标。是否可以添加一个新按钮来使用普通的 Java 脚本功能“打印”打印图片? 最佳答案 最新版本的 Pho
在这个官方代码笔中,在我的移动设备上,控件和标题看起来很小: http://codepen.io/dimsemenov/pen/ZYbPJM 我尝试将其添加到 HTML,但没有任何区别: 我
我正在使用 photoswpie 创建图库。但是当某些图像关闭时(当您单击图像外部的某个地方时),我无法制作动画。我想以这种方式看这个例子: http://photoswipe.com/ 我正在使用自
默认情况下,Photoswipe 为大图像提供缩放和拖放功能。它工作正常。但如果图像小于视口(viewport),单击该图像将关闭图库。 这个问题的视频: https://dl.dropboxuser
我正在尝试使用 JavaScript 在新窗口中打开当前可见的照片,但它也必须在 iPad 上运行。我尝试的是向工具栏添加一个按钮(如示例中所示)。我还在 photoswipe.css 中添加了该按钮
我使用 Photoswipe 在单击某个项目时显示我的图库。 我的标记:
我知道使用 jquery 将图像添加到照片滑动列表很简单,但我不知道如何在浏览图库时更新图像列表,即不返回图像列表。我发现的另一种选择(没有jquery,因为它将图像直接添加到 photoswipe
我创建了一个 jQuery mobile 页面,我在其中从 facebook 页面导入相册和照片,并动态创建包含相册的 listView。当用户从 ListView 中单击相册时,他可以看到缩略图中的
我正在尝试将图片(来自数组)动态添加到 photoswipe 中。我尝试使用 jquery 的“append”方法,但没有成功。我还阅读了人们在网上写的有关此问题的所有内容,但我没有找到正确的答案。欢
因此,当用户单击带有图库的图像并决定查看图像并关闭图库时,浏览器窗口会将他带到页面顶部。这不利于可访问性。焦点应该移回到原来的位置在页面中的位置。 您有任何想法可能会导致什么以及如何控制焦点吗?我认为
有没有办法使图像适合浏览器视口(viewport)?我真的很想将图像放在元素的背景中,而不是创建 img 标记的正常行为。这样我就可以在 css 中使用 background-size:cover。
我想将视频添加到我的 PhotoSwipe 图库。 我在这里阅读了文档: http://photoswipe.com/documentation/custom-html-in-slides.html
有没有一种方法可以在创建 photoswipe 画廊后将图像动态添加到它。 情况是这样的。 我正在从服务器获取图像 URL 并将它们显示在图库中。当项目被下载时,anchor 和 img 元素被添加到
我是一名优秀的程序员,十分优秀!