CODEWITHSUNDEEP
javascriptvideopluginscaptionphotoswipe
after.div
after.div

Reputation: 21

How can I use both the PhotoSwipe 5v, 'dynamic caption plugin' and 'video plugin' together?

I can't get 'photoswipe-video-plugin' to work with 'photoswipe-dynamic-caption-plugin...'

Photoswipe Video Plugin: https://github.com/dimsemenov/photoswipe-video-plugin

Photoswipe Dynamic Caption Plugin: https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin

I've stacked both plugins at the bottom of my index.php file.

  1. Videos have there captions but no video plays
  2. Images work and have captions

I'm not sure how to initialize a combination of both plugins on the same page - so to that the video plays with caption.

Like I said the captions work with images and video but the video doesn't show up.

I hope I make sense and someone is familiar with Photoswipe and plugin use cases.

Kind regards, T

PS: I figured this out, I just don't know how to upload the answer. Hmmmm.

Upvotes: 1

Views: 756

Answers (1)

after.div
after.div

Reputation: 21

PhotoSwipe
Download and connect the list of .js and .css you will need.

./photoswipe-dynamic-caption-plugin.esm.js
https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js 

./photoswipe.esm.js
https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.8/photoswipe.esm.js 
https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.8/photoswipe.esm.js 

./photoswipe-lightbox.esm.js
https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.8/photoswipe-lightbox.esm.js  

./photoswipe-video-plugin.esm.js
https://raw.githubusercontent.com/dimsemenov/photoswipe-video-plugin/main/dist/photoswipe-video-plugin.esm.js 
./photoswipe.css
https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.css 
https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.8/photoswipe.css

./photoswipe-dynamic-caption-plugin.css
https://cdnjs.cloudflare.com/ajax/libs/photoswipe-dynamic-caption-plugin/1.2.7/photoswipe-dynamic-caption-plugin.css  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Combined PhotoSwipe Video Plugin and the Dynamic Caption Plugin // I would like to thank Dmytro Semenov for creating PhotoSwipe.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--PhotoSwipe ~ Don't forget to add the CSS // photoswipe.css & photoswipe-dynamic-caption-plugin.css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.css">
    <link rel="stylesheet" href="./photoswipe-dynamic-caption-plugin.css">
    <!-- demo styles, ignore em-->
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 20px;
        background: #111111;
        color: #f5f5f5;
      }

      h1 {
        margin: 0;
        padding: 50px 50px 30px 50px;
        font-size: 26px;
        line-height: 1.3;
      }

      a:link {
        color: darkorange;
        text-decoration: none;
      }

      a:visited {
        text-decoration: none;
        color: darkorange;
      }

      a:hover {
        text-decoration: underline;
        color: coral;
      }

      a:active {
        text-decoration: none;
        color: darkorange;
      }

      /* photoswipe-dynamic-caption-plugin */
      .pswp-gallery__item {
        margin: 0 4px 4px 0;
      }

      .pswp-gallery__item img {
        display: block;
      }

      .pswp-gallery {
        max-width: 650px;
        padding: 0 50px 50px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
      }

      .pswp__dynamic-caption {
        color: #f5f5f5;
        width: 100%;
      }

      .pswp__dynamic-caption a {
        color: #fff;
        text-decoration: underline;
      }

      /* crop and cover */
      .fit-picture {
        object-fit: cover;
        width: 200px;
        height: 90px;
      }
    </style>
  </head>
  <body>
    <h1>
            Combined <a href="https://github.com/dimsemenov/photoswipe-video-plugin" target="_blank">Video Plugin</a> and the<br>
<a href="https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin" target="_blank">Dynamic Caption Plugin</a> in  <a href="https://photoswipe.com/getting-started/" target="_blank">PhotoSwipe v5</a><br>
I would like to thank Dmytro Semenov for creating PhotoSwipe. 
    </h1>
    <div class="pswp-gallery" id="gallery">
      <div class="pswp-gallery__item">
        <a href="https://dummyimage.com/600x1500/555/fff/?text=600x1500" 
                     data-pswp-width="600" 
                     data-pswp-height="1500" 
                     data-cropped="true" 
                     target="_blank">
          <img class="fit-picture" src="https://dummyimage.com/60x150/555/fff/" alt="Demo image 9" />
        </a>
        <div class="pswp-caption-content">
          <b>Another long caption</b>
          <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <br>Lorem Ipsum
        </div>
      </div>
      <div class="pswp-gallery__item">
        <a href="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
                     data-pswp-video-src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
                     data-pswp-width="800" 
                     data-pswp-height="450" 
                     data-cropped="true" 
                     data-pswp-type="video">
          <img class="fit-picture" src="https://dummyimage.com/800x450.jpg&text=video" alt="alt here" />
        </a>
        <div class="pswp-caption-content">
          <b>Samplelib</b>
          <br>Vid.001
        </div>
      </div>
      <div class="pswp-gallery__item">
        <a href="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
                     data-pswp-video-src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
                     data-pswp-width="800" 
                     data-pswp-height="450" 
                     data-cropped="true" 
                     data-pswp-type="video">
          <img class="fit-picture" src="https://dummyimage.com/800x450.jpg&text=video" alt="alt here" />
        </a>
        <div class="pswp-caption-content">
          <b>Samplelib</b>
          <br>Vid.002
        </div>
      </div>
      <div class="pswp-gallery__item">
        <a href="https://dummyimage.com/400x400/555/fff/?text=400x400" 
                     data-pswp-width="500" 
                     data-pswp-height="500" 
                     data-cropped="true" 
                     target="_blank">
          <img class="fit-picture" src="https://dummyimage.com/100x100/555/fff/" alt="Demo image 5" />
        </a>
        <div class="pswp-caption-content">Small image</div>
      </div>
    </div><!--END class="pswp-gallery" id="gallery"-->
    
        
    <script type="module">
            // Include Lightbox 
      import PhotoSwipeLightbox from './photoswipe-lightbox.esm.js';
            // Include Dynamic Caption Plugin 
      import PhotoSwipeDynamicCaption from './photoswipe-dynamic-caption-plugin.esm.js';
      const smallScreenPadding = {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      };
      const largeScreenPadding = {
        top: 30,
        bottom: 30,
        left: 0,
        right: 0
      };
      const lightbox = new PhotoSwipeLightbox({
        gallerySelector: '#gallery',
        childSelector: '.pswp-gallery__item',
        // optionaly adjust viewport
        paddingFn: (viewportSize) => {
          return viewportSize.x < 700 ? smallScreenPadding : largeScreenPadding
        },
        pswpModule: () => import('./photoswipe.esm.js')
      });
      const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
        mobileLayoutBreakpoint: 700,
        type: 'auto',
        mobileCaptionOverlapRatio: 1
      });
            // Include Video Plugin 
      import PhotoSwipeVideoPlugin from './photoswipe-video-plugin.esm.js';
      const videoPlugin = new PhotoSwipeVideoPlugin(lightbox, {
      // options
      });
      lightbox.init();
    </script>
  </body>
</html>

Upvotes: 1

Related Questions