美文网首页
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