yzhanImageViewer是一个响应灵敏、移动友好、基于jQuery的图像查看器插件,使访问者能够以全屏模式查看所有分组的图像。
1.将mtfPicViewer插件的文件插入HTML页面。
- <link rel="stylesheet" href="/path/to/dist/jquery.yzhanimageviewer.min.css" />
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/dist/jquery.yzhanimageviewer.min.js"></script>
2.将一组图像添加到容器元素中。
- <div class="example">
- <div>
- <img src="1.jpg" alt="Image 1">
- <img src="2.jpg" alt="Image 2">
- <img src="3.jpg" alt="Image 3">
- </div>
- </div>
3.将插件连接到顶部容器并完成。
- $('.example').yzhanImageViewer({
- selector: 'img',
- attrSelector: 'src',
- parentSelector: 'div'
- });
4.将自定义CSS类附加到图像查看器中。
- $('.example').mtfpicviewer({
- selector: 'img',
- attrSelector: 'src',
- parentSelector: 'div',
- className: 'pic-viewer'
- });
5.自定义控件。
- $('.example').mtfpicviewer({
- selector: 'img',
- attrSelector: 'src',
- parentSelector: 'div',
- controls: {
- reverseDrag: {
- x: false,
- y: false
- },
- canChange: true
- },
- });
6.回调函数。
- $('.example').mtfpicviewer({
- onChange: function(curIndex, preIndex) {
- // do something
- },
- onOpen: function(curIndex) {
- // do something
- },
- onClose: function(curIndex) {
- // do something
- }
- });
2022-08-18