java实现预览图片,点击实现下一张

项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果

1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件

2.先上效果图

加载页面的效果

设置每个图片的预览效果,可自定义尺寸,当点击图片时

原图在页面中间弹出,可以点击灰色部分或者图片右上角的  X  号关闭

 

项目用到的前端插件   jquerygalpop,到官网去下载

http://plugins.jquery.com/galpop/

准备完毕后将插件放到项目中,在需要的页面引入即可

简单的前台页面写法

这各页面是一个小demo,并不是我项目中的写法,但是稍加改动即可用在项目中,

第一步:引入插件

第二部:写一个a标签,路径上可以写一个图片路径也可以写一个请求,到后台读取图片流返回到前台

第三步:a标签内其他属性加上

第四部:a标签体内写一个img标签,用来预览,如果不要要预览则不用写,路径也是同上,写一个图片地址或请求,宽高等属性自定义即可

第五部:调用一下galpop()方法,如上图展示的就可以,这样前台页面就准备完毕

第六步:如果前端页面展示的图片需要从后台读取,则路径要写一个请求,后台代码非常简单,如下

6.1前台请求

路径上写的是一个请求,传一个uuid参数

6.2后台响应

这样就实现了

如果应用到项目中,发现没有 向上、向下、加载、关闭 的按钮图标,说明有图片没有引入

在项目中将图标的图片引入

galpop文件夹下是js和css插件

images下是四个图标文件,具体要看你项目中加载这四个图标的路径,根据路径创建文件夹将图标放入,即可自动引入