front end image preview for mobile-web application.
release/image-preview
directory is built for different module-system , include AMD,CommonJS,ES6,UMD,IIFE. You can choose one adapt to your project.script (in iife or umd module system,use namespace imagePreviewModule):
<script src="js/image-preview-iife.js">
<script>
new imagePreviewModule.ImagePreview({
// something same with below usage
})
</script>
esmodule:
import {ImagePreview} from 'js/image-preview-esm.js'
html:
<div class="imageWraper">
<img data-src="/images/IMG_0512.JPG" src="/images/IMG_0512.JPG">
<img data-src="/images/main_body3.png" src="/images/main_body3.png">
</div>
javascript:
//just
let imgObj = new ImagePreview({
selector:`.imageWraper img`
})
//or mvvm project
let imgObj = new ImagePreview({
curImg:'imgsrc',
imgs:[
'imgsrc',
'imgsrc',
'imgsrc'
]
})
//then show n-th picture,use
imgObj.show(n);
// distroy instance. remove HTML generated by this ImagePreview instance
// for better performance, then you can set imgObj = null;
imgObj.distory();
yon can join qq-group 977121370 and chat with me.
Author: daxiazilong
Source Code: https://github.com/daxiazilong/imagePreview
#javascript