PhotoSwipe中文API(二)

配置

选项是在键 - 值对添加作为参数传递给PhotoSwipe构造，例如通过：

 var options = {
     index: 3,
     escKey: false,

     // ui option
     timeToIdle: 4000
 };
 var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
 gallery.init();

 // Note that options object is cloned during the initialization.
 // But you can access it via `gallery.options`.
 // For example, to dynamically change `escKey`:
 gallery.options.escKey = false;

 // `options.escKey = false` will not work

核心

index integer 0

开始放映指数。 0是第一滑动。必须是整数，而不是字符串。

getThumbBoundsFn function undefined

功能应该与坐标从初始变焦的动画将启动（或缩小出动画将结束）返回一个对象。

对象应包含三个属性：X（X位置，相对于文档），Y（Y位置，相对于文档），W（元素的宽度）。高度会自动根据大的图像大小来计算。例如，如果您返回{X：0，Y：0，W：50}缩放动画将在你的页面的左上角开始。

函数有一个参数 - 即打开或关闭项目的索引。

在非模态模式，相对于视口模板的位置应该从x和y中减去。看常见问题以获取更多信息。

例如，计算缩略图的位置：

 getThumbBoundsFn: function(index) {

     // find thumbnail element
     var thumbnail = document.querySelectorAll('.my-gallery-thumbnails')[index];

     // get window scroll Y
     var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
     // optionally get horizontal scroll

     // get position of element relative to viewport
     var rect = thumbnail.getBoundingClientRect(); 

     // w = width
     return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};

     // Good guide on how to get element coordinates:
     // http://javascript.info/tutorial/coordinates
 }

如果你的小缩略图的尺寸不匹配大的图像尺寸，考虑启用变焦+淡出过渡。您可以通过添加选项showHideOpacity做到这一点：真（尝试将其添加到上面CodePen来测试它的外观）。或通过添加hideAnimationDuration完全禁用过渡：0，showAnimationDuration：0。这个常见问题中的更多信息。

如果你想利用动画时不透明度为“隐藏”小缩略图：0，不可见性：隐藏或显示：无。不要强迫油漆和布局在动画的开头，以避免滞后。

showHideOpacity boolean false

如果设置为false：背景透明度和图像规模将动画（图像透明度始终为1）。如果设置为true：根PhotoSwipe元素的不透明性和图像规模将动画。
为了让刚转型的不透明度（未经调整），不要定义getThumbBoundsFn选项。

showAnimationDuration integer 333

以毫秒为单位的初始放大的过渡时间。设置为0来禁用。除了这个JS选项，你也需要改变PhotoSwipe CSS文件转换时间：

 .pswp--animate_opacity,
 .pswp__bg,
 .pswp__caption,
 .pswp__top-bar,
 .pswp--has_mouse .pswp__button--arrow--left,
 .pswp--has_mouse .pswp__button--arrow--right{
     -webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1);
     transition: opacity 333ms cubic-bezier(.4,0,.22,1);
 }

如果你使用的无礼，你只需要更改主settings.scss过渡时间变量。

hideAnimationDuration integer 333

同样作为一个选项，只是关闭（缩放出）转型。 PhotoSwipe被打开后PSWP - 公开课将被添加到根元素，你可以用它在CSS中使用不同的过渡时间。

bgOpacity number 1

背景（.pswp_bg）透明度。应该是从0到1，即0.7。此样式是通过JS限定，而不是通过CSS，因为此值用于一些基于姿势的过渡。

spacing number 0.12

幻灯片之间的间距比。例如，0.12将呈现为滑动视口宽度的12％（四舍五入）。

allowPanToNext boolean true

允许刷卡导航到下一个/上一个项目时，当前项目被放大。选项始终是在没有硬件支持触控设备假的。

maxSpreadZoom number 2

进行扩展（变焦）手势时，最大缩放级别。 2意味着图像可以从原始尺寸被放大2倍。尽量避免在这里巨大的价值，因为过大的图像可以在移动导致内存问题（特别是在iOS）。

