photoswipe的展示时图片自适应问题 data-size自动获取问题-智软工作室

智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司，宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务，优惠的价格，深的客户信赖。相信有你的加入我们的明天会更有动力！期待与你合作！

2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案

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

2021-01-06 15:32

<!DOCTYPE html> 
<html lang="en" > 
 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"> 
  <meta charset="UTF-8"> 
   
 
 
  <title>CodePen - Multiple PhotoSwipe galleries on pagea</title> 
   
   
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css'> 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css'> 
   
<style> 
.my-gallery { 
  width: 100%; 
  float: left; 
} 
.my-gallery img { 
  width: 100%; 
  height: auto; 
} 
.my-gallery figure { 
  display: block; 
  float: left; 
  margin: 0 5px 5px 0; 
  width: 150px; 
} 
.my-gallery figcaption { 
  display: none; 
} 
</style> 
 
  <script> 
  windowwindow.console = window.console || function(t) {}; 
</script> 
 
   
   
  <script> 
  if (document.location.search.match(/type=embed/gi)) { 
    window.parent.postMessage("resize", "*"); 
  } 
</script> 
 
 
</head> 
 
<body translate="no" > 
  
   
   
   
   
  <h2>4Second gallery:</h2> 
 
  <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 
 
   
 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="https://www..tw/WebUpload/UpLoadFile/2021161173814.jpg" itemprop="contentUrl" data-size=""> 
          <img src="https://www..tw/WebUpload/UpLoadFile/2021161173814.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
      <figcaption itemprop="caption description">ddd2.1</figcaption> 
    </figure> 
 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="https://www..tw/WebUpload/UpLoadFile/2021162887102.jpg" itemprop="contentUrl" data-size=""> 
          <img src="https://www..tw/WebUpload/UpLoadFile/2021162887102.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
      <figcaption itemprop="caption description">ee 2.2</figcaption> 
    </figure> 
 
 
  </div> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!-- Root element of PhotoSwipe. Must have class pswp. --> 
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <!-- Background of PhotoSwipe.  
         It's a separate element, as animating opacity is faster than rgba(). --> 
    <div class="pswp__bg"></div> 
 
    <!-- Slides wrapper with overflow:hidden. --> 
    <div class="pswp__scroll-wrap"> 
 
        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> 
        <!-- don't modify these 3 pswp__item elements, data is added later on. --> 
        <div class="pswp__container"> 
            <div class="pswp__item"></div> 
            <div class="pswp__item"></div> 
            <div class="pswp__item"></div> 
        </div> 
 
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> 
        <div class="pswp__ui pswp__ui--hidden"> 
 
            <div class="pswp__top-bar"> 
 
                <!--  Controls are self-explanatory. Order can be changed. --> 
 
                <div class="pswp__counter"></div> 
 
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
 
                <button class="pswp__button pswp__button--share" title="Share"></button> 
 
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
 
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
 
                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR --> 
                <!-- element will get class pswp__preloader--active when preloader is running --> 
                <div class="pswp__preloader"> 
                    <div class="pswp__preloader__icn"> 
                      <div class="pswp__preloader__cut"> 
                        <div class="pswp__preloader__donut"></div> 
                      </div> 
                    </div> 
                </div> 
            </div> 
 
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
                <div class="pswp__share-tooltip"></div>  
            </div> 
 
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 
            </button> 
 
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 
            </button> 
 
            <div class="pswp__caption"> 
                <div class="pswp__caption__center"></div> 
            </div> 
 
          </div> 
 
        </div> 
 
</div> 
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> 
 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js'></script> 
 
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> 
 
      <script id="rendered-js" > 
