# ImagePreview

**Repository Path**: lanyue/ImagePreview

## Basic Information

- **Project Name**: ImagePreview
- **Description**: js图片预览简洁小插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2015-06-07
- **Last Updated**: 2024-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ImagePreview
# js图片预览简洁小插件
#文件介绍：
```javascript
ImagePreview.js---------------预览图片插件主文件
ImagePreview.css--------------预览图片样式文件
```
#使用方法：
```javascript
var image=new ImagePreview();----创建预览对象
image.Image(imgBoxObj);----------加载资源到预览插件(imgBoxObj为图片盒子需要按照格式放置图片才能正确加载)
image.show(num);-----------------显示第几张图片(num为数字)
```
如果你想要创建一个图片预览，那你只要这样就可以了:
```javascript
onload=function(){
		var image=new ImagePreview();
		image.Image(document.getElementById("imgs"));
		document.getElementById("show").onclick=function(){
			image.show(0);
		}	
	}
```
当然你的加入ImagePreview.js和ImagePreview.css这两个文件（不依赖jquery哦）
###html部分你需要这样子放置图片：
```html

<div id="imgs">
	<div class="img_k"><img src="xxxx.jpg" class="img"></div>
	<div class="img_k"><img src="xxxx.jpg" class="img"></div>
	<div class="img_k"><img src="xxxx.gif" class="img"></div>
    .....
</div>
```

##效果图：
![img](demo/2015-06-07_212927.jpg)
![img](demo/2015-06-07_213017.jpg)
![img](demo/2015-06-07_213033.jpg)
![img](demo/2015-06-07_213232.jpg)