智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

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

2021-01-06 15:32

 

  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.   

 

更多

【责任编辑:小戴工程师】

上一篇:Photoshop CS6 打字不能打出空格和出现字体无法完成请求因为程序 下一篇:dedecms分类信息模型 实现自定义联动字段和普通字段多选条件搜索

最新文章

2021-01-06 15:32

相关文章

2021-01-06 15:32
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!