点击放大 swiper+photoswipe

最新推荐文章于 2024-06-03 15:23:16 发布
qq_36602213
最新推荐文章于 2024-06-03 15:23:16 发布
阅读量4.6k
点赞数
本文链接：https://blog.csdn.net/qq_36602213/article/details/77884021
版权
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe演示</title>
<meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- Core CSS file -->


<!-- Skin CSS file (optional)
     In folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="photoswipe.css">
<link rel="stylesheet" href="default-skin/default-skin.css">
<link rel="stylesheet" href="swiper-3.4.2.min.css">
<script src="photoswipe.min.js"></script>
<script src="photoswipe-ui-default.min.js"></script>
<style>
      .swiper-slide{
         background: red;
         height: 300px;
         width: 100%;
         margin: 0;
         border: 0;
         border: none;
      }

      .swiper-slide img,.swiper-slide a{
         display: inline-block;
         width: 100%;
         height: 100%;
      }
   </style>
</head>

<body>
<div class="my-simple-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<div class="swiper-container">
   <div class="swiper-wrapper">

         <figure class="swiper-slide" itemscope itemtype="http://schema.org/ImageObject">
            <a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
               <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
         <figcaption itemprop="caption description">Image caption 2.1</figcaption>
      </figure>
      <figure class="swiper-slide" itemscope itemtype="http://schema.org/ImageObject">
         <a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
            <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
         </a>
         <figcaption itemprop="caption description">Image caption 2.1</figcaption>
      </figure>
      <figure class="swiper-slide" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
         <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
         <figcaption itemprop="caption description">Image caption 2.1</figcaption>
      </figure>


   </div>
</div>
   </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. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <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 http://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="swiper-3.4.2.min.js"></script>
<script>

   var mySwiper = new Swiper('.swiper-container', {
      autoplay: 5000,//可选选项，自动滑动
   })

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,
           childElements,
           linkEl,
           size,
           item;

       for(var i = 0; i < numNodes; i++) {


           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);
       }

       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) {
       e = e || window.event;
       e.preventDefault ? e.preventDefault() : e.returnValue = false;

       var eTarget = e.target || e.srcElement;

       var clickedListItem = closest(eTarget, function(el) {
           return el.tagName === 'FIGURE';
       });

       if(!clickedListItem) {
           return;
       }


       // find index of clicked item
       var clickedGallery = clickedListItem.parentNode,
          childNodes = clickedListItem.parentNode.childNodes,
           numChildNodes = childNodes.length,
           nodeIndex = 0,
           index;

       for (var i = 0; i < numChildNodes; i++) {
           if(childNodes[i].nodeType !== 1) { 
               continue; 
           }

           if(childNodes[i] === clickedListItem) {
               index = nodeIndex;
               break;
           }
           nodeIndex++;
       }



       if(index >= 0) {
           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(!vars[i]) {
               continue;
           }
           var pair = vars[i].split('=');  
           if(pair.length < 2) {
               continue;
           }           
           params[pair[0]] = pair[1];
       }

       if(params.gid) {
          params.gid = parseInt(params.gid, 10);
       }

       if(!params.hasOwnProperty('pid')) {
           return params;
       }
       params.pid = parseInt(params.pid, 10);
       return params;
   };

   var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
       var pswpElement = document.querySelectorAll('.pswp')[0],
           gallery,
           options,
           items;

      items = parseThumbnailElements(galleryElement);

       // define options (if needed)
       options = {
           index: index,

         // define gallery index (for URL)
           galleryUID: galleryElement.getAttribute('data-pswp-uid'),

           getThumbBoundsFn: function(index) {
               // See Options -> getThumbBoundsFn section of docs 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};
           },

           // history & focus options are disabled on CodePen
               // remove these lines in real life: 
         historyEnabled: false,
         focus: false    

       };

       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++) {
      galleryElements[i].setAttribute('data-pswp-uid', i+1);
      galleryElements[i].onclick = onThumbnailsClick;
   }

   // Parse URL and open gallery if it contains #&pid=3&gid=1
   var hashData = photoswipeParseHash();
   if(hashData.pid > 0 && hashData.gid > 0) {
      openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
   }
};

// execute above function
initPhotoSwipeFromDOM('.my-simple-gallery');
</script>
</body>
</html>
qq_36602213
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击放大 swiper+photoswipe

html>charset="UTF-8">PhotoSwipe演示name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!-- Skin CSS file (optional)
复制链接

扫一扫