getDoubleTapZoom function

函数将返回缩放级别的图像将双击手势之后进行缩放其中，或图像本身，当用户点击缩放图标，或者鼠标点击。如果返回1的图像将被放大到原来的大小。

Default value:

 getDoubleTapZoom: function(isMouseClick, item) {

     // isMouseClick          - true if mouse, false if double-tap
     // item                  - slide object that is zoomed, usually current
     // item.initialZoomLevel - initial scale ratio of image
     //                         e.g. if viewport is 700px and image is 1400px,
     //                              initialZoomLevel will be 0.5

     if(isMouseClick) {

         // is mouse click on image or zoom icon

         // zoom to original
         return 1;

         // e.g. for 1400px image:
         // 0.5 - zooms to 700px
         // 2   - zooms to 2800px

     } else {

         // is double-tap

         // zoom to original if initial zoom is less than 0.7x,
         // otherwise to 1.5x, to make sure that double-tap gesture always zooms image
         return item.initialZoomLevel < 0.7 ? 1 : 1.5;
     }
 }

函数被调用每一个放大的动画启动的时间。可以随意根据自己的尺寸和屏幕的DPI不同的图像返回不同的值。

loop boolean true

循环使用滑动手势时，幻灯片。如果设置为true，你就可以从上轻扫到第一张图像。选项始终是假的时，有不到3张幻灯片。

此选项没有关系箭头导航。箭头循环永久开启。您可以修改通过自定义UI此行为。

pinchToClose boolean true

捏关闭画廊的姿态。画廊的背景将逐渐淡出作为用户缩小。当手势完成后，画廊将关闭。

closeOnScroll boolean true

在页面滚动关闭画廊。选项可只是没有硬件支持触控设备。

closeOnVerticalDrag boolean true

垂直拖动关闭画廊时，当影像未缩放。始终为假时使用鼠标。

mouseUsed boolean false

选项允许如果使用与否鼠标就预定义。有些PhotoSwipe功能依赖于它，例如默认的UI左/右箭头会显示使用鼠标之后。如果设置为false，PhotoSwipe将开始检测时，鼠标的使用本身，当鼠标被发现mouseUsed事件触发。

escKey boolean true

键盘ESC键关闭PhotoSwipe。选项可以更改动态（yourPhotoSwipeInstance.options.escKey= FALSE）。

arrowKeys boolean true

键盘向左或向右箭头键导航。选项可以动态改变（yourPhotoSwipeInstance.options.arrowKeys=假）。

history boolean true

如果设置为false禁用历史模块（后退按钮关闭画廊，独特的URL为每张幻灯片）。您也可以刚刚从构建排除history.js模块。

galleryUID integer 1

画廊的唯一ID。由历史形成的模块URL时使用。例如，UID1画廊的第二张照片将有网址：http://example.com/#&gid=1&pid=2。

galleryPIDs boolean false

启用对于正在形成URL时使用的每个幻灯片对象自定义标识。如果选项设置为true，幻灯片对象必须具有PID（图片标识符）属性，可以是一个字符串或一个整数。 例如：

 var slides = [
     {
         src: 'path/to/1.jpg',
         w:500,
         h:400,
         pid: 'image-one'
     },
     {
         src: 'path/to/2.jpg',
         w:300,
         h:700,
         pid: 'image-two'
     },

     ...
 ];

......第二张幻灯片将URL http://example.com/#&gid=1&pid=image-two。

了解更多关于如何实现在FAQ部分定制的PID。

errorMsg string

未加载图像时的错误消息。 ％URL％将图像的URL来代替。

Default value:

<div class="pswp__error-msg"><a href="%url%" target="_blank">The image</a> could not be loaded.</div>

preload array [1,1]

基于运动方向附近的幻灯片延迟加载。应该是两个整数数组，第一个 - 当前图像之前预加载的项目数，第二个 - 当前图像之后。 例如。如果你把它设置为[1,3]，它会之前，在当前负载1的图像，目前后3图像。值不能小于1。

