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;
}
- 上一篇: PhotoSwipe中文API(一)
- 下一篇: PhotoSwipe中文API(三)
评论已关闭