1 Star 9 Fork 6

流年酷 / layui-Magnifier

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

layui-Magnifier

项目介绍

基于layui的放大镜插件

使用方法

1.下载文件后,把Magnifier整个文件放在你的资源目录下 2.放大镜css文件可以在Magnifier.js中修改(默认是自动加载的可以不理会)

layui.link('../Magnifier/css/MangniFier.css');

插件定义方法有所改变,请悉知,如下

 layui.config({
          base: '../Magnifier/' //假设这是你存放拓展模块的根目录
      }).extend({
          Magnifier: 'js/Magnifier'
          ,Event:'js/Event'  //你存放插件的目录
      });
      layui.use(['layer', 'form','Event','Magnifier'], function(){
          var layer =layui.layer
              ,evt =new layui.Event()
              ,Magnifier =new layui.Magnifier(evt,{
              largeWrapper: document.getElementById('gallery-preview'),<!--预览图容器(必须)-->
          });
          Magnifier.attach({
              thumb: '#lnk_thumb',//需要使用放大镜的图片元素(#id || .class)
              zoom:3,//缩放比例
          });

      });

配置信息

thumb(string):ID or class of the image element to magnify preceded by "#" or "."

large(string):large image URL

largeWrapper(string):ID of the element where large image will be appended

zoom(int):initial zoom level

zoomable(bool):enable zoom in / out using mouse wheel

onthumbenter(callback):function to call on thumbnail enter event

onthumbmove(callback):function to call on thumbnail move event

onthumbleave(callback):function to call on thumbnail leave event

onzoom(callback):function to call on zoom event

具体可查看官方Magnifier

Repository Comments ( 0 )

Sign in to post a comment

About

基于layui的放大镜插件 expand collapse
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/liunk/layui-Magnifier.git
git@gitee.com:liunk/layui-Magnifier.git
liunk
layui-Magnifier
layui-Magnifier
master

Search