美文网首页
vue移动端图片预览,使用photoSwipe插件

vue移动端图片预览,使用photoSwipe插件

作者: 冰淇wbq | 来源:发表于2018-09-09 20:14 被阅读0次

photoswipe.js

var doc=document,
    domEl=doc.createElement("div");
    domEl.innerHTML='<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><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>';
    domEl.className="pswp";
    domEl.tabIndex="-1";
    domEl.setAttribute("role","dialog");
    domEl.setAttribute("aria-hidden","true");
    doc.body.appendChild(domEl);
    domEl.offsetHeight;

exports.open=function(items,index){
    var gallery = new PhotoSwipe(domEl, PhotoSwipeUI_Default, items,{index:index});
    gallery.init();
    return gallery;
};

相关文章

网友评论

      本文标题:vue移动端图片预览,使用photoSwipe插件

      本文链接:https://www.haomeiwen.com/subject/btprgftx.html