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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.