krot

PhotoSwipe vue

Feb 29th, 2020
61
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>  
  2.   <div>
  3.    
  4.  
  5. <button id="btn" v-on:click="onOpenGallery(index)" v-for="(item,index) in items" :key="index">{{item.name}}</button>
  6.  
  7. <!-- Root element of PhotoSwipe. Must have class pswp. -->
  8. <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  9.  
  10.     <!-- Background of PhotoSwipe.
  11.          It's a separate element, as animating opacity is faster than rgba(). -->
  12.    <div class="pswp__bg"></div>
  13.  
  14.    <!-- Slides wrapper with overflow:hidden. -->
  15.    <div class="pswp__scroll-wrap">
  16.  
  17.        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
  18.        <div class="pswp__container">
  19.            <!-- don't modify these 3 pswp__item elements, data is added later on -->
  20.             <div class="pswp__item"></div>
  21.             <div class="pswp__item"></div>
  22.             <div class="pswp__item"></div>
  23.         </div>
  24.  
  25.         <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  26.         <div class="pswp__ui pswp__ui--hidden">
  27.  
  28.             <div class="pswp__top-bar">
  29.  
  30.                 <!--  Controls are self-explanatory. Order can be changed. -->
  31.  
  32.                 <div class="pswp__counter"></div>
  33.  
  34.                 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  35.  
  36.                 <button class="pswp__button pswp__button--share" title="Share"></button>
  37.  
  38.                 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  39.  
  40.                 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  41.  
  42.                 <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  43.                 <!-- element will get class pswp__preloader--active when preloader is running -->
  44.                 <div class="pswp__preloader">
  45.                     <div class="pswp__preloader__icn">
  46.                       <div class="pswp__preloader__cut">
  47.                         <div class="pswp__preloader__donut"></div>
  48.                       </div>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.  
  53.             <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  54.                 <div class="pswp__share-tooltip"></div>
  55.             </div>
  56.  
  57.             <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  58.             </button>
  59.  
  60.             <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  61.             </button>
  62.  
  63.             <div class="pswp__caption">
  64.                 <div class="pswp__caption__center"></div>
  65.             </div>
  66.  
  67.           </div>
  68.  
  69.         </div>
  70.  
  71. </div>
  72.  
  73.  
  74.  
  75.  
  76.   </div>
  77. </template>  
  78. <script>
  79.  
  80.    
  81. import PhotoSwipe from 'photoswipe/dist/photoswipe'
  82. import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
  83.   import 'photoswipe/dist/photoswipe.css'
  84.   import 'photoswipe/dist/default-skin/default-skin.css'
  85.  
  86. export default {
  87.   components: {
  88.      // eslint-disable-next-line vue/no-unused-components
  89.      PhotoSwipe,PhotoSwipeUI_Default
  90.   },
  91.   data:() => ({
  92.     pswpElement:null,
  93.      options: {
  94.              // history & focus options are disabled on CodePen        
  95.         history: false,
  96.         focus: false,
  97.  
  98.         showAnimationDuration: 0,
  99.         hideAnimationDuration: 0,
  100.         index:0,
  101.         shareButtons: [
  102.            {id:'download', label:'Скачать', url:'{{raw_image_url}}', download:true}
  103.           ],
  104.  
  105.  
  106.  
  107.     },
  108.      
  109.  
  110.      items:[
  111.  
  112. {
  113.       name:"gffg",
  114.           images: [{
  115.             src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
  116.             w: 1024,
  117.             h: 683,
  118.      
  119.            
  120.         },
  121.         {
  122.             src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
  123.             w: 1024,
  124.             h: 683,
  125.            
  126.         }
  127.     {
  128.              html: '<div class="video-wrapper"><video playsinline controls controlsList="nodownload"><source src="http://j/fj45"/></video></div>',
  129.             title:'1',
  130.            
  131.  
  132.        },
  133.  
  134.       ]
  135.  
  136. },
  137.  
  138.  
  139. {
  140.       name:"22222222222",
  141.           images: [{
  142.             src: 'https://live.staticflickr.com/4838/45925416992_9af1b42067_k.jpg',
  143.             w: 1024,
  144.             h: 683,
  145.      
  146.            
  147.         },
  148.         {
  149.             src: 'https://live.staticflickr.com/5598/14934282524_577a904d2b_k.jpg',
  150.             w: 1024,
  151.             h: 683,
  152.            
  153.         },
  154.           {
  155.             src: 'https://live.staticflickr.com/5213/5508784414_d2d84f9c92_b.jpg',
  156.             w: 1024,
  157.             h: 683,
  158.            
  159.         },
  160.  
  161.       ]
  162.  
  163. },
  164.  
  165.  
  166.  
  167.  
  168.  
  169.  
  170.      ]
  171.        
  172.  
  173.    
  174.  
  175.     }),
  176.   methods: {
  177.  pause:function(){
  178.       window.document.querySelectorAll('video')
  179.      .forEach(function(Item) {
  180.         Item.pause();
  181.     //  Item.currentTime = 0
  182.       }
  183.      );
  184.   },
  185.     onOpenGallery( index){
  186.           var self=this;
  187.    //   this.options.index=i;
  188.    
  189.       var  gallery = new PhotoSwipe( this.pswpElement, PhotoSwipeUI_Default, this.items[index].images, this.options);
  190.  gallery.listen('gettingData', function(index, item) {
  191.               if (item.w < 1 || item.h < 1) { // unknown size
  192.               var img = new Image();
  193.               img.onload = function() { // will get size after load
  194.               item.w = this.width; // set image width
  195.               item.h = this.height; // set image height
  196.                 gallery.invalidateCurrItems(); // reinit Items
  197.                 gallery.updateSize(true); // reinit Items
  198.               }
  199.           img.src = item.src; // let's download image
  200.           }
  201.       });
  202.     gallery.listen('afterChange', function() {
  203.      //  window.console.log(window.document.querySelectorAll('.my_video'),gallery.currItem);
  204.         // eslint-disable-next-line no-undef
  205.    
  206.            
  207.  
  208.     });
  209.  
  210.  
  211.     gallery.listen('close', function() {
  212.         self.pause();
  213.  
  214.    });
  215.  
  216.     gallery.listen('beforeChange', function() {
  217.       // self.removeVideo();
  218.       self.pause();
  219.      
  220.     });
  221.  
  222.  
  223.     gallery.init();
  224.     }
  225.    
  226.   },
  227.  mounted() {
  228.  
  229.    this.pswpElement = document.querySelectorAll('.pswp')[0];
  230.  
  231.    
  232.    
  233.  
  234.  
  235.  
  236.  }
  237. }  
  238. </script>
  239. <style  >
  240. .video-wrapper video{
  241.     margin: 0;
  242.  position: absolute;
  243.     top: 50%;
  244.     left: 50%;
  245.     margin-right: -50%;
  246.     transform: translate(-50%, -50%);
  247.     padding-top: 40px;
  248.     max-width:100%;
  249.     max-height:100%;
  250. }
  251.  
  252.  
  253. </style>
RAW Paste Data