解决：photoswipe的data-size问题-自适应宽高，终于可以不用传data-size了！

photoswipe.js 这个插件应该很多小伙伴都用过。但应该也都苦于图片是从数据接口获取，data-size无法填写~

下面我稍稍改了一下代码~~~ 就可以不用传入data-size了~~

var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,// size, //去掉sizelink,item;for(var i = 0; i < numNodes; i++) {figureEl = thumbElements[i]; if(figureEl.nodeType !== 1) {continue;}linkEl = figureEl.children[0]; // size = linkEl.getAttribute('data-size').split('x'); //不需要通过获取data-sizelink = linkEl.getAttribute('href'); //获取图片的url// create slide objectitem = {src: linkEl.getAttribute('href'),w: parseInt(getImageWidth(link).width, 10), //直接在这里我们计算图片的宽高即可。h: parseInt(getImageWidth(link).height, 10)};if(figureEl.children.length > 1) {// <figcaption> contentitem.title = figureEl.children[1].innerHTML;}if(linkEl.children.length > 0) {// <img> thumbnail element, retrieving thumbnail urlitem.msrc = linkEl.children[0].getAttribute('src');}item.el = figureEl; // save link to element for getThumbBoundsFnitems.push(item);}return items;};// find nearest parent elementvar closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};// triggers when user clicks on thumbnailvar onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;// find root element of slidevar 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- attributevar 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 foundopenPhotoSwipe( 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);options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnailpageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};}};// PhotoSwipe opened from URLif(fromURL) {if(options.galleryPIDs) {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);}if( isNaN(options.index) ) {return;}if(disableAnimation) {options.showAnimationDuration = 0;}gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();};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;}var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.my-gallery');

下面是那个获取图片宽高的函数：

// 获取图片真实高度function getImageWidth(url) {var img = new Image();img.src = url;let obj = {}// 如果图片被缓存，则直接返回缓存数据if (img.complete) {obj.width = img.width;obj.height = img.height;return obj} else {img.onload = function () {obj.width = img.width;obj.height = img.height;return obj}}}

好啦~
小伙伴们放心大胆的使用吧~~

解决：photoswipe的data-size问题-自适应宽高，终于可以不用传data-size了！相关推荐

关于photoswipe的data-size问题-自适应宽高
photoswipe是一款非常优秀的移动端图片查看插件,但是在使用的时候,有一个令人头疼的问题,(data-size)! 这个属性必须填写,且值需固定.这对我们来说是一个非常麻烦的问题,为了解决这个问 ...
html表格实现图片排列布局,纯css实现朋友圈照片排列布局（附单图自适应宽高）...
效果图 image.png image.png image.png image.png image.png 思路设置flex实现正常的三列布局 ul{ padding:0px; width:300p ...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...
UILabel实现自适应宽高需要注意的地方（三）
一.需求图如下所示 UILabel 的高度自适应 UILabel中的段落间距可设置图片效果如下: 调整段落适应长宽高方式: 需求: 保证"游戏玩法" 章节,UILabel高度自 ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
小程序图片自适应宽高，保持图片比例不变
小程序图片自适应宽高,保持图片比例不变小程序中,可根据需求给image设置 mode属性来控制图片的裁剪.缩放模式如果要保持图片在容器内不变形可设置mode属性为aspectFit 代码如下: / ...
[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...
CSS 实现自适应宽高的正圆
CSS 实现自适应宽高的正圆利用CSS伪元素增加父元素的高度,使其变成一个正方形代码 <span class="circle-container"><span ...
xlwings使excel批量自适应宽高
我们都知道,双击excel列/行的分界线就可以使之自适应宽高,那么如何批量操作呢这里我们使用xlwings这个python库,经过对比,这个库比xlwt等功能全面一些. 官方文档在这里 sht.ra ...

解决：photoswipe的data-size问题-自适应宽高，终于可以不用传data-size了！

解决：photoswipe的data-size问题-自适应宽高，终于可以不用传data-size了！相关推荐

最新文章

热门文章