# Image PopUp / Photo Gallery using PhotoSwipe

I think one of the most searched query for a jquery plugin was / is that of an image popup, photo gallery etc.

It's now almost a decade since ES6 (2015) - Say GoodBye to jQuery and welcome a Ukranian's [PhotoSwipe](https://photoswipe.com/) JavaScript plugin.

Captions is achieved using a [Dynamic caption plugin for PhotoSwipe v5](https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin).

The preferred way to load the JavaScript plugin is via a "module" remotely.

Using `<script type="module">`

```javascript
import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';
```

And similarly for the caption plugin :

```javascript
import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';
```

Then we initialise a variable to a `new` object using regular vanilla JavaScript.

We use AlpineJS to either loop through an array of objects containing the photo details like links and captions **or**[1 through a count](https://alpinejs.dev/directives/for) and reference the index for each image using `:href`, `:src` and `:alt` (for the caption) like this :

```xml
<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>
```

In case you're wondering why the colon (:) before `href`, `src` and `alt`, its because we're wanting these attributes to be parsed as JavaScript code which AlpineJS would do it for us. This is the crux of AlpineJS. For example `<span :text="'Hello' + ' World'"></span>` would concatenate the strings **Hello** and **World** and assign the span's text to **Hello World**. Same can be applied to JavaScript variables.

Here's the full source code :

```xml
<!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/photoswipe@5.2.2/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/photoswipe@5.4.4/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/photoswipe@5.4.4/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/alpinejs@3.14.1/dist/cdn.min.js" defer></script>

</body>
</html>
```

Gist : [https://gist.github.com/anjanesh/bc46a327f830e7e717271032d5b6b60a](https://gist.github.com/anjanesh/bc46a327f830e7e717271032d5b6b60a)

Demo : [https://anjanesh.s3.amazonaws.com/demo/alpine/photoswipe.html](https://anjanesh.s3.amazonaws.com/demo/alpine/photoswipe.html)
