项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果
1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件
2.先上效果图
加载页面的效果
设置每个图片的预览效果,可自定义尺寸,当点击图片时
原图在页面中间弹出,可以点击灰色部分或者图片右上角的 X 号关闭
项目用到的前端插件 jquerygalpop,到官网去下载
/galpop/
准备完毕后将插件放到项目中,在需要的页面引入即可
简单的前台页面写法
这各页面是一个小demo,并不是我项目中的写法,但是稍加改动即可用在项目中,
第一步:引入插件
第二部:写一个a标签,路径上可以写一个图片路径也可以写一个请求,到后台读取图片流返回到前台
第三步:a标签内其他属性加上
第四部:a标签体内写一个img标签,用来预览,如果不要要预览则不用写,路径也是同上,写一个图片地址或请求,宽高等属性自定义即可
第五部:调用一下galpop()方法,如上图展示的就可以,这样前台页面就准备完毕
第六步:如果前端页面展示的图片需要从后台读取,则路径要写一个请求,后台代码非常简单,如下
6.1前台请求
路径上写的是一个请求,传一个uuid参数
6.2后台响应
这样就实现了
如果应用到项目中,发现没有 向上、向下、加载、关闭 的按钮图标,说明有图片没有引入
在项目中将图标的图片引入
galpop文件夹下是js和css插件
images下是四个图标文件,具体要看你项目中加载这四个图标的路径,根据路径创建文件夹将图标放入,即可自动引入
