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 JavaScript plugin.

Captions is achieved using a Dynamic caption plugin for PhotoSwipe v5.

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

Using <script type="module">

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

And similarly for the caption plugin :

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 or1 through a count and reference the index for each image using :href, :src and :alt (for the caption) like this :

<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 :

<!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

Demo : https://anjanesh.s3.amazonaws.com/demo/alpine/photoswipe.html

Image PopUp / Photo Gallery using PhotoSwipe

Comments

More from this blog

Styling the NumberFormat in JavaScript

Using getters and setters Part 3

Using getters and setters Part 2

How to access AlpineJS Data variable outside scope

Command Palette

Comments

More from this blog