vue+photoswipe
来源：互联网 发布：云计算培训课程 编辑：程序博客网 时间：2024/06/17 05:12
之前pc端时候，点击图片放大功能封装了一个插件。思路是这样的，点击图片时候，获取图片地址，然后获取真实图片的大小，判断下屏幕大小，如果图片大小大于屏幕大小，则图片宽度设为和屏幕宽度一样。如果小于屏幕宽度，则屏幕宽度减去弹出图片的宽度，再除以2居中对齐。高度也是类似。大致思想如此。到手机端时候，需求说每个组里的图片不但能放大，放大后还能左右翻转。好吧，找个插件吧，于是开始了vue+photoswipe.js找坑之路。
好了，废话不多说了
首先引入photoswipe.js和photoswipe-ui-default.min.js和那段html(<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">),这里我是以组件的形式引入的。代码如下
var enlarge = Vue.extend({ template: '<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--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>'})引进这个js文件，并注册。引入initPhotoSwipeFromDOM这个方法
var initPhotoSwipeFromDOM = function (gallerySelector) { // 解析来自DOM元素幻灯片数据（URL，标题，大小...） // (children of gallerySelector) var parseThumbnailElements = function (el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item, divEl; for (var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // 仅包括元素节点 if (figureEl.nodeType !== 1) { continue; } divEl = figureEl.children[0]; linkEl = divEl.children[0]; // <a> element size = linkEl.getAttribute('data-size').split('x'); // 创建幻灯片对象 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> 缩略图节点, 检索缩略图网址 item.msrc = linkEl.children[0].getAttribute('src'); } item.el = figureEl; // 保存链接元素 for getThumbBoundsFn items.push(item); } return items; }; // 查找最近的父节点 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; // 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 = {}; //console.log("222"+hash); 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 = { barsSize: { top: 100, bottom: 100 }, fullscreenEl: false, shareButtons: [ {id: 'wechat', label: '分享微信', url: '#'}, {id: 'weibo', label: '新浪微博', url: '#'}, {id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true} ], // 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('img')[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 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 //alert(33); var galleryElements = document.querySelectorAll(gallerySelector); //console.log(galleryElements); 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(); //console.log(hashData); if (hashData.pid && hashData.gid) { openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true); }};// execute above function//console.log($(".my-gallery").length);initPhotoSwipeFromDOM('.my-gallery');html中加入
<div class="my-gallery"> <figure> <div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div> </figure> <figure> <div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div> </figure> </div>然后打开文件，图片可以放大。你以为这样就玩了吗？然后我把此处放到循环中
var commentList = Vue.extend({ template: '<ul class="commentlist">' + '<li class="commentlistli" v-for="comlist in comment.list">' + '<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' + '<div class="right wb78">' + '<p><a class="commentname">{{comlist.user_name}}</a></p>' + '<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' + '<div class="my-gallery" data-pswp-uid="3">' + '<figure>' + '<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' + '</figure>' + '</div>' + '</div>' + '<div class="clear"></div>' + '</li>' + '</ul>', props: ['comment'], methods: { jointhead: function (str) { if (str.indexOf('http') < 0) { return "/" + str; } else { return str; } }, htmlspecialchars_decode: function (str) { str = str.replace(/&/g, '&'); str = str.replace(/</g, '<'); str = str.replace(/>/g, '>'); str = str.replace(/"/g, '"'); str = str.replace(/'/g, '"'); str = str.replace(/width="40"/g, ''); str = str.replace(/width=40/g, ''); str = str.replace(/height="40"/g, ''); str = str.replace(/height=40/g, ''); str = str.replace(/width="50"/g, ''); str = str.replace(/width=50/g, ''); str = str.replace(/height="50"/g, ''); str = str.replace(/height=50/g, ''); return str; }, }, })图片不能放大了！！！
图片不能放大了！！！
这是为什么呢？因为调用
initPhotoSwipeFromDOM('.my-gallery');的时候还没有加载完成。根据vue的执行过程发现有个updated方法，updated的作用是在data发生变化渲染更新视图之后触发。
于是上面的代码加了一个updated
var commentList = Vue.extend({ template: '<ul class="commentlist">' + '<li class="commentlistli" v-for="comlist in comment.list">' + '<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' + '<div class="right wb78">' + '<p><a class="commentname">{{comlist.user_name}}</a></p>' + '<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' + '<div class="my-gallery" data-pswp-uid="3">' + '<figure>' + '<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' + '</figure>' + '</div>' + '</div>' + '<div class="clear"></div>' + '</li>' + '</ul>', props: ['comment'], methods: { jointhead: function (str) { if (str.indexOf('http') < 0) { return "/" + str; } else { return str; } }, htmlspecialchars_decode: function (str) { str = str.replace(/&/g, '&'); str = str.replace(/</g, '<'); str = str.replace(/>/g, '>'); str = str.replace(/"/g, '"'); str = str.replace(/'/g, '"'); str = str.replace(/width="40"/g, ''); str = str.replace(/width=40/g, ''); str = str.replace(/height="40"/g, ''); str = str.replace(/height=40/g, ''); str = str.replace(/width="50"/g, ''); str = str.replace(/width=50/g, ''); str = str.replace(/height="50"/g, ''); str = str.replace(/height=50/g, ''); return str; }, }, updated: function () { initPhotoSwipeFromDOM('.my-gallery'); },})再打开果然通过。
阅读全文
0 0
- vue+photoswipe
- PhotoSwipe简介
- PhotoSwipe简介
- PhotoSwipe简介
- PhotoSwipe简介
- PhotoSwipe简介
- Investigation on PhotoSwipe - 01
- Investigation on PhotoSwipe - 02
- PhotoSwipe动态加载图片
- photoswipe 安卓下关闭问题
- photoSwipe插件使用
- 使用photoswipe展示图片
- js-PhotoSwipe相册功能
- photoSwipe 结合jquery使用
- photoswipe.js插件
- 点击放大 swiper+photoswipe
- photoswipe.min.js 使用
- PhotoSwipe源码解读系列(二)
- python2 字符串unicode str编码解码问题
- c语言：查找两个字符串的最大公共子串
- Flask学习笔记之钩子函数（hook）
- Hibernate 05 : 单向多对一review
- JQuery中Ajax的操作
- vue+photoswipe
- JAVA嵌套循环
- 关于OpenAL 音频采集的问题.
- 将三个数按从小到大输出
- as安卓开发，程序基本结构介绍
- 如果这些操作都不会 等于白买了个iPhone X
- 项目实训日记（1）
- json、ajax、JQuery验证在数据库中用户是否存在
- 如何分析ANR Log的总结
