内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

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

发布:2020-11-25 浏览: 评论(
点击这里查看演示例子

//先引用这四个文件:

<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();
//		}
	})
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4