仿微信:点击图片放大,手势操作
    photoSwipe:
    npm install photoswipe —save
    http://photoswipe.com/
    可以通过Bower(bower install photoswipe)或NPM(npm install photoswipe)来安装它。

    1. allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = true
    2. autoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = false
    3. allowRotationOnUserZoom: 只有 iOS 支持 - 允许用户在缩放/平移模式下 用手势旋转图像. 默认值 = false
    4. backButtonHideEnabled: 按返回键隐藏相册幻灯片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默认值 = true
    5. captionAndToolbarAutoHideDelay: 标题栏和工具栏自动隐藏的延迟时间. 默认值为 = 5000(毫秒). 如果设为 0 则不会自动隐藏(tap/单击切换显隐)
    6. captionAndToolbarFlipPosition: 标题栏和工具栏切换位置(让 caption显示在底部而 toolbar显示在顶部). 默认值 = false
    7. captionAndToolbarHide: 隐藏 标题栏和工具栏. 默认值 = false
    8. captionAndToolbarOpacity: 标题栏和工具栏 的透明度(0-1). 默认值 = 0.8
    9. captionAndToolbarShowEmptyCaptions: 即使当前图片的标题是空,也显示标题栏. 默认值 = true
    10. cacheMode: 缓存模式,Code.PhotoSwipe.Cache.Mode.normal (默认,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激进,积极). 决定 PhotoSwipe 如何管理图片缓存 cache.
    11. Aggressive 模式将会积极地地设置非 “当前,上一张,下一张”的图片为空的类型. 对于老版本iOS 浏览器下的大图片内存溢出将会很有用. 大多数情况下,normal模式就可以了。
    12. doubleTapSpeed: 双击的最大间隔. 默认值 = 300(毫秒)
    13. doubleTapZoomLevel: 当用户双击的时候,放大的倍数, 默认的 “zoom-in”(拉近) 级别. 默认值 = 2.5
    14. enableDrag: 允许拖动上一张/下一张图片到当前界面. 默认值 = true
    15. enableKeyboard: 允许键盘操作(左右箭头切换,Esc退出,Enter自动播放,空格键 显/隐标题栏/退出). 默认 = true
    16. enableMouseWheel: 允许鼠标滚轮操作. 默认 = true
    17. fadeInSpeed: 淡入效果元素的速度(持续时间),毫秒. 默认 = 250
    18. fadeOutSpeed: 淡出效果元素的速度(持续时间),毫秒. 默认 = 250
    19. imageScaleMethod: 图片缩放方法(模式). 可选值: “fit”, “fitNoUpscale” 和 “zoom”. 模式”fit” 保证图像适应屏幕. “fitNoUpscale” 和 “fit”类似但是不会放大图片. “zoom”将图片全屏, 但有可能图片缩放不是等比例的. 默认 = “fit”
    20. invertMouseWheel: 反转鼠标滚轮。默认情况下,鼠标向下滚动将切换到下一张,向上切换到上一张 . 默认 = false
    21. jQueryMobile: 指示 PhotoSwipe 是否集成进了 jQuery Mobile 项目. 默认情况下, PhotoSwipe will try and work this out for you
    22. jQueryMobileDialogHash: jQuery Mobile的window,dialog页面 所使用的hash标签。 默认值 = “&ui-state=dialog”
    23. loop: 相册是否自动循环. 默认 = true
    24. margin: 两张图之间的间隔,单位是像素. 默认 = 20
    25. maxUserZoom: 最大放大倍数. 默认 = 5.0 (设置为0将被忽略)
    26. minUserZoom: 图像最小的缩小倍数. 默认 = 0.5 (设置为0将会忽略)
    27. mouseWheelSpeed: 响应鼠标滚轮的灵敏度. 默认 = 500(毫秒)
    28. nextPreviousSlideSpeed: 当点击上一张,下一张按钮后,延迟多少毫秒执行切换. 默认 = 0 (立即切换)
    29. preventHide: 阻止用户关闭 PhotoSwipe. 同时也会隐藏 工具栏上的”close”关闭按钮. 在独享的页面使用 (示例是源码中的 examples/08-exclusive-mode.html). 默认 = false
    30. preventSlideshow: 阻止自动播放模式. 同时也会隐藏工具栏里的播放按钮. 默认 = false
    31. slideshowDelay: 自动播放模式下,多长时间播放下一张. Default = 3000(毫秒)
    32. slideSpeed: 图片滑进视图的时间. 默认 = 250(毫秒)
    33. swipeThreshold: 手指滑动多少像素才触发一个 swipe 手势事件. 默认 = 50
    34. swipeTimeThreshold: 定义触发swipe(滑动)手势的最大毫秒数,太慢了则不会触发滑动,只会拖动当前照片的位置. 默认 = 250
    35. slideTimingFunction: 滑动时的 Easing function . 默认 = “ease-out”
    36. zIndex: 初始的zIndex值. 默认 = 1000
    37. enableUIWebViewRepositionTimeout: 检查设备的方向是否改变。默认 = false
    38. uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默认 = 500(毫秒)
    39. preventDefaultTouchEvents: 阻止默认的touch事件,比如页面滚动。 默认 = true
    40. target: 必须是一个合法的DOM元素(如DIV)。默认是window(全页面)。而如果是某个低级别的DOM,则在DOM内显示,可能非全屏。

    封装一次,多次调用????
    http://blog.csdn.net/u010674395/article/details/78627950?locationNum=8&fps=1
    vue-cli中使用vue-preview:
    https://www.npmjs.com/package/vue-preview
    npm i vue-preview -save
    https://www.cnblogs.com/mrszhou/p/7899887.html
    在点击图片的时候(onThumbnailsClick)调用 autodata_size() 函数
    //autodata_size()应该在点击图片的时候调用,不应该立即执行,否则会出现获取不到图片宽高的问题。
    function auto_data_size(){
    $(“figure img”).each(function() {
    var imgs = new Image();
    imgs.src = $(this).attr(“src”);
    var w = imgs.width,
    h =imgs.height;
    $(this).parent(“a”).attr(“data-size”,“”).attr(“data-size”,w+“x”+h);
    })
    };