# layui-Magnifier

**Repository Path**: liunk/layui-Magnifier

## Basic Information

- **Project Name**: layui-Magnifier
- **Description**: 基于layui的放大镜插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 8
- **Created**: 2018-08-28
- **Last Updated**: 2024-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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