html点击小图标显示全屏查看大图,点击小图全屏查看大图photoswipe 中文API demo例子[使用方法]...

点击这里查看演示例子

//先引用这四个文件：

html：

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

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();

//}

})