江湖家居至尊版手机图片预览插件photoswipe使用原理

PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于HTML和Javascript实现，无需依赖任何第三方库，可应用于图集、相册展示等场景。

江湖家居V6.0至尊版手机版装修案例图片内容页使用PhotoSwipe 3.0.5版插件，其photoswipe使用方法如下 ：

1.引入css和js文件。

在html中依次加载资源包中如下css和js文件：

<link rel="stylesheet" href="%THEME%/mobile/static/photoswipe/photoswipe.css" />

<script type="text/javascript" src="%THEME%/mobile/static/script/klass.js"></script>
<script type="text/javascript" src="%THEME%/mobile/static/photoswipe/photoswipe.js"></script>

除了加载photoswipe核心js和css外，还需要定制photoswipe的UI样式，提供小图标和动画效果。

2.添加PhotoSwipe元素到html中

在页面的</body>中直接添加html代码，如果是用jquery的话，应该这样写：

<div id="main" role="main">
      <ul id="Gallery" class="gallery">
        <{foreach $photos as $v}>
        <li><a href="<{$pager.img}>/<{$v.photo}>"><img src="<{$pager.img}>/<{$v.photo}>_thumb.jpg" alt="<{$v.title}>"></a>
        <{/foreach}>  
      </ul>
</div>
<div class="case_bottom" id="case_bottom_toolbar" style="z-index:3000;position:absolute;bottom:0px;display:none;padding:5px; width:100%; text-align:center; color:#fff;"><p>喜欢此设计？<a href="<{link ctl='mobile/tenders'}>" style=" padding:0 0.1rem; margin-left:0.05rem;" class="btn mainbtn">免费申请设计</a></p></div>

注意，上述代码中的 id="Gallery" class="gallery 不可随意更改。

3.初始化，即使用js部分调用该插件

文件和DOM都准备好之后，使用js来调用PhotoSwipe：

<script type="text/javascript">
(function(window, PhotoSwipe){
    document.addEventListener('DOMContentLoaded', function(){
        var options = {
            autoStartSlideshow : true,
            allowUserZoom:false,
            captionAndToolbarAutoHideDelay: 0,
            preventHide:true,
            zIndex : 100,
            preventDefaultTouchEvents:true,
            captionAndToolbarOpacity:0,
            captionAndToolbarHide:false,
            imageScaleMethod:"fitNoUpscale",
            getToolbar: function(){               
                return '';
                //window.Code.PhotoSwipe.Toolbar.removeEventHandlers();
                return '<div class="case_bottom"><p>喜欢此设计？<button id="case_tenders_btn" class="btn mainbtn">免费申请设计</button></p></div>';
            },
            getImageCaption: function(el){  
                return "【<{$case.title}>】"+window.jQuery(el).find("img").attr("alt");  
            }  
        },
        instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
        $("#Gallery li a").get(0).click();
        $("#case_bottom_toolbar").show();      
    }, false);
}(window, window.Code.PhotoSwipe));
</script>

也可以使用： $("#Gallery a").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内显示，可能非全屏。   

自定义函数

getToolbar: function(){
/*返回 要在Toolbar之中显示的HTML字符串*/ }

, getImageSource: function(el){
/* 告诉 gallery如何获取图片的src, 默认情况下,gallery假设你使用<a>标签包装了<img>缩略图，而<a>标签的href属性即为完整图片的URL。 此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。 */ return el.getAttribute('rel');
}

, getImageCaption: function(el){
/** 如同 getImageSource 方法一样，此方法返回图片的标题，默认情况下gallery查找图片的alt 属性。 */ }

, getImageMetaData: function(el){
/** 如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用 */ return {
longDescription: el.getAttribute(el, 'data-long-description') }
}

结束语
关于只显示图片滑动控件不显示图片列表的情况
正常来说源码内部图片滑动被激活之后，html的那段id为Gallery的整个内容就会被display:none，但是使用扩展模式的话，可能就需要手动的自己写display为none了，没太仔细研究源码，单这也算是可以解决的笨方法吧。