PhotoSwipe中文API(二)

 1 var options = {
 2     index: 3,
 3     escKey: false,
 4 
 5     // ui option
 6     timeToIdle: 4000
 7 };
 8 var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
 9 gallery.init();
10 
11 // Note that options object is cloned during the initialization.
12 // But you can access it via `gallery.options`.
13 // For example, to dynamically change `escKey`:
14 gallery.options.escKey = false;
15 
16 // `options.escKey = false` will not work

 1 getThumbBoundsFn: function(index) {
 2 
 3     // find thumbnail element
 4     var thumbnail = document.querySelectorAll(‘.my-gallery-thumbnails‘)[index];
 5 
 6     // get window scroll Y
 7     var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
 8     // optionally get horizontal scroll
 9 
10     // get position of element relative to viewport
11     var rect = thumbnail.getBoundingClientRect(); 
12 
13     // w = width
14     return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
15 
16 
17     // Good guide on how to get element coordinates:
18     // http://javascript.info/tutorial/coordinates
19 }

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

 1 getDoubleTapZoom: function(isMouseClick, item) {
 2 
 3     // isMouseClick          - true if mouse, false if double-tap
 4     // item                  - slide object that is zoomed, usually current
 5     // item.initialZoomLevel - initial scale ratio of image
 6     //                         e.g. if viewport is 700px and image is 1400px,
 7     //                              initialZoomLevel will be 0.5
 8 
 9     if(isMouseClick) {
10 
11         // is mouse click on image or zoom icon
12 
13         // zoom to original
14         return 1;
15 
16         // e.g. for 1400px image:
17         // 0.5 - zooms to 700px
18         // 2   - zooms to 2800px
19 
20     } else {
21 
22         // is double-tap
23 
24         // zoom to original if initial zoom is less than 0.7x,
25         // otherwise to 1.5x, to make sure that double-tap gesture always zooms image
26         return item.initialZoomLevel < 0.7 ? 1 : 1.5;
27     }
28 }

 1 var slides = [
 2     {
 3         src: ‘path/to/1.jpg‘,
 4         w:500,
 5         h:400,
 6         pid: ‘image-one‘
 7     },
 8     {
 9         src: ‘path/to/2.jpg‘,
10         w:300,
11         h:700,
12         pid: ‘image-two‘
13     },
14 
15     ... 
16 ];

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

1 isClickableElement: function(el) {
2     return el.tagName === ‘A‘;
3 }

  1 // Size of top & bottom bars in pixels,
  2 // "bottom" parameter can be ‘auto‘ (will calculate height of caption)
  3 // option applies only when mouse is used, 
  4 // or width of screen is more than 1200px
  5 // 
  6 // (Also refer to `parseVerticalMargin` event)
  7 barsSize: {top:44, bottom:‘auto‘}, 
  8 
  9 // Adds class pswp__ui--idle to pswp__ui element when mouse isn‘t moving for 4000ms
 10 timeToIdle: 4000,
 11 
 12 // Same as above, but this timer applies when mouse leaves the window
 13 timeToIdleOutside: 1000,
 14 
 15 // Delay until loading indicator is displayed
 16 loadingIndicatorDelay: 1000,
 17 
 18 // Function builds caption markup
 19 addCaptionHTMLFn: function(item, captionEl, isFake) {
 20     // item      - slide object
 21     // captionEl - caption DOM element
 22     // isFake    - true when content is added to fake caption container
 23     //             (used to get size of next or previous caption)
 24 
 25     if(!item.title) {
 26         captionEl.children[0].innerHTML = ‘‘;
 27         return false;
 28     }
 29     captionEl.children[0].innerHTML = item.title;
 30     return true;
 31 },
 32 
 33 // Buttons/elements
 34 closeEl:true,
 35 captionEl: true,
 36 fullscreenEl: true,
 37 zoomEl: true,
 38 shareEl: true,
 39 counterEl: true,
 40 arrowEl: true,
 41 preloaderEl: true,
 42 
 43 // Tap on sliding area should close gallery
 44 tapToClose: false,
 45 
 46 // Tap should toggle visibility of controls
 47 tapToToggleControls: true,
 48 
 49 // Mouse click on image should close the gallery,
 50 // only when image is smaller than size of the viewport
 51 clickToCloseNonZoomable: true,
 52 
 53 // Element classes click on which should close the PhotoSwipe.
 54 // In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption".
 55 // 
 56 // "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements
 57 // By default it‘s used to highlight the close button.
 58 closeElClasses: [‘item‘, ‘caption‘, ‘zoom-wrap‘, ‘ui‘, ‘top-bar‘], 
 59 
 60 // Separator for "1 of X" counter
 61 indexIndicatorSep: ‘ / ‘,
 62 
 63 
 64 
 65 // Share buttons
 66 // 
 67 // Available variables for URL:
 68 // {{url}}             - url to current page
 69 // {{text}}            - title
 70 // {{image_url}}       - encoded image url
 71 // {{raw_image_url}}   - raw image url
 72 shareButtons: [
 73     {id:‘facebook‘, label:‘Share on Facebook‘, url:‘https://www.facebook.com/sharer/sharer.php?u={{url}}‘},
 74     {id:‘twitter‘, label:‘Tweet‘, url:‘https://twitter.com/intent/tweet?text={{text}}&url={{url}}‘},
 75     {id:‘pinterest‘, label:‘Pin it‘, url:‘http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}‘},
 76     {id:‘download‘, label:‘Download image‘, url:‘{{raw_image_url}}‘, download:true}
 77 ],
 78 
 79 
 80 // Next 3 functions return data for share links
 81 // 
 82 // functions are triggered after click on button that opens share modal,
 83 // which means that data should be about current (active) slide
 84 getImageURLForShare: function( shareButtonData ) {
 85     // `shareButtonData` - object from shareButtons array
 86     // 
 87     // `pswp` is the gallery instance object,
 88     // you should define it by yourself
 89     // 
 90     return pswp.currItem.src || ‘‘;
 91 },
 92 getPageURLForShare: function( shareButtonData ) {
 93     return window.location.href;
 94 },
 95 getTextForShare: function( shareButtonData ) {
 96     return pswp.currItem.title || ‘‘;
 97 },
 98 
 99 // Parse output of share links
100 parseShareButtonOut: function(shareButtonData, shareButtonOut) {
101     // `shareButtonData` - object from shareButtons array
102     // `shareButtonOut` - raw string of share link element
103     return shareButtonOut;
104 }