anjanesh · July 4, 2024 02:25
diff --git a/photoswipe-alpinejs.html b/photoswipe-alpinejs.html
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Photoswipe + AlpineJS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link  rel="stylesheet" href="https://unpkg.com/[email protected]/dist/photoswipe.css" />
    <link rel="stylesheet" href="https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css">
 </head>
 <body>

 <div class="container">
    <h2 class="text-center text-2xl text-[#022350] md:text-[44px] md:leading-normal">Here's Exactly What You'll See in the PlanPros Members Area</h2>
    <div x-data="" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 pswp-gallery" id="gallery-screenshots">
        <template x-for="i in 18">
            <a :href="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'"
               data-pswp-width="1292"
               data-pswp-height="1225"
               target="_blank">
                <img :src="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'" :alt="'screenshot demo ' + i" />
            </a>            
        </template>
    </div>
 </div>


 <script type="module">
 import PhotoSwipeLightbox from 'https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js';
 import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';

 const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery-screenshots',
    children: 'a',
    pswpModule: () => import('https://unpkg.com/[email protected]/dist/photoswipe.esm.js'),
 });

 // https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
 const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
  // Plugins options, for example:
  type: 'auto',
 });

 lightbox.init();
 </script>

 <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Photoswipe + AlpineJS</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/photoswipe.css" />
	<link rel="stylesheet" href="https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css">
	</head>
	<body>

	<div class="container">
	<h2 class="text-center text-2xl text-[#022350] md:text-[44px] md:leading-normal">Here's Exactly What You'll See in the PlanPros Members Area</h2>
	<div x-data="" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 pswp-gallery" id="gallery-screenshots">
	<template x-for="i in 18">
	<a :href="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'"
	data-pswp-width="1292"
	data-pswp-height="1225"
	target="_blank">
	<img :src="'https://planpros.s3.amazonaws.com/images/' + i + 's.webp'" :alt="'screenshot demo ' + i" />
	</a>
	</template>
	</div>
	</div>


	<script type="module">
	import PhotoSwipeLightbox from 'https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js';
	import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';

	const lightbox = new PhotoSwipeLightbox({
	gallery: '#gallery-screenshots',
	children: 'a',
	pswpModule: () => import('https://unpkg.com/[email protected]/dist/photoswipe.esm.js'),
	});

	// https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin
	const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
	// Plugins options, for example:
	type: 'auto',
	});

	lightbox.init();
	</script>

	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

	</body>
	</html>