Viewer.js –JS/jQuery图片查看器-实现多张图片预览组件

最新推荐文章于 2024-08-06 17:41:12 发布

CharlieChen1989

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量6.9k

点赞数 2

分类专栏：前端文章标签：前端

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考和下载：http://www.dowebok.com/192.html

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件

Viewer.js 提供了纯 JS 版本和 jQuery 版本，您可以任意选择。

GitHub 地址：

JS 版本：https://github.com/fengyuanchen/viewerjs
jQuery 版本：https://github.com/fengyuanchen/viewer

JSP源码片段：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix ="c" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${siteUrl }/css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok { margin: 0 auto; font-size: 0;}
#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#dowebok li img { width: 100%;}
</style>
</head>
<body>

<ul id="dowebok">

<c:forEach var="item" items="${attachList}" varStatus="i">

<li><img data-original="${fileUrl}${item.attachPath}" src="${fileUrl}${item.attachPath}" alt="${item.name}"></li>

</c:forEach>

</ul>

<script src="${siteUrl }/lib/jquery-1.7.2.min.js"></script>
<script src="${siteUrl }/js/viewer-jquery.min.js"></script>
<script>
$(function() {
	$('#dowebok').viewer({
		url: 'data-original',
	});
});
</script>
</body>

</html>