首页

PhotoSwipe之参数options(3)

站长
2020-01-05  阅读 96

Options

options是一个键值对对象,传递给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

是第一个图像( slide )的索引,必须是整型,不可以是一个字符串。

获取动画开始或结束时的对象坐标getThumbBoundsFn

从最初的放大动画开始时(或从最后的缩小动画结束时),函数应该返回一个对象坐标。 对象包含三个属性:

  1. x:x坐标,相对于document元素
  2. y:y坐标,相对于document元素
  3. w:元素的宽度,高度基于最大图像的尺寸自动计算。

例如:缩放动画在页面的左上角开始时,getThumbBoundsFn返回{x:0,y:0,w:50}

getThumbBoundsFn函数有一个参数:打开(或关闭)画廊的索引项。

在非模态模式下,模板的位置相对于视口(viewport)应该减去xy。更多信息:FAQ

下面是缩略图位置计算的例子:

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
}复制代码

如果小缩略图的尺寸不能匹配大图像的尺寸,可考虑启用缩放+渐进过渡。你可以通添加optionsshowHideOpacity:true开启(或通过添加hideAnimationDuration:0, showAnimationDuration:0来禁止过渡动画。更多关于此的信息,请查看FAQ

如果你想在动画运行期间隐藏缩略图,可以使用opacity:0,不要使用visibility:hiddendisplay:none。 为了避免延迟,在动画的开始时,不要强制绘制和布局。

不透明转换showHideOpacity:false

如果设置为false, 背景 opacity 属性和图像的 scale 属性将会是活动的; 如果设置为true, PhotoSwipe的根元素的 opacity 属性和图像的 scale 属性将会是活动的; 而无论设置truefalse,图像image不透明度总是1。

若要只启用不透明(opacity)转换(无缩放) ,请不要定义 getthumboundsfn 选项。

初始放大动画持续时间showAnimationDuration

初始放大动画持续时间,设置为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);
}复制代码

如果你使用的是sass你只需要在main-setting.scss文件中更改transition-duration变量的值。

结束缩放(关闭)动画持续时间hideAnimationDuration

与前一个选项相同,只是用于关闭(缩小)过渡。 photoSwipe打开后,pswp--openCSS类将添加到根元素,在CSS文件中,你可以使用这个类请求不同的过渡持续时间。

背景不透明度bgOpacity

背景(.pswp__bg)不透明度,应该是从0到1的数字,例如:0.7,这个样式是通过js定义的。因为这个值用于一些基于手势的转换。

幻灯片间距比spacing

例如:0.12,将呈现滑动视窗宽度的12%(圆角);

是否允许滑动导航allowPanToNext: true

当前图库项正被缩放时,允许滑动导航到下一个/前一个图库项。在没有硬件触摸支持的设备(一般为手机)上,选项总是false

最大缩放级别maxSpreadZoom

执行缩放手势的最大缩放级别。2意味着图像可以从原始尺寸被放大2倍。但是应该尽量避免比较大的值,因为过大的图像可能会导致移动设备的内存问题(尤其是IOS)

双击手势放大图像后与之前的图像的缩放级别getDoubleTapZoom

在双击手势(或当用户单击缩放图标或鼠标单击图像本身时)图像放大后,函数应该返回缩放级别。 如果返回1,图像将被放大到原来的大小。

默认值:0.5

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

使用滑动手势时循环滑动。如果设置为true,你就可以从最后一张图片滑动到第一张图片。当幻灯片少于3张时,选项总为false。 此选项与箭头导航无关,箭头循环是永久打开的。你可以通过自定义UI来修改此行为。

捏关闭画廊pinchToClose

手指内聚(捏)是关闭画廊的手势。画廊的背景会随着用户的捏而逐渐淡出,当手势完成后(两个手指捏到一起时),画廊将关闭。

滚动关闭画廊closeOnScroll

在滚动页面上关闭画廊。 选项只适用于没有硬件触摸支持的设备。

垂直拖放关闭画廊closeOnVerticalDrag

当垂直拖放和图像不放大时关闭画廊。使用鼠标时,该选项的值总为false

预定义是否使用鼠标mouseUsed

预定义是否使用鼠标。一些PhotoSwipe特性依赖它,例如:默认的UI左右箭头,只有在使用鼠标时才会出现。如果设置为false,PhotoSwipe将检测何时使用鼠标,找到鼠标时,触发mouseUsed事件。

按esc键关闭画廊escKey

按键盘esc键关闭画廊,该选项是可以被动态改变的。( yourPhotoSwipeInstance.options.escKey = false;

键盘左右箭头导航,arrowKeys默认false

键盘左右箭头导航,该选项是可以被动态改变的。(yourPhotoSwipeInstance.options.arrowKeys = false;

是否记录历史history

如果设置为false,则禁用历史纪录模块(后退按钮用于关闭图库,每张幻灯片的URL都是唯一的)。 当然,你如果使用的是构建打包工具,也可以从构建中移除history.js模块。

图库唯一IDgalleryUID

图库唯一ID,历史模块在形成URL时使用。 例如:图库的第二张图像的URL可能是:http://example.com/#gid=1&pid=2

图库项唯一IDgalleryPIDs

每个图库项的自定义ID被用于形成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=imge-twoFAQ 部分了解更多关于如何实现自定义 PID 的信息。

错误信息errorMsg

图像未加载时出现错误信息。%URL%将被图像的 URL 替换。

默认值:

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

预加载数组preload

根据移动方向延迟加载附近的幻灯片。应该是一个带有两个整数的数组,一个整数是当前图库项之前要预加载的图像数,第二个整数是当前图库项之后要预加载的图像数。

例如:如果你将其设置为[1, 3],它将在当前图像之前预加载一个图像,之后预加载3个图像。最小值不能小于1。

添加到PhotoSwipe根元素上的类mainClass

带有类名的字符串,该类名将被添加到 PhotoSwipe 的根元素( .Pswp ). 值可以包含以空格分隔的多个类名。

获取图像总数getNumItemsFn

该函数返回图库中的项目总数。默认情况下,它返回幻灯片数组的长度。不要把非常复杂的代码放在这里,函数执行(executed)的非常频繁。

聚焦focus布尔值

图库打开后,设置对PhotoSwipe元素的焦点。

点击元素函数isClickableElement

默认值:

isClickableElement: function(el) {
    return el.tagName === 'A';
}复制代码

函数应该检查元素是否可点击。如果被检测元素可以被点击,则PhotoSwipe不会调用 preventDefaultclick事件将会允许执行。 函数应该尽可能做到代码简洁,因为它是图像拖动开始和拖动释放的过程中,多次被执行。

模态modal布尔值

控制PhotoSwipe是否应该扩展以占用整个视区。如果为false,PhotoSwipe元素将采用模板定位父元素的大小。更多信息请看FAQ

默认用户界面选项

作为核心选项,optionsPhotoSwipeUI_Default( 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;
}复制代码
请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!