Image Viewer developed based on touch. js gesture library + zepto. js plug-in (slide, zoom, double-click zoom ),

Image Viewer developed based on touch. js gesture library + zepto. js plug-in (slide, zoom, double-click zoom ),

Recently, due to the need for Image Viewer for the company's projects, I searched the internet and found that there was very little information, so I decided to use Baidu's touch. js gesture library + zepto. js has written a small plug-in by itself, which enables sliding between the left and right sides, zooming with dual fingers, and double-clicking and zooming. Basically, this function works well, but sometimes it is still not smooth and will be improved in the future; I hope you can give good suggestions for poor writing. Thank you!

Source Code address: https://github.com/GLwen/molong_photoSwipe.git

Demo: http://runjs.cn/detail/iceaaogh

Molong.css

* {Padding: 0; margin: 0; list-style: none ;}. syswin-swipe-show {display: block ;}. syswin-swipe-hide {display: none;}/***** large image ****/. molong-swiper {position: fixed; top: 0; left: 0; border: 1px solid # 777e8c; overflow: hidden; z-index: 999 ;}. molong-swiper-item {float: left; overflow: scroll; background: #333333; text-align: center ;}. molong-swiper-item. img-div {background-size: contain; background-position: center; background-repeat: no-repeat ;}. molong-img-list {list-style: none; padding: 0; margin: 0 ;}. molong-img-list li {float: left; position: relative; margin-right: 10px ;}. molong-img-list li. img-bg {display: block; width: 100%; height: 100%; border: none; background-size: cover; background-position: center; background-repeat: no-repeat ;}

Molong. js

Var molong = molong? Molong: {}; molong. photoSwipe = function (options) {// Add an independent container var bigContainerString = "<div class = \" molong-swiper syswin-swipe-hide \ ">" + "<ul id = \ "bigImg \"> </ul> "+" </div> "; $ ("body "). append (bigContainerString); var swipeSelf = this; var screenHeight = window. innerHeight; var screenWidth = window. innerWidth; var minImageWidth = screenWidth * 0.25; // display the width and height of the small image var bigIndex = 0; // The big image index var bigImgOffset = 0; // The big image slides Location var bigImgLength = 0; // number of large charts // scaling setting var initialScale = 1; // initial scaling ratio var currentScale = 1; // current scaling ratio var pinchSelf; // The currently scaled object var dragSelf; // The currently dragged object // The parsing parameter swipeSelf. options = $. extend ({listContainer: $ ("ul"), swipeRigth: true, swipeLeft: true, pinch: true}, options); // container swipeSelf. listContainer = options. listContainer; // small graph container swipeSelf. swipeContainer = $ ("# bigImg"); // large image container // block the default touch event of touchstart. on (this. SwipeContainer, 'touchstart', function (ev) {ev. preventDefault () ;}); swipeSelf.swipeContainer.css ("-webkit-transition", "all sizes 0.3 s"); // sets an animation event // displays a large image swipeSelf. showBigImg = function () {var imgs = swipeSelf. listContainer. find ("li"); var bigImgsUrl = []; var bigImgString = ""; bigImgLength = imgs. length; bigImgOffset =-screenWidth * bigIndex; for (var I = 0; I <bigImgLength; I ++) {var bigImgUrl = $ (imgs [I]). attr ("big -Url "); bigImgsUrl. push (bigImgUrl); bigImgString + = '<li class = "molong-swiper-item"> <div class = "img-div" style = "background-image: url ('+ bigImgUrl +') "> </div> </li> ';} swipeSelf.swipeContainer.html (bigImgString); swipeSelf. swipeContainer. height (screenHeight); swipeSelf. swipeContainer. width (screenWidth * bigImgLength); $ (". molong-swiper-item "). height (screenHeight); $ (". molong-swiper-item "). width (screenWi Dth); $ (". img-div "). height (screenHeight); $ (". img-div "). width (screenWidth); swipeSelf.swipeContainer.css ("-webkit-transform", "translate3d (" + bigImgOffset + "px, 0, 0)"); $ (". molong-swiper "). show (); // Add event listening, listen to view the large image if (swipeSelf. listenShow) {swipeSelf. listenShow () ;}/// hide the swipeSelf image. hideBigImg = function () {$ (". molong-swiper "). hide (); swipeSelf.swipeContainer.html (""); if (swipeSelf. listenHide) {swipeSe Lf. listenHide () ;}}// right-sliding swipeSelf. swipeRight = function () {touch. on (swipeSelf. swipeContainer, 'swiperight ', "li", function (ev) {console. log ("swiperight"); if (swipeSelf. options. swipeRigth) {// $ (". img-div ").css ("-webkit-transform "," translate3d (0px, 0px, 0px) "); // move the element to reset swipeSelf. dx = 0; swipeSelf. dy = 0; console. log ("slide to the right. "); if (pinchSelf) {pinchSelf. style. webkitTransform = 'scale (1) '; currentScale = 1 ;} BigImgOffset + = screenWidth; bigImgOffset = bigImgOffset> = 0? 0: bigImgOffset; swipeSelf.swipeContainer.css ("-webkit-transition", "all Versions 0.5 s"); // sets the animation event swipeSelf.swipeContainer.css ("-webkit-transform ", "translate3d (" + bigImgOffset + "px,)") ;}}// swipeSelf on the left. swipeLeft = function () {touch. on (swipeSelf. swipeContainer, 'swipeleft ', 'lil', function (ev) {console. log ("swipeleft"); if (swipeSelf. options. swipeLeft) {console. log ("sliding to the left. "); // $ (". img-div "developer.css ("-web Kit-transform "," translate3d (0px, 0px, 0px) "); // move the element to reset swipeSelf. dx = 0; swipeSelf. dy = 0; if (pinchSelf) {pinchSelf. style. webkitTransform = 'scale (1) '; currentScale = 1;} bigImgOffset-= screenWidth; bigImgOffset = Math. abs (bigImgOffset)> = (screenWidth * bigImgLength )? (-ScreenWidth * (bigImgLength-1): bigImgOffset; swipeSelf.swipeContainer.css ("-webkit-transition", "all sizes 0.5 s "); // set the animation event swipeSelf.swipeContainer.css ("-webkit-transform", "translate3d (" + bigImgOffset + "px,)") ;}}// scale swipeSelf. pinche = function () {touch. on (swipeSelf. swipeContainer, 'pinchend ',". img-div ", function (ev) {console. log ("pinchend"); if (swipeSelf. options. pinch) {pinchSelf = this; curren TScale = ev. scale-1; currentScale = initialScale + currentScale; currentScale = currentScale> 2? 2: currentScale; currentScale = currentScale <1? 1: currentScale; swipeSelf.swipeContainer.css ("-webkit-transition", "all sizes 0.1 s"); // set the animation event this. style. webkitTransform = 'scale ('+ currentScale +') '; console. log ("Current scaling ratio:" + currentScale + ". ") ;}}) ;}// double-click to zoom in and out swipeSelf. doubletap = function () {touch. on (swipeSelf. swipeContainer, 'doubletap ','. img-div ', function (ev) {// console. log (ev. type); pinchSelf = this; currentScale = currentScale> 1? 2:1; if (currentScale = 1) {currentScale = 2; swipeSelf.swipeContainer.css ("-webkit-transition", "all sizes 0.1 s"); // sets the animation event this. style. webkitTransform = 'scale ('+ currentScale +') ';} else {currentScale = 1; swipeSelf.swipeContainer.css ("-webkit-transition", "all sizes 0.1 s "); // set the animation event this. style. webkitTransform = 'scale ('+ currentScale +') ';}}) ;}// drag and drop swipeSelf. dx = 0; swipeSelf. dy = 0; swipeSelf. drag = function () {touch. on (swipeSelf. swipeContainer, 'drag ','. img-div ', function (ev) {if (currentScale> 1) {console. log ("drag"); dragSelf = this; swipeSelf. options. swipeLeft = false; swipeSelf. options. swipeRigth = false; swipeSelf. dx = swipeSelf. dx | 0; swipeSelf. dy = swipeSelf. dy | 0; console. log ("Current x value:" + swipeSelf. dx + ", the current y value is:" + swipeSelf. dy + ". "); var offx = swipeSelf. dx + ev. x + "px"; var offy = swipeSelf. dy + ev. y + "px"; this. style. webkitTransform = "translate3d (" + offx + "," + offy + ", 0)" + "scale (" + currentScale + ")" ;}}); touch. on (swipeSelf. swipeContainer, 'dragend ','. img-div ', function (ev) {console. log ("dragend"); swipeSelf. dx + = ev. x; swipeSelf. dy + = ev. y; swipeSelf. options. swipeLeft = true; swipeSelf. options. swipeRigth = true;});} // trigger, view the larger image swipeSelf. init = function () {// set the small figure swipeSelf. listContainer. find (". img-bg "). width (minImageWidth); swipeSelf. listContainer. find (". img-bg "). height (minImageWidth); // Add a binding to view the event swipeSelf. listContainer. on ("tap", "li", function () {bigIndex = $ (this ). index (); swipeSelf. showBigImg () ;}); swipeSelf. swipeRight (); // right-sliding swipeSelf. swipeLeft (); // move swipeSelf to the left. pinche (); // scale swipeSelf. drag (); // drag swipeSelf. doubletap (); // double-click to zoom in and out} // event listening swipeSelf. listen = function (type, callback) {swipeSelf [type] = callback ;}}

Index.html

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.