var initPhotoSwipeFromDOM = function (gallerySelector) { 
 
  // parse slide data (url, title, size ...) from DOM elements  
  // (children of gallerySelector) 
  var parseThumbnailElements = function (el) { 
    var thumbElements = el.childNodes, 
    numNodes = thumbElements.length, 
    items = [], 
    figureEl, 
    linkEl, 
    size, 
    item; 
 
    for (var i = 0; i < numNodes; i++) {if (window.CP.shouldStopExecution(0)) break; 
 
      figureEl = thumbElements[i]; // <figure> element 
 
      // include only element nodes  
      if (figureEl.nodeType !== 1) { 
        continue; 
      } 
 
      linkEl = figureEl.children[0]; // <a> element 
 
 
      size = linkEl.getAttribute('data-size').split('x'); 
 
      // create slide object 
      item = { 
        src: linkEl.getAttribute('href'), 
        w: parseInt(size[0], 10), 
        h: parseInt(size[1], 10) }; 
 
 
 
 
      if (figureEl.children.length > 1) { 
        // <figcaption> content 
        item.title = figureEl.children[1].innerHTML; 
      } 
 
      if (linkEl.children.length > 0) { 
        // <img> thumbnail element, retrieving thumbnail url 
        item.msrc = linkEl.children[0].getAttribute('src'); 
      } 
 
      item.el = figureEl; // save link to element for getThumbBoundsFn 
      items.push(item); 
    }window.CP.exitedLoop(0); 
 
    return items; 
  }; 
 
  // find nearest parent element 
  var closest = function closest(el, fn) { 
    return el && (fn(el) ? el : closest(el.parentNode, fn)); 
  }; 
 
  // triggers when user clicks on thumbnail 
  var onThumbnailsClick = function (e) { 
    ee = e || window.event; 
    e.preventDefault ? e.preventDefault() : e.returnValue = false; 
 
    var eeTarget = e.target || e.srcElement; 
 
    // find root element of slide 
    var clickedListItem = closest(eTarget, function (el) { 
      return el.tagName && el.tagName.toUpperCase() === 'FIGURE'; 
    }); 
 
    if (!clickedListItem) { 
      return; 
    } 
 
    // find index of clicked item by looping through all child nodes 
    // alternatively, you may define index via data- attribute 
    var clickedGallery = clickedListItem.parentNode, 
    childNodes = clickedListItem.parentNode.childNodes, 
    numChildNodes = childNodes.length, 
    nodeIndex = 0, 
    index; 
 
    for (var i = 0; i < numChildNodes; i++) {if (window.CP.shouldStopExecution(1)) break; 
      if (childNodes[i].nodeType !== 1) { 
        continue; 
      } 
 
      if (childNodes[i] === clickedListItem) { 
        index = nodeIndex; 
        break; 
      } 
      nodeIndex++; 
    }window.CP.exitedLoop(1); 
 
 
 
    if (index >= 0) { 
      // open PhotoSwipe if valid index found 
      openPhotoSwipe(index, clickedGallery); 
    } 
    return false; 
  }; 
 
  // parse picture index and gallery index from URL (#&pid=1&gid=2) 
  var photoswipeParseHash = function () { 
    var hash = window.location.hash.substring(1), 
    params = {}; 
 
    if (hash.length < 5) { 
      return params; 
    } 
 
    var vars = hash.split('&'); 
    for (var i = 0; i < vars.length; i++) {if (window.CP.shouldStopExecution(2)) break; 
      if (!vars[i]) { 
        continue; 
      } 
      var pair = vars[i].split('='); 
      if (pair.length < 2) { 
        continue; 
      } 
      params[pair[0]] = pair[1]; 
    }window.CP.exitedLoop(2); 
 
    if (params.gid) { 
      params.gid = parseInt(params.gid, 10); 
    } 
 
    return params; 
  }; 
 
  var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) { 
    var pswpElement = document.querySelectorAll('.pswp')[0], 
    gallery, 
    options, 
    items; 
 
    items = parseThumbnailElements(galleryElement); 
 
    // define options (if needed) 
    options = { 
 
      // define gallery index (for URL) 
      galleryUID: galleryElement.getAttribute('data-pswp-uid'), 
 
      getThumbBoundsFn: function (index) { 
        // See Options -> getThumbBoundsFn section of documentation for more info 
        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail 
        pageYScroll = window.pageYOffset || document.documentElement.scrollTop, 
        rect = thumbnail.getBoundingClientRect(); 
 
        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; 
      } }; 
 
 
 
    // PhotoSwipe opened from URL 
    if (fromURL) { 
      if (options.galleryPIDs) { 
        // parse real index when custom PIDs are used  
        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url 
        for (var j = 0; j < items.length; j++) {if (window.CP.shouldStopExecution(3)) break; 
          if (items[j].pid == index) { 
            options.index = j; 
            break; 
          } 
        }window.CP.exitedLoop(3); 
      } else { 
        // in URL indexes start from 1 
        options.index = parseInt(index, 10) - 1; 
      } 
    } else { 
      options.index = parseInt(index, 10); 
    } 
 
    // exit if index not found 
    if (isNaN(options.index)) { 
      return; 
    } 
 
    if (disableAnimation) { 
      options.showAnimationDuration = 0; 
    } 
 
    // Pass data to PhotoSwipe and initialize it 
    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
    gallery.init(); 
  }; 
 
  // loop through all gallery elements and bind events 
  var galleryElements = document.querySelectorAll(gallerySelector); 
 
  for (var i = 0, l = galleryElements.length; i < l; i++) {if (window.CP.shouldStopExecution(4)) break; 
    galleryElements[i].setAttribute('data-pswp-uid', i + 1); 
    galleryElements[i].onclick = onThumbnailsClick; 
  } 
 
  // Parse URL and open gallery if it contains #&pid=3&gid=1 
  window.CP.exitedLoop(4);var hashData = photoswipeParseHash(); 
  if (hashData.pid && hashData.gid) { 
    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true); 
  } 
}; 
 
// execute above function 
initPhotoSwipeFromDOM('.my-gallery'); 
//# sourceURL=pen.js 
 
 
 
 
 
 
 
 
 
 
 
 /**重点。直接利用jq加载，自动获取图片得 data-size 得参数 */
 
window.onload=function(){ 
auto_data_size(); 
}; 
function auto_data_size(){ 
var imgss= $("figure img"); 
$("figure img").each(function() { 
var imgs = new Image(); 
imgs.src=$(this).attr("src"); 
var w = imgs.width, 
h =imgs.height; 
$(this).parent("a").attr("data-size","").attr("data-size",w+"x"+h); 
}) 
}; 
    </script> 
 
   
</body> 
 
</html>