您的位置:首页 > 移动开发 > 微信开发

PhotoSwipe 自适应高度

2018-01-23 10:09 169 查看
最近在做仿微信的图片预览,点击图片放大,并左右滑动,使用的Photoswiper插件,插件很好用,流畅度什么的都很好,就是一个data-size固定宽高比很恶心,看了很多资料,都没有解决,在快放弃这个插件的时候找到了解决方法,

for(var i = 0; i < numNodes; i++) {

4000
figureEl = thumbElements[i]; // <figure> element

// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}

linkEl = figureEl.children[0]; // <a> element
 var img = new Image();
img.src = linkEl.getAttribute('href');

linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);

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);
}

在插件中加上红色的代码即可。
已经使用过了,兼容iOS、Android,在网上看到的办法,虽然能解决问题,但是只能兼容iOS。

如果对你又帮助,请问我打call:),点赞。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息