photoswipe
这几天又在写自己的小demo，之前去写前端，接触到了photpswipe，觉得666（之前实在是孤陋寡闻）就决定把之前的小项目的图片预览给换掉~~~。
效果
首先要知道photoswipe的基础；
本文也算是ionic3自定义组件的栗子；
博主环境：
环境情况
1、构造ionic组件目录
cd 进入项目，输入创建组件命令
输入ionic g component x-img
之后我们就得到如下文件结构，使用命令创建，components.module并不会自动在app.module.ts里添加，所以手动import一下，在imports中引入ComponentsModule（开始以为是懒加载，但...可能版本问题）以后再添加组件，会自动在components.module.ts里追加。
目录结构
现在打开components.module.ts
components.module.ts
需要导入IonicModule，才能在组件html里使用诸如ngIf、ngFor这样的语法
导入IonicModule
2、引入photoswipe资源
下载photoswipe所需文件放在src/assets里，这里主要说明一下，photoswipe-ui.js是自己写的，就是用js添加photoswipe需要的DOM到项目中。也可以直接在比较顶层的html文件中添加photoswipe需要的html元素，本文相当于是在src下的index.html中添加。
photoswipe相应资源
然后在src目录下的index.html中引入
引入photoswipe
3、开始写---直接上代码
//x-img.ts
import { Component,Input,OnChanges } from '@angular/core';
declare var PhotoSwipe: any;
declare var PhotoSwipeUI_Default: any;
declare var document: any;
/**
*
*/
@Component({
selector: 'x-img',
templateUrl: 'x-img.html'
})
export class XImgComponent implements OnChanges {
@Input() images:any = [];
@Input() _details:string = ""; //特征标记字符
@Input() g_id:string = ""; //缩略图所在元素 ID
items=[];
pswpElement;
gallery;
constructor() {
}
ngOnChanges(ch) {
var len = this.images.length;
if (len != 0) {
try {
for (var i = 0; i < len; i++) {
if (this.images[i]["src"].length > 9) {
var objs = {};
objs["src"] = this.images[i]["src"];
objs["w"] = this.images[i]["width"];
objs["h"] = this.images[i]["height"];
objs["title"] = this.images[i]["title"];
this.items.push(objs);
}
}
} catch (error) { }
}
}
//查看图
pswpElementInit(idx) {
if (this.pswpElement == null) {
this.pswpElement = document.querySelectorAll('.pswp')[0];
}
var _that = this;
// define options (if needed)
var options:any = {
// optionName: 'option value'
index: idx * 1, // start at first slide
shareEl : false,
fullscreenEl : false,
//关闭图片动画效果
getThumbBoundsFn: function(index) {
// find thumbnail element
var thumbnail = document.querySelectorAll('.gallery-' + _that._details +_that.g_id)[idx];
// get window scroll Y
var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
// optionally get horizontal scroll
// get position of element relative to viewport
var rect = thumbnail.getBoundingClientRect();
// w = width
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
},
};
// Initializes and opens PhotoSwipe
this.gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUI_Default, this.items, options);
this.gallery.listen('close', function () {
//你要监听关闭浏览事件的话
});
this.gallery.init();
}
}
//x-img.scss
x-img {
.imgContainer {
// 一张
.oneImgContainer {
margin-top: 10px;
width: 100%;
height: 18rem;
overflow: hidden;
button {
padding: 0;
}
img{width: 100%;}
}
//两张
//四张
.fourImgContainer,
.twoImgContainer {
width: 100%;
margin-top: 5px;
}
.many_four,
.many_two{
width: 48%;
float: left;
margin-right: 3px;
}
// 多张
.manyImgContainer {
width: 100%;
margin-top: .5rem;
margin-left: .9rem;
}
.many {
width: 30%;
padding: 0;
float: left;
margin-right: 3px;
img {
width: 100%;
height: 100%;
}
}
}
}
<!-- x-img.html -->
<div class="imgContainer" *ngIf="images.length>0">
<!--一张图片-->
<div class="oneImgContainer" *ngIf="images.length===1">
<div *ngFor="let image of images;let i = index" (click)="pswpElementInit(i)">
<img [class]="'gallery-'+ _details + g_id" [src]="image.src">
</div>
</div>
<!--两张图片-->
<div class="twoImgContainer" *ngIf="images.length===2">
<div class="many_two" *ngFor="let image of images;let i = index" (click)="pswpElementInit(i)">
<img [class]="'gallery-'+ _details + g_id" [src]="image.src">
</div>
<div class="clearFloat"></div>
</div>
<!--四张图片-->
<div class="fourImgContainer" *ngIf="images.length===4">
<div class="many_four" *ngFor="let image of images;let i = index" (click)="pswpElementInit(i)">
<img [class]="'gallery-'+ _details + g_id" [src]="image.src">
</div>
<div class="clearFloat"></div>
</div>
<!--多张图片-->
<div class="manyImgContainer" *ngIf="images.length!==1 && images.length!==4 && images.length!==2">
<div class="many" *ngFor="let image of images;let i = index" (click)="pswpElementInit(i)">
<img [class]="'gallery-'+ _details + g_id" [src]="image.src">
</div>
<div class="clearFloat"></div>
</div>
</div>
上面就是我根据我的实际需求，对x-img组件的构造
4、有必要说一下怎么用
在说怎么用之前，先把目光移到x-img.ts上，里面有几个
@Input() images:any = []; //包含图片的数组
@Input() _details:string = ""; //特征标记字符
@Input() g_id:string = ""; //缩略图所在元素 ID
这几个是我们自定义x-img组件接收的参数，先说一下_details和g_id，这两个默认值为""，是可选的，是因为要实现很多个多图展示（就像微博九宫格图），同时要实现photoswipe关闭大图时，图像回到缩略图位置的动画效果才添加的，可以不要。
_details是比方微博点进一个动态之后，再点进图片的动画效果，g_id是在一堆图片列表里区分。
当然，如果是pc网站的话，直接写一个方法找到离它最近的标签就好
images接收的数据对象的格式我把他定义成如下格式，数组里一个json就是一张图片，上面的代码并没有把缩略图和原图分开，因为博主服务器还没开始搭建，而是直接用了度娘的图片，原图地址的传入是在x-img.ts里的ngOnChanges(ch)函数里实现的，这个函数是个接口，这里不赘述了。
//images数据格式
export const img_data = [{
"src": "URL", //缩略图地址
"srcx": "URL", //原图地址
"height": 500, "width": 600,
"text":"图片提示文字"
}]
使用：
使用
最终效果（css布局懒得敲了）
最终效果.gif
要注意的点：
photoswipe需要的那一堆添加到DOM里的东西，也就是photoswipe-ui.js里的东西，最好在最高层，也就是整个APP的顶层，我是给加到了index.html里，之前放在app.html里，使用modalCtrl弹出的页面就无法显示
代码很简单，也有bug，看大家们否发现，欢迎指正_ !!!
网友评论