zoukankan      html  css  js  c++  java
  • PhotoSwipe中文API(一)

    入门

    您应知道之前先做起事情:

    1. PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装。

    2. PhotoSwipe需要预定义的图像尺寸(更多关于这一点)。

    3. 如果您在非回应网站上使用PhotoSwipe - 控制将在移动进行换算(整页缩放)。所以你需要实现自定义控件(在右上角例如单个大关闭按钮)。

    4. 文档中所有的代码是纯香草JS和支持IE8及以上。如果您的网站或应用程序使用了一些JavaScript框架(像jQuery或MooTools的),或者你并不需要支持旧的浏览器 - 随意简化代码。

    5. 避免对移动服务的大图像(大于2000x1500px),因为它们会极大地降低动画性能,并可能导致崩溃(尤其是iOS上的Safari浏览器)。可能的解决方案:一个单独的网页上投放响应图像,或者打开的图像,或者(在常见问题解答更多)使用支持平铺图像(如传单)库。

    初始化

    第1步:包括JS和CSS文件

    您可以在GitHub的信息库DIST/文件夹中找到它们。萨斯和未编译的JS文件夹中的src /。我建议使用无礼的话,如果你打算修改现有的样式,有代码的结构和评述。https://github.com/dimsemenov/PhotoSwipe

     1 <!-- Core CSS file -->
     2 <link rel="stylesheet" href="path/to/photoswipe.css"> 
     3 
     4 <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     5      In the folder of skin CSS file there are also:
     6      - .png and .svg icons sprite, 
     7      - preloader.gif (for browsers that do not support CSS animations) -->
     8 <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 
     9 
    10 <!-- Core JS file -->
    11 <script src="path/to/photoswipe.min.js"></script> 
    12 
    13 <!-- UI JS file -->
    14 <script src="path/to/photoswipe-ui-default.min.js"></script> 

    不要紧,如何以及在哪里将包括JS和CSS文件。只有当你调用新PhotoSwipe代码被执行()。可以随意推迟文件加载,如果你不需要PhotoSwipe被初步打开。

    PhotoSwipe还支持AMD装载机(如RequireJS)和CommonJS的,使用起来就像这样:

     1 require([ 
     2         'path/to/photoswipe.js', 
     3         'path/to/photoswipe-ui-default.js' 
     4     ], function( PhotoSwipe, PhotoSwipeUI_Default ) {
     5 
     6     //      var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
     7     //      gallery.init() 
     8     //      ...
     9 
    10 });

    而且,您可以通过鲍尔安装(安装鲍尔photoswipe),或NPM(NPM安装photoswipe)。

    第2步:PhotoSwipe(.pswp)元素添加到DOM

    您可以通过JS动态添加HTML代码(直接在初始化之前),或者有它的页面开始(喜欢它的演示页面上完成)。该代码可以在任何地方附加,但理想的结束</ body>之前。 (你用相同的UI类只要)你可以重复使用它在多个画廊。

     1 <!-- Root element of PhotoSwipe. Must have class pswp. -->
     2 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     3 
     4     <!-- Background of PhotoSwipe. 
     5          It's a separate element as animating opacity is faster than rgba(). -->
     6     <div class="pswp__bg"></div>
     7 
     8     <!-- Slides wrapper with overflow:hidden. -->
     9     <div class="pswp__scroll-wrap">
    10 
    11         <!-- Container that holds slides. 
    12             PhotoSwipe keeps only 3 of them in the DOM to save memory.
    13             Don't modify these 3 pswp__item elements, data is added later on. -->
    14         <div class="pswp__container">
    15             <div class="pswp__item"></div>
    16             <div class="pswp__item"></div>
    17             <div class="pswp__item"></div>
    18         </div>
    19 
    20         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    21         <div class="pswp__ui pswp__ui--hidden">
    22 
    23             <div class="pswp__top-bar">
    24 
    25                 <!--  Controls are self-explanatory. Order can be changed. -->
    26 
    27                 <div class="pswp__counter"></div>
    28 
    29                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
    30 
    31                 <button class="pswp__button pswp__button--share" title="Share"></button>
    32 
    33                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
    34 
    35                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    36 
    37                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
    38                 <!-- element will get class pswp__preloader--active when preloader is running -->
    39                 <div class="pswp__preloader">
    40                     <div class="pswp__preloader__icn">
    41                       <div class="pswp__preloader__cut">
    42                         <div class="pswp__preloader__donut"></div>
    43                       </div>
    44                     </div>
    45                 </div>
    46             </div>
    47 
    48             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
    49                 <div class="pswp__share-tooltip"></div> 
    50             </div>
    51 
    52             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    53             </button>
    54 
    55             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    56             </button>
    57 
    58             <div class="pswp__caption">
    59                 <div class="pswp__caption__center"></div>
    60             </div>
    61 
    62         </div>
    63 
    64     </div>
    65 
    66 </div>

    pswp__bg,pswp__scroll换行,pswp__container和pswp__item元素的顺序不应改变。

    你可能会问,为什么PhotoSwipe不通过JS自动添加该代码,原因很简单 - 只是为了节省文件大小的情况下,如果你需要的布局做一些修改。

    步骤3:初始化

    执行PhotoSwipe构造函数。它接受4个参数:

    1. 从步骤2(它必须被添加到DOM).pswp元件。

    2. PhotoSwipe UI类。如果包括了默认photoswipe-UI-default.js,类将是PhotoSwipeUI_Default。可以是假的。

    3. 与对象(幻灯片)阵列。

    4. options

     1 var pswpElement = document.querySelectorAll('.pswp')[0];
     2 
     3 // build items array
     4 var items = [
     5     {
     6         src: 'https://placekitten.com/600/400',
     7         w: 600,
     8         h: 400
     9     },
    10     {
    11         src: 'https://placekitten.com/1200/900',
    12         w: 1200,
    13         h: 900
    14     }
    15 ];
    16 
    17 // define options (if needed)
    18 var options = {
    19     // optionName: 'option value'
    20     // for example:
    21     index: 0 // start at first slide
    22 };
    23 
    24 // Initializes and opens PhotoSwipe
    25 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    26 gallery.init();

    在最后你应该得到的东西是这样的:

    html:

     1 <button id="btn">Open PhotoSwipe</button>
     2 
     3 <!-- Root element of PhotoSwipe. Must have class pswp. -->
     4 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     5 
     6     <!-- Background of PhotoSwipe. 
     7          It's a separate element, as animating opacity is faster than rgba(). -->
     8     <div class="pswp__bg"></div>
     9 
    10     <!-- Slides wrapper with overflow:hidden. -->
    11     <div class="pswp__scroll-wrap">
    12 
    13         <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
    14         <div class="pswp__container">
    15             <!-- don't modify these 3 pswp__item elements, data is added later on -->
    16             <div class="pswp__item"></div>
    17             <div class="pswp__item"></div>
    18             <div class="pswp__item"></div>
    19         </div>
    20 
    21         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    22         <div class="pswp__ui pswp__ui--hidden">
    23 
    24             <div class="pswp__top-bar">
    25 
    26                 <!--  Controls are self-explanatory. Order can be changed. -->
    27 
    28                 <div class="pswp__counter"></div>
    29 
    30                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
    31 
    32                 <button class="pswp__button pswp__button--share" title="Share"></button>
    33 
    34                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
    35 
    36                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    37 
    38                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
    39                 <!-- element will get class pswp__preloader--active when preloader is running -->
    40                 <div class="pswp__preloader">
    41                     <div class="pswp__preloader__icn">
    42                       <div class="pswp__preloader__cut">
    43                         <div class="pswp__preloader__donut"></div>
    44                       </div>
    45                     </div>
    46                 </div>
    47             </div>
    48 
    49             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
    50                 <div class="pswp__share-tooltip"></div> 
    51             </div>
    52 
    53             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    54             </button>
    55 
    56             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    57             </button>
    58 
    59             <div class="pswp__caption">
    60                 <div class="pswp__caption__center"></div>
    61             </div>
    62 
    63           </div>
    64 
    65         </div>
    66 
    67 </div>

    js : 

    var openPhotoSwipe = function() {
        var pswpElement = document.querySelectorAll('.pswp')[0];
    
        // build items array
        var items = [
            {
                src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
                w: 964,
                h: 1024
            },
            {
                src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
                w: 1024,
                h: 683
            }
        ];
        
        // define options (if needed)
        var options = {
                 // history & focus options are disabled on CodePen        
            history: false,
            focus: false,
    
            showAnimationDuration: 0,
            hideAnimationDuration: 0
            
        };
        
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    };
    
    openPhotoSwipe();
    
    document.getElementById('btn').onclick = openPhotoSwipe;

    结果:

    创建幻灯片对象的数组

    数组应包含有关幻灯片数据中的每个对象,也可以是你希望在PhotoSwipe显示任何东西 - 路径图像,标题字符串,股数,评论等。

    默认情况下PhotoSwipe只使用了5个属性:SRC(路径图),W(图像宽度),H(图像高度),MSRC(路径的小图像占位符,大的图像会在上面装),HTML(自定义HTML,更 关于它)。

    在导航,PhotoSwipe增加自己的属性到这个对象(如MINZOOM或加载)。

     1 var slides = [
     2 
     3     // slide 1
     4     {
     5 
     6         src: 'path/to/image1.jpg', // path to image
     7         w: 1024, // image width
     8         h: 768, // image height
     9 
    10         msrc: 'path/to/small-image.jpg', // small image placeholder,
    11                         // main (large) image loads on top of it,
    12                         // if you skip this parameter - grey rectangle will be displayed,
    13                         // try to define this property only when small image was loaded before
    14 
    15 
    16 
    17         title: 'Image Caption'  // used by Default PhotoSwipe UI
    18                                 // if you skip it, there won't be any caption
    19 
    20 
    21         // You may add more properties here and use them.
    22         // For example, demo gallery uses "author" property, which is used in the caption.
    23         // author: 'John Doe'
    24 
    25     },
    26 
    27     // slide 2
    28     {
    29         src: 'path/to/image2.jpg', 
    30         w: 600, 
    31         h: 600
    32 
    33         // etc.
    34     }
    35 
    36     // etc.
    37 
    38 ];

    您可以动态地定义幻灯片对象的属性PhotoSwipe读取它们直接之前,使用gettingData事件(在文档的API部分的更多信息)。例如,该技术可用于为不同的屏幕尺寸不同的图像。

    如何从一个链接列表建立幻灯片的数组

    让我们假设你有一个看起来像这样(约画廊的标记更多信息)的链接/缩略图列表:

     1 <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
     2 
     3     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     4         <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
     5             <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
     6         </a>
     7         <figcaption itemprop="caption description">Image caption</figcaption>
     8     </figure>
     9 
    10     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    11         <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
    12             <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
    13         </a>
    14         <figcaption itemprop="caption description">Image caption</figcaption>
    15     </figure>
    16 
    17 
    18 </div>

    ...你要点击缩略图与大型图像打开PhotoSwipe(喜欢它的演示页上完成)。所有你需要做的是:

    1. 绑定click事件链接/缩略图。

    2. 用户点击缩略图后,找到它的索引。

    3. 创建DOM元素幻灯片对象的数组 - 通过各环节循环和检索href属性(大图像URL),数据大小属性(其大小),缩略图的SRC和字幕的内容。

    PhotoSwipe并不真正关心你将如何做到这一点。如果你使用像jQuery或MooTools的框架,或者如果你不需要支持IE8,代码可以大大简化。

    这里是纯香草JS实现与IE8的支持:

      1 var initPhotoSwipeFromDOM = function(gallerySelector) {
      2 
      3     // parse slide data (url, title, size ...) from DOM elements 
      4     // (children of gallerySelector)
      5     var parseThumbnailElements = function(el) {
      6         var thumbElements = el.childNodes,
      7             numNodes = thumbElements.length,
      8             items = [],
      9             figureEl,
     10             linkEl,
     11             size,
     12             item;
     13 
     14         for(var i = 0; i < numNodes; i++) {
     15 
     16             figureEl = thumbElements[i]; // <figure> element
     17 
     18             // include only element nodes 
     19             if(figureEl.nodeType !== 1) {
     20                 continue;
     21             }
     22 
     23             linkEl = figureEl.children[0]; // <a> element
     24 
     25             size = linkEl.getAttribute('data-size').split('x');
     26 
     27             // create slide object
     28             item = {
     29                 src: linkEl.getAttribute('href'),
     30                 w: parseInt(size[0], 10),
     31                 h: parseInt(size[1], 10)
     32             };
     33 
     34 
     35 
     36             if(figureEl.children.length > 1) {
     37                 // <figcaption> content
     38                 item.title = figureEl.children[1].innerHTML; 
     39             }
     40 
     41             if(linkEl.children.length > 0) {
     42                 // <img> thumbnail element, retrieving thumbnail url
     43                 item.msrc = linkEl.children[0].getAttribute('src');
     44             } 
     45 
     46             item.el = figureEl; // save link to element for getThumbBoundsFn
     47             items.push(item);
     48         }
     49 
     50         return items;
     51     };
     52 
     53     // find nearest parent element
     54     var closest = function closest(el, fn) {
     55         return el && ( fn(el) ? el : closest(el.parentNode, fn) );
     56     };
     57 
     58     // triggers when user clicks on thumbnail
     59     var onThumbnailsClick = function(e) {
     60         e = e || window.event;
     61         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     62 
     63         var eTarget = e.target || e.srcElement;
     64 
     65         // find root element of slide
     66         var clickedListItem = closest(eTarget, function(el) {
     67             return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
     68         });
     69 
     70         if(!clickedListItem) {
     71             return;
     72         }
     73 
     74         // find index of clicked item by looping through all child nodes
     75         // alternatively, you may define index via data- attribute
     76         var clickedGallery = clickedListItem.parentNode,
     77             childNodes = clickedListItem.parentNode.childNodes,
     78             numChildNodes = childNodes.length,
     79             nodeIndex = 0,
     80             index;
     81 
     82         for (var i = 0; i < numChildNodes; i++) {
     83             if(childNodes[i].nodeType !== 1) { 
     84                 continue; 
     85             }
     86 
     87             if(childNodes[i] === clickedListItem) {
     88                 index = nodeIndex;
     89                 break;
     90             }
     91             nodeIndex++;
     92         }
     93 
     94 
     95 
     96         if(index >= 0) {
     97             // open PhotoSwipe if valid index found
     98             openPhotoSwipe( index, clickedGallery );
     99         }
    100         return false;
    101     };
    102 
    103     // parse picture index and gallery index from URL (#&pid=1&gid=2)
    104     var photoswipeParseHash = function() {
    105         var hash = window.location.hash.substring(1),
    106         params = {};
    107 
    108         if(hash.length < 5) {
    109             return params;
    110         }
    111 
    112         var vars = hash.split('&');
    113         for (var i = 0; i < vars.length; i++) {
    114             if(!vars[i]) {
    115                 continue;
    116             }
    117             var pair = vars[i].split('=');  
    118             if(pair.length < 2) {
    119                 continue;
    120             }           
    121             params[pair[0]] = pair[1];
    122         }
    123 
    124         if(params.gid) {
    125             params.gid = parseInt(params.gid, 10);
    126         }
    127 
    128         return params;
    129     };
    130 
    131     var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    132         var pswpElement = document.querySelectorAll('.pswp')[0],
    133             gallery,
    134             options,
    135             items;
    136 
    137         items = parseThumbnailElements(galleryElement);
    138 
    139         // define options (if needed)
    140         options = {
    141 
    142             // define gallery index (for URL)
    143             galleryUID: galleryElement.getAttribute('data-pswp-uid'),
    144 
    145             getThumbBoundsFn: function(index) {
    146                 // See Options -> getThumbBoundsFn section of documentation for more info
    147                 var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
    148                     pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
    149                     rect = thumbnail.getBoundingClientRect(); 
    150 
    151                 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    152             }
    153 
    154         };
    155 
    156         // PhotoSwipe opened from URL
    157         if(fromURL) {
    158             if(options.galleryPIDs) {
    159                 // parse real index when custom PIDs are used 
    160                 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
    161                 for(var j = 0; j < items.length; j++) {
    162                     if(items[j].pid == index) {
    163                         options.index = j;
    164                         break;
    165                     }
    166                 }
    167             } else {
    168                 // in URL indexes start from 1
    169                 options.index = parseInt(index, 10) - 1;
    170             }
    171         } else {
    172             options.index = parseInt(index, 10);
    173         }
    174 
    175         // exit if index not found
    176         if( isNaN(options.index) ) {
    177             return;
    178         }
    179 
    180         if(disableAnimation) {
    181             options.showAnimationDuration = 0;
    182         }
    183 
    184         // Pass data to PhotoSwipe and initialize it
    185         gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    186         gallery.init();
    187     };
    188 
    189     // loop through all gallery elements and bind events
    190     var galleryElements = document.querySelectorAll( gallerySelector );
    191 
    192     for(var i = 0, l = galleryElements.length; i < l; i++) {
    193         galleryElements[i].setAttribute('data-pswp-uid', i+1);
    194         galleryElements[i].onclick = onThumbnailsClick;
    195     }
    196 
    197     // Parse URL and open gallery if it contains #&pid=3&gid=1
    198     var hashData = photoswipeParseHash();
    199     if(hashData.pid && hashData.gid) {
    200         openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    201     }
    202 };
    203 
    204 // execute above function
    205 initPhotoSwipeFromDOM('.my-gallery');

    例如在CodePen(重点和历史选项被禁用,由于嵌入的问题):

      1 <h2>First gallery:</h2>
      2 
      3   <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
      4 
      5     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      6       <a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
      7           <img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
      8       </a>
      9                                           <figcaption itemprop="caption description">Image caption  1</figcaption>
     10                                           
     11     </figure>
     12 
     13     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     14       <a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
     15           <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
     16       </a>
     17       <figcaption itemprop="caption description">Image caption 2</figcaption>
     18     </figure>
     19 
     20     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     21       <a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
     22           <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
     23       </a>
     24       <figcaption itemprop="caption description">Image caption 3</figcaption>
     25     </figure>
     26 
     27     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     28       <a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
     29           <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
     30       </a>
     31       <figcaption itemprop="caption description">Image caption 4</figcaption>
     32     </figure>
     33 
     34 
     35   </div>
     36 
     37 <h2>Second gallery:</h2>
     38 
     39   <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
     40 
     41   
     42 
     43     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     44       <a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
     45           <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
     46       </a>
     47       <figcaption itemprop="caption description">Image caption 2.1</figcaption>
     48     </figure>
     49 
     50     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     51       <a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
     52           <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
     53       </a>
     54       <figcaption itemprop="caption description">Image caption 2.2</figcaption>
     55     </figure>
     56 
     57     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     58       <a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
     59           <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
     60       </a>
     61       <figcaption itemprop="caption description">Image caption 2.3</figcaption>
     62     </figure>
     63 
     64 
     65   </div>
     66 
     67 
     68 
     69 <!-- Root element of PhotoSwipe. Must have class pswp. -->
     70 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     71 
     72     <!-- Background of PhotoSwipe. 
     73          It's a separate element, as animating opacity is faster than rgba(). -->
     74     <div class="pswp__bg"></div>
     75 
     76     <!-- Slides wrapper with overflow:hidden. -->
     77     <div class="pswp__scroll-wrap">
     78 
     79         <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
     80         <!-- don't modify these 3 pswp__item elements, data is added later on. -->
     81         <div class="pswp__container">
     82             <div class="pswp__item"></div>
     83             <div class="pswp__item"></div>
     84             <div class="pswp__item"></div>
     85         </div>
     86 
     87         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
     88         <div class="pswp__ui pswp__ui--hidden">
     89 
     90             <div class="pswp__top-bar">
     91 
     92                 <!--  Controls are self-explanatory. Order can be changed. -->
     93 
     94                 <div class="pswp__counter"></div>
     95 
     96                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
     97 
     98                 <button class="pswp__button pswp__button--share" title="Share"></button>
     99 
    100                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
    101 
    102                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    103 
    104                 <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
    105                 <!-- element will get class pswp__preloader--active when preloader is running -->
    106                 <div class="pswp__preloader">
    107                     <div class="pswp__preloader__icn">
    108                       <div class="pswp__preloader__cut">
    109                         <div class="pswp__preloader__donut"></div>
    110                       </div>
    111                     </div>
    112                 </div>
    113             </div>
    114 
    115             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
    116                 <div class="pswp__share-tooltip"></div> 
    117             </div>
    118 
    119             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    120             </button>
    121 
    122             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    123             </button>
    124 
    125             <div class="pswp__caption">
    126                 <div class="pswp__caption__center"></div>
    127             </div>
    128 
    129           </div>
    130 
    131         </div>
    132 
    133 </div>
     1 .my-gallery {
     2   width: 100%;
     3   float: left;
     4 }
     5 .my-gallery img {
     6   width: 100%;
     7   height: auto;
     8 }
     9 .my-gallery figure {
    10   display: block;
    11   float: left;
    12   margin: 0 5px 5px 0;
    13   width: 150px;
    14 }
    15 .my-gallery figcaption {
    16   display: none;
    17 }
      1 var initPhotoSwipeFromDOM = function(gallerySelector) {
      2 
      3     // parse slide data (url, title, size ...) from DOM elements 
      4     // (children of gallerySelector)
      5     var parseThumbnailElements = function(el) {
      6         var thumbElements = el.childNodes,
      7             numNodes = thumbElements.length,
      8             items = [],
      9             figureEl,
     10             linkEl,
     11             size,
     12             item;
     13 
     14         for(var i = 0; i < numNodes; i++) {
     15 
     16             figureEl = thumbElements[i]; // <figure> element
     17 
     18             // include only element nodes 
     19             if(figureEl.nodeType !== 1) {
     20                 continue;
     21             }
     22 
     23             linkEl = figureEl.children[0]; // <a> element
     24 
     25             size = linkEl.getAttribute('data-size').split('x');
     26 
     27             // create slide object
     28             item = {
     29                 src: linkEl.getAttribute('href'),
     30                 w: parseInt(size[0], 10),
     31                 h: parseInt(size[1], 10)
     32             };
     33 
     34 
     35 
     36             if(figureEl.children.length > 1) {
     37                 // <figcaption> content
     38                 item.title = figureEl.children[1].innerHTML; 
     39             }
     40 
     41             if(linkEl.children.length > 0) {
     42                 // <img> thumbnail element, retrieving thumbnail url
     43                 item.msrc = linkEl.children[0].getAttribute('src');
     44             } 
     45 
     46             item.el = figureEl; // save link to element for getThumbBoundsFn
     47             items.push(item);
     48         }
     49 
     50         return items;
     51     };
     52 
     53     // find nearest parent element
     54     var closest = function closest(el, fn) {
     55         return el && ( fn(el) ? el : closest(el.parentNode, fn) );
     56     };
     57 
     58     // triggers when user clicks on thumbnail
     59     var onThumbnailsClick = function(e) {
     60         e = e || window.event;
     61         e.preventDefault ? e.preventDefault() : e.returnValue = false;
     62 
     63         var eTarget = e.target || e.srcElement;
     64 
     65         // find root element of slide
     66         var clickedListItem = closest(eTarget, function(el) {
     67             return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
     68         });
     69 
     70         if(!clickedListItem) {
     71             return;
     72         }
     73 
     74         // find index of clicked item by looping through all child nodes
     75         // alternatively, you may define index via data- attribute
     76         var clickedGallery = clickedListItem.parentNode,
     77             childNodes = clickedListItem.parentNode.childNodes,
     78             numChildNodes = childNodes.length,
     79             nodeIndex = 0,
     80             index;
     81 
     82         for (var i = 0; i < numChildNodes; i++) {
     83             if(childNodes[i].nodeType !== 1) { 
     84                 continue; 
     85             }
     86 
     87             if(childNodes[i] === clickedListItem) {
     88                 index = nodeIndex;
     89                 break;
     90             }
     91             nodeIndex++;
     92         }
     93 
     94 
     95 
     96         if(index >= 0) {
     97             // open PhotoSwipe if valid index found
     98             openPhotoSwipe( index, clickedGallery );
     99         }
    100         return false;
    101     };
    102 
    103     // parse picture index and gallery index from URL (#&pid=1&gid=2)
    104     var photoswipeParseHash = function() {
    105         var hash = window.location.hash.substring(1),
    106         params = {};
    107 
    108         if(hash.length < 5) {
    109             return params;
    110         }
    111 
    112         var vars = hash.split('&');
    113         for (var i = 0; i < vars.length; i++) {
    114             if(!vars[i]) {
    115                 continue;
    116             }
    117             var pair = vars[i].split('=');  
    118             if(pair.length < 2) {
    119                 continue;
    120             }           
    121             params[pair[0]] = pair[1];
    122         }
    123 
    124         if(params.gid) {
    125             params.gid = parseInt(params.gid, 10);
    126         }
    127 
    128         return params;
    129     };
    130 
    131     var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    132         var pswpElement = document.querySelectorAll('.pswp')[0],
    133             gallery,
    134             options,
    135             items;
    136 
    137         items = parseThumbnailElements(galleryElement);
    138 
    139         // define options (if needed)
    140         options = {
    141 
    142             // define gallery index (for URL)
    143             galleryUID: galleryElement.getAttribute('data-pswp-uid'),
    144 
    145             getThumbBoundsFn: function(index) {
    146                 // See Options -> getThumbBoundsFn section of documentation for more info
    147                 var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
    148                     pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
    149                     rect = thumbnail.getBoundingClientRect(); 
    150 
    151                 return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    152             }
    153 
    154         };
    155 
    156         // PhotoSwipe opened from URL
    157         if(fromURL) {
    158             if(options.galleryPIDs) {
    159                 // parse real index when custom PIDs are used 
    160                 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
    161                 for(var j = 0; j < items.length; j++) {
    162                     if(items[j].pid == index) {
    163                         options.index = j;
    164                         break;
    165                     }
    166                 }
    167             } else {
    168                 // in URL indexes start from 1
    169                 options.index = parseInt(index, 10) - 1;
    170             }
    171         } else {
    172             options.index = parseInt(index, 10);
    173         }
    174 
    175         // exit if index not found
    176         if( isNaN(options.index) ) {
    177             return;
    178         }
    179 
    180         if(disableAnimation) {
    181             options.showAnimationDuration = 0;
    182         }
    183 
    184         // Pass data to PhotoSwipe and initialize it
    185         gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    186         gallery.init();
    187     };
    188 
    189     // loop through all gallery elements and bind events
    190     var galleryElements = document.querySelectorAll( gallerySelector );
    191 
    192     for(var i = 0, l = galleryElements.length; i < l; i++) {
    193         galleryElements[i].setAttribute('data-pswp-uid', i+1);
    194         galleryElements[i].onclick = onThumbnailsClick;
    195     }
    196 
    197     // Parse URL and open gallery if it contains #&pid=3&gid=1
    198     var hashData = photoswipeParseHash();
    199     if(hashData.pid && hashData.gid) {
    200         openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    201     }
    202 };
    203 
    204 // execute above function
    205 initPhotoSwipeFromDOM('.my-gallery');

    提示:您可以从CodePen例如下载在本地发挥它(编辑上CodePen - >分享 - >导出.zip文件)。

    如果您使用的标记,从这个例子不同,你需要编辑功能解析缩略图元素。

    如果你没有在纯JavaScript经验,不知道如何解析DOM,请参阅怪异模式和文档在MSDN上。

    需要注意的是IE8不支持HTML5<图>和<figcaption>元素,所以你需要在<head>部分(托管版本的例子中使用cdnjs)html5shiv:

    <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
  • 相关阅读:
    1.4.2.3. SETUP(Core Data 应用程序实践指南)
    1.4.2.2. PATHS(Core Data 应用程序实践指南)
    1.4.2.1. FILES(Core Data 应用程序实践指南)
    1.4.2. 实现 Core Data Helper 类(Core Data 应用程序实践指南)
    1.4.1. Core Data Helper 简介(Core Data 应用程序实践指南)
    1.4. 为现有的应用程序添加 Core Data 支持(Core Data 应用程序实践指南)
    1.3.2. App Icon 和 Launch Image(Core Data 应用程序实践指南)
    1.3.1. 新建Xcode项目并设置故事板(Core Data 应用程序实践指南)
    php验证邮箱是否合法
    如何使js函数异步执行
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/5695831.html
Copyright © 2011-2022 走看看