点击小图全屏查看大图photoswipe 中文API demo例子[使用方法]

点击这里查看演示例子

先引用这四个文件：

<link rel="stylesheet" type="text/css" href="Content/Scripts/photoSwipe4.1.3/photoswipe.css" />
<link rel="stylesheet" type="text/css" href="Content/Scripts/photoSwipe4.1.3/default-skin.css" />
<script type="text/javascript" src="Content/Scripts/photoSwipe4.1.3/photoswipe.js"></script>
<script type="text/javascript" src="Content/Scripts/photoSwipe4.1.3/photoswipe-ui-default.js"></script>

html：

//说明:这个插件的html部分，几乎没得简化，所以先按照官网的模板照搬下来，再逐一看情况按需删减；样式可以自己设置；当然你也可以复制我这里简化过的

<div class="pswp photo-full-screen" 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>
                <div class="pswp__button pswp__button--close"></div>
                <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>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

js:

//写这些js之前，你需要先写好页面图片的排列样式，然后再去遍历需要的参数传进来

//图片全屏放大
    var gallery="";
    $(document).on("click",".img-self-js",function(){
        var self=$(this);
        if(self.parents(".photo-contain-js").find(".img-checkbox-js").css("display")!="none"){
            return;
        }
        var index=self.parents("li").index();
        var $Element=$(".pswp")[0];//被绑的容器对象

        // 创建大图参数数组
        var items = [];
        $(".img-self-js").each(function(){
            var self=$(this);
            var item={
                title:self.attr("data-name"),
                src: self.parent(".img-parent-js").attr("data-href"),
                w: self[0].naturalWidth,//图片原始大小,
                h: self[0].naturalHeight
            }
            items.push(item);
        })
        var $self=self.offset();//获得当前被点击图片的窗口距离对象//官网用的是getBoundingClientRect(),但如果出现图片比较多需要滚动的时候就会定位错误

        // 参数设置
        var options = {
            getThumbBoundsFn:function(){
                return {x:$self.left,y:$self.top,w:self[0].naturalWidth};//动画开始时从对应的图片放大到全屏，返回对应图片相对于窗口的实际坐标和自己的宽度
            },
            maxSpreadZoom:2.5,//手势放大图片最大倍数
            allowPanToNext:true,//图片处于放大状态是否允许滑动到下一张
            getDoubleTapZoom:function(){
                return 1;//双击后图片缩放到的倍数//1表示缩放到原始大小
            },
            loop:false,//滑动到最后一张是否可以继续循环到第一张
            history: false,
            focus: false,
            //closeOnVerticalDrag:false,//垂直拖动图片关闭弹层
            spacing:0.03,
            showAnimationDuration: 430,//显示大图动画时间
            hideAnimationDuration: 430,//隐藏大图动画时间
            showHideOpacity:true,//动画时淡出逐渐变透明
            index: index // 从哪一张图片开始
        };

        //创建//PhotoSwipeUI_Default这个全局变量是引用photoswipe-ui-default.js所得到
        gallery = new PhotoSwipe( $Element, PhotoSwipeUI_Default, items, options);
        gallery.init();
        //console.log(gallery);

        //动画关闭时缩小到对应的图片
        gallery.listen('close', function() {
            var index=gallery.getCurrentIndex();
            gallery.options.index=index;
            var self=$(".img-self-js")[index];
            var $self=$(self).offset();//官网用的是getBoundingClientRect(),但如果出现图片比较多需要滚动的时候就会定位错误
            gallery.options.getThumbBoundsFn=function(){
                return {x:$self.left,y:$self.top,w:$(self).width()};
            }
        });
        //单击图层关闭全屏查看图片，效果有待反馈
//        gallery.ui.hideControls=function(){
//            gallery.close();
//        }
    })