Skip to main content

Resources

Baserow​

Rich Components and Easy Forms with Tailwind​

SEO on Docusaurus​

Hyvor Blogs​

  • Gallery. Use photo swipe and use the script below in the body and the css in the head on a post and the sample in the end in an HTML part of the post.

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.3.7/dist/photoswipe.css">

    <script type='module'>
           import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';
           const lightbox = new PhotoSwipeLightbox({
             gallery: '#my-gallery',
             children: 'a',
             pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.esm.js')
           });
           lightbox.init();
        </script>
    <div id="app">
           <div class="pswp-gallery" id="my-gallery">
              <a
                 href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"
                 data-pswp-width="1875"
                 data-pswp-height="2500"
                 target="_blank"
                 >
              <img
                 src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg"
                 alt=""
                 />
              </a>
              <a
                 href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
                 data-pswp-width="1669"
                 data-pswp-height="2500"
                 target="_blank"
                 >
              <img
                 src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg"
                 alt=""
                 />
              </a>
              <a
                 href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
                 data-pswp-width="2500"
                 data-pswp-height="1666"
                 target="_blank"
                 >
              <img
                 src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg"
                 alt=""
                 />
              </a>
           </div>
        </div>