mainClass string undefined

字符串将被添加到根PhotoSwipe（.pswp）的元素类的名称。可以包含由空格分隔的多个类。

getNumItemsFn function

功能应该在画廊返回的项目总数。默认情况下它返回幻灯片数组的长度。不要把很复杂的代码在这里，函数经常执行。

focus boolean true

之后它的开放将焦点设置PhotoSwipe元素上。

isClickableElement function

Default value:

 isClickableElement: function(el) {
     return el.tagName === 'A';
 }

函数应该检查元素（EL）是可以点击的。如果是 - PhotoSwipe不会叫的preventDefault和点击事件会通过。功能应该是轻是可能的，因为它是在拖动开始和拖动发布执行多次。

modal boolean true

控制PhotoSwipe是否应该扩大到占据整个视口。如果为假，则PhotoSwipe元件将模板的定位的父的大小。看看常见问题以获取更多信息。

Default UI Options

对于PhotoSwipe用户界面默认（DIST/ UI / photoswipe-UI-default.js）选项添加同样的方式和同样的目标为核心的选项。

 // Size of top & bottom bars in pixels,
 // "bottom" parameter can be 'auto' (will calculate height of caption)
 // option applies only when mouse is used,
 // or width of screen is more than 1200px
 //
 // (Also refer to `parseVerticalMargin` event)
 barsSize: {top:44, bottom:'auto'}, 

 // Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for 4000ms
 timeToIdle: 4000,

 // Same as above, but this timer applies when mouse leaves the window
 timeToIdleOutside: 1000,

 // Delay until loading indicator is displayed
 loadingIndicatorDelay: 1000,

 // Function builds caption markup
 addCaptionHTMLFn: function(item, captionEl, isFake) {
     // item      - slide object
     // captionEl - caption DOM element
     // isFake    - true when content is added to fake caption container
     //             (used to get size of next or previous caption)

     if(!item.title) {
         captionEl.children[0].innerHTML = '';
         return false;
     }
     captionEl.children[0].innerHTML = item.title;
     return true;
 },

 // Buttons/elements
 closeEl:true,
 captionEl: true,
 fullscreenEl: true,
 zoomEl: true,
 shareEl: true,
 counterEl: true,
 arrowEl: true,
 preloaderEl: true,

 // Tap on sliding area should close gallery
 tapToClose: false,

 // Tap should toggle visibility of controls
 tapToToggleControls: true,

 // Mouse click on image should close the gallery,
 // only when image is smaller than size of the viewport
 clickToCloseNonZoomable: true,

 // Element classes click on which should close the PhotoSwipe.
 // In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption".
 //
 // "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements
 // By default it's used to highlight the close button.
 closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 

 // Separator for "1 of X" counter
 indexIndicatorSep: ' / ',

 // Share buttons
 //
 // Available variables for URL:
 // {{url}}             - url to current page
 // {{text}}            - title
 // {{image_url}}       - encoded image url
 // {{raw_image_url}}   - raw image url
 shareButtons: [
     {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
     {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
     {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
     {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
 ],

 // Next 3 functions return data for share links
 //
 // functions are triggered after click on button that opens share modal,
 // which means that data should be about current (active) slide
 getImageURLForShare: function( shareButtonData ) {
     // `shareButtonData` - object from shareButtons array
     //
     // `pswp` is the gallery instance object,
     // you should define it by yourself
     //
     return pswp.currItem.src || '';
 },
 getPageURLForShare: function( shareButtonData ) {
     return window.location.href;
 },
 getTextForShare: function( shareButtonData ) {
     return pswp.currItem.title || '';
 },

 // Parse output of share links
 parseShareButtonOut: function(shareButtonData, shareButtonOut) {
     // `shareButtonData` - object from shareButtons array
     // `shareButtonOut` - raw string of share link element
     return shareButtonOut;
 }