photoswipe的展示时图片自适应问题 data-size自动获取问题

 


  1. <!DOCTYPE html> 
  2. <html lang="en" > 
  3.  
  4. <head> 
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"> 
  6.   <meta charset="UTF-8"> 
  7.    
  8.  
  9.  
  10.   <title>CodePen - Multiple PhotoSwipe galleries on pagea</title> 
  11.    
  12.    
  13.   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css'> 
  14. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css'> 
  15.    
  16. <style> 
  17. .my-gallery { 
  18.   width: 100%; 
  19.   float: left; 
  20. .my-gallery img { 
  21.   width: 100%; 
  22.   height: auto; 
  23. .my-gallery figure { 
  24.   display: block; 
  25.   float: left; 
  26.   margin: 0 5px 5px 0; 
  27.   width: 150px; 
  28. .my-gallery figcaption { 
  29.   display: none; 
  30. </style> 
  31.  
  32.   <script> 
  33.   windowwindow.console = window.console || function(t) {}; 
  34. </script> 
  35.  
  36.    
  37.    
  38.   <script> 
  39.   if (document.location.search.match(/type=embed/gi)) { 
  40.     window.parent.postMessage("resize", "*"); 
  41.   } 
  42. </script> 
  43.  
  44.  
  45. </head> 
  46.  
  47. <body translate="no" > 
  48.   
  49.    
  50.    
  51.    
  52.    
  53.   <h2>4Second gallery:</h2> 
  54.  
  55.   <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 
  56.  
  57.    
  58.  
  59.     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
  60.       <a href="https://www..tw/WebUpload/UpLoadFile/2021161173814.jpg" itemprop="contentUrl" data-size=""> 
  61.           <img src="https://www..tw/WebUpload/UpLoadFile/2021161173814.jpg" itemprop="thumbnail" alt="Image description" /> 
  62.       </a> 
  63.       <figcaption itemprop="caption description">ddd2.1</figcaption> 
  64.     </figure> 
  65.  
  66.     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
  67.       <a href="https://www..tw/WebUpload/UpLoadFile/2021162887102.jpg" itemprop="contentUrl" data-size=""> 
  68.           <img src="https://www..tw/WebUpload/UpLoadFile/2021162887102.jpg" itemprop="thumbnail" alt="Image description" /> 
  69.       </a> 
  70.       <figcaption itemprop="caption description">ee 2.2</figcaption> 
  71.     </figure> 
  72.  
  73.  
  74.   </div> 
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98. <!-- Root element of PhotoSwipe. Must have class pswp. --> 
  99. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
  100.  
  101.     <!-- Background of PhotoSwipe.  
  102.          It's a separate element, as animating opacity is faster than rgba(). --> 
  103.     <div class="pswp__bg"></div> 
  104.  
  105.     <!-- Slides wrapper with overflow:hidden. --> 
  106.     <div class="pswp__scroll-wrap"> 
  107.  
  108.         <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> 
  109.         <!-- don't modify these 3 pswp__item elements, data is added later on. --> 
  110.         <div class="pswp__container"> 
  111.             <div class="pswp__item"></div> 
  112.             <div class="pswp__item"></div> 
  113.             <div class="pswp__item"></div> 
  114.         </div> 
  115.  
  116.         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 
  117.         <div class="pswp__ui pswp__ui--hidden"> 
  118.  
  119.             <div class="pswp__top-bar"> 
  120.  
  121.                 <!--  Controls are self-explanatory. Order can be changed. --> 
  122.  
  123.                 <div class="pswp__counter"></div> 
  124.  
  125.                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
  126.  
  127.                 <button class="pswp__button pswp__button--share" title="Share"></button> 
  128.  
  129.                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
  130.  
  131.                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
  132.  
  133.                 <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR --> 
  134.                 <!-- element will get class pswp__preloader--active when preloader is running --> 
  135.                 <div class="pswp__preloader"> 
  136.                     <div class="pswp__preloader__icn"> 
  137.                       <div class="pswp__preloader__cut"> 
  138.                         <div class="pswp__preloader__donut"></div> 
  139.                       </div> 
  140.                     </div> 
  141.                 </div> 
  142.             </div> 
  143.  
  144.             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
  145.                 <div class="pswp__share-tooltip"></div>  
  146.             </div> 
  147.  
  148.             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 
  149.             </button> 
  150.  
  151.             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 
  152.             </button> 
  153.  
  154.             <div class="pswp__caption"> 
  155.                 <div class="pswp__caption__center"></div> 
  156.             </div> 
  157.  
  158.           </div> 
  159.  
  160.         </div> 
  161.  
  162. </div> 
  163.     <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> 
  164.  
  165.   <script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js'></script> 
  166. <script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js'></script> 
  167.  
  168. <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> 
  169.  
  170.       <script id="rendered-js" > 
  171. var initPhotoSwipeFromDOM = function (gallerySelector) { 
  172.  
  173.   // parse slide data (url, title, size ...) from DOM elements  
  174.   // (children of gallerySelector) 
  175.   var parseThumbnailElements = function (el) { 
  176.     var thumbElements = el.childNodes, 
  177.     numNodes = thumbElements.length, 
  178.     items = [], 
  179.     figureEl, 
  180.     linkEl, 
  181.     size, 
  182.     item; 
  183.  
  184.     for (var i = 0; i < numNodes; i++) {if (window.CP.shouldStopExecution(0)) break; 
  185.  
  186.       figureEl = thumbElements[i]; // <figure> element 
  187.  
  188.       // include only element nodes  
  189.       if (figureEl.nodeType !== 1) { 
  190.         continue; 
  191.       } 
  192.  
  193.       linkEl = figureEl.children[0]; // <a> element 
  194.  
  195.  
  196.       size = linkEl.getAttribute('data-size').split('x'); 
  197.  
  198.       // create slide object 
  199.       item = { 
  200.         src: linkEl.getAttribute('href'), 
  201.         w: parseInt(size[0], 10), 
  202.         h: parseInt(size[1], 10) }; 
  203.  
  204.  
  205.  
  206.  
  207.       if (figureEl.children.length > 1) { 
  208.         // <figcaption> content 
  209.         item.title = figureEl.children[1].innerHTML; 
  210.       } 
  211.  
  212.       if (linkEl.children.length > 0) { 
  213.         // <img> thumbnail element, retrieving thumbnail url 
  214.         item.msrc = linkEl.children[0].getAttribute('src'); 
  215.       } 
  216.  
  217.       item.el = figureEl; // save link to element for getThumbBoundsFn 
  218.       items.push(item); 
  219.     }window.CP.exitedLoop(0); 
  220.  
  221.     return items; 
  222.   }; 
  223.  
  224.   // find nearest parent element 
  225.   var closest = function closest(el, fn) { 
  226.     return el && (fn(el) ? el : closest(el.parentNode, fn)); 
  227.   }; 
  228.  
  229.   // triggers when user clicks on thumbnail 
  230.   var onThumbnailsClick = function (e) { 
  231.     ee = e || window.event; 
  232.     e.preventDefault ? e.preventDefault() : e.returnValue = false
  233.  
  234.     var eeTarget = e.target || e.srcElement; 
  235.  
  236.     // find root element of slide 
  237.     var clickedListItem = closest(eTarget, function (el) { 
  238.       return el.tagName && el.tagName.toUpperCase() === 'FIGURE'; 
  239.     }); 
  240.  
  241.     if (!clickedListItem) { 
  242.       return; 
  243.     } 
  244.  
  245.     // find index of clicked item by looping through all child nodes 
  246.     // alternatively, you may define index via data- attribute 
  247.     var clickedGallery = clickedListItem.parentNode, 
  248.     childNodes = clickedListItem.parentNode.childNodes, 
  249.     numChildNodes = childNodes.length, 
  250.     nodeIndex = 0
  251.     index; 
  252.  
  253.     for (var i = 0; i < numChildNodes; i++) {if (window.CP.shouldStopExecution(1)) break; 
  254.       if (childNodes[i].nodeType !== 1) { 
  255.         continue; 
  256.       } 
  257.  
  258.       if (childNodes[i] === clickedListItem) { 
  259.         index = nodeIndex
  260.         break; 
  261.       } 
  262.       nodeIndex++; 
  263.     }window.CP.exitedLoop(1); 
  264.  
  265.  
  266.  
  267.     if (index >= 0) { 
  268.       // open PhotoSwipe if valid index found 
  269.       openPhotoSwipe(index, clickedGallery); 
  270.     } 
  271.     return false; 
  272.   }; 
  273.  
  274.   // parse picture index and gallery index from URL (#&pid=1&gid=2
  275.   var photoswipeParseHash = function () { 
  276.     var hash = window.location.hash.substring(1), 
  277.     params = {}; 
  278.  
  279.     if (hash.length < 5) { 
  280.       return params; 
  281.     } 
  282.  
  283.     var vars = hash.split('&'); 
  284.     for (var i = 0; i < vars.length; i++) {if (window.CP.shouldStopExecution(2)) break; 
  285.       if (!vars[i]) { 
  286.         continue; 
  287.       } 
  288.       var pair = vars[i].split('='); 
  289.       if (pair.length < 2) { 
  290.         continue; 
  291.       } 
  292.       params[pair[0]] = pair[1]; 
  293.     }window.CP.exitedLoop(2); 
  294.  
  295.     if (params.gid) { 
  296.       params.gid = parseInt(params.gid, 10); 
  297.     } 
  298.  
  299.     return params; 
  300.   }; 
  301.  
  302.   var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) { 
  303.     var pswpElement = document.querySelectorAll('.pswp')[0], 
  304.     gallery, 
  305.     options, 
  306.     items; 
  307.  
  308.     items = parseThumbnailElements(galleryElement); 
  309.  
  310.     // define options (if needed) 
  311.     options = { 
  312.  
  313.       // define gallery index (for URL) 
  314.       galleryUID: galleryElement.getAttribute('data-pswp-uid'), 
  315.  
  316.       getThumbBoundsFn: function (index) { 
  317.         // See Options -> getThumbBoundsFn section of documentation for more info 
  318.         var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail 
  319.         pageYScroll = window.pageYOffset || document.documentElement.scrollTop, 
  320.         rect = thumbnail.getBoundingClientRect(); 
  321.  
  322.         return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; 
  323.       } }; 
  324.  
  325.  
  326.  
  327.     // PhotoSwipe opened from URL 
  328.     if (fromURL) { 
  329.       if (options.galleryPIDs) { 
  330.         // parse real index when custom PIDs are used  
  331.         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url 
  332.         for (var j = 0; j < items.length; j++) {if (window.CP.shouldStopExecution(3)) break; 
  333.           if (items[j].pid == index) { 
  334.             options.index = j
  335.             break; 
  336.           } 
  337.         }window.CP.exitedLoop(3); 
  338.       } else { 
  339.         // in URL indexes start from 1 
  340.         options.index = parseInt(index, 10) - 1; 
  341.       } 
  342.     } else { 
  343.       options.index = parseInt(index, 10); 
  344.     } 
  345.  
  346.     // exit if index not found 
  347.     if (isNaN(options.index)) { 
  348.       return; 
  349.     } 
  350.  
  351.     if (disableAnimation) { 
  352.       options.showAnimationDuration = 0
  353.     } 
  354.  
  355.     // Pass data to PhotoSwipe and initialize it 
  356.     gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
  357.     gallery.init(); 
  358.   }; 
  359.  
  360.   // loop through all gallery elements and bind events 
  361.   var galleryElements = document.querySelectorAll(gallerySelector); 
  362.  
  363.   for (var i = 0l = galleryElements.length; i < l; i++) {if (window.CP.shouldStopExecution(4)) break; 
  364.     galleryElements[i].setAttribute('data-pswp-uid', i + 1); 
  365.     galleryElements[i].onclick = onThumbnailsClick
  366.   } 
  367.  
  368.   // Parse URL and open gallery if it contains #&pid=3&gid=1 
  369.   window.CP.exitedLoop(4);var hashData = photoswipeParseHash(); 
  370.   if (hashData.pid && hashData.gid) { 
  371.     openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true); 
  372.   } 
  373. }; 
  374.  
  375. // execute above function 
  376. initPhotoSwipeFromDOM('.my-gallery'); 
  377. //# sourceURL=pen.js 
  378.  
  379.  
  380.  
  381.  
  382.  
  383.  
  384.  
  385.  
  386.  
  387.  
  388.  
  389.  /**重点。直接利用jq加载,自动获取图片得 data-size 得参数 */
  390.  
  391. window.onload=function(){ 
  392. auto_data_size(); 
  393. }; 
  394. function auto_data_size(){ 
  395. var imgss= $("figure img"); 
  396. $("figure img").each(function() { 
  397. var imgs = new Image(); 
  398. imgs.src=$(this).attr("src"); 
  399. var w = imgs.width, 
  400. h =imgs.height; 
  401. $(this).parent("a").attr("data-size","").attr("data-size",w+"x"+h); 
  402. }) 
  403. }; 
  404.     </script> 
  405.  
  406.    
  407. </body> 
  408.  
  409. </html> 
  410.