html photoswipe原理,H5使用PhotoSwipe预览图片

如果在h5上想要实现类似app上的点击预览图片并且可以放大缩小这种功能，确实比在app上实现起来更为麻烦，但是有了PhotoSwipe(https://github.com/dimsemenov/PhotoSwipe)这个三方库，实现起来就要方便简单的多了。

我在的前端项目使用的是vue-cli搭建的框架，所以在使用PhotoSwipe的时候，只需要NPM或者CNPM管理就可以了：

npm install photoswipe

当在项目中安装了photoswipe之后，只需要在对应的.vue文件中引入即可进行使用：

import PhotoSwipe from 'photoswipe/dist/photoswipe'

import UI from 'photoswipe/dist/photoswipe-ui-default'

import 'photoswipe/dist/photoswipe.css'

import 'photoswipe/dist/default-skin/default-skin.css'

当然，这个时候，只是把photoswipe引入了template里面，还没有开始正式使用，接下来，只需要在项目的标签的唯一子标签

现在，photoswip基本的需要的都已经有了，接下来，就是给你需要点击放大预览的图片或标签绑定预览的事件，其中事件的代码如下：

imagePreview (currentIndex, imageArray) {

var items = []

imageArray((item, index, array) => {

items.push({

src: item.picUrl,

w: item.width,

h: item.height

})

var options = {

index: currentIndex

}

var pswpElement = this.$refs.pswb

var gallery = new PhotoSwipe(pswpElement, UI, items, options)

gallery.init()

}

可能大家在这里会发现，使用photoswipe预览图片，一个不好的东西就是，你自己的图片数组必须要保证有图片的大小即长款，如果说有负责管理图片素材的后台，可能会比较方便一些，在上传图片的之后即可以完成对图片素材资源的长款读取和保存；如果是没有的话，确实比较麻烦。

当然，最后一步，就是就是給需要点击的图片标签使用vue的@click事件，绑定imagePreview(currentIndex, imageArray)这个事件。

注意：本项目由于使用的是vue进行管理，所以在我的标签

这个地方的时候，已经使用先创建了pswb标签了，所以，在我的imagePreview事件中，我使用var pswpElement = this.$refs.pswb直接就拿到了这个标签，并且指定使用这个标签，作为photoswipe的容器。

html photoswipe原理,H5使用PhotoSwipe预览图片相关推荐

使用微信内置浏览器预览图片
在微信H5开发中预览图片,可以使用其他的一些图片预览插件,但是这样却不能把其中的某张图片发送给好友.对于这种情况可以使用微信内置浏览器图片预览功能,就可以解决这个问题.不说废话直接看代码: 1.首先 ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
h5,移动端预览pdf文件，使用pdfh5插件
苹果机是可以直接打开一个 pdf的网络路径进行预览的问题是安卓直接打开的话就跳转到下载页面或者那个大哥可以找一个h5 页面可以预览word文档 (其实吧也可以只要你愿意花钱还是能 ...
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片点击图片查看大图,点击图片右上角"×"删除此图点击 ...
h5页面上传图片java_[Java教程]h5上传图片及预览_星空网
h5上传图片及预览 2016-04-22 0 第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需 ...
小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁，支持 UI 自定义、支持跨进程回调
YImagePicker 项目地址:yangpeixing/YImagePicker 简介: 小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁,支持 UI 自定义.支持跨进程回调 ...
php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
oracle如何上传图片,js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出 ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...

html photoswipe原理,H5使用PhotoSwipe预览图片

html photoswipe原理,H5使用PhotoSwipe预览图片相关推荐

最新文章

热门文章