index.html

---
layout: default
---

<script type="module">
    import PhotoSwipeDynamicCaption from 'https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';
    window.PhotoSwipeDynamicCaption = PhotoSwipeDynamicCaption
</script>

<link rel="stylesheet" href="https://unpkg.com/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css">

<style>
    .ng-custom-button {
        font-size: 20px;
        background: #b72ae2;
        color:white;
        margin-top: 10px;
        height: 45px;
        line-height:30px;
        border-radius:4px;
        padding:0 5px;
        width:auto
    }

    .ng-custom-button:hover {
        background: #c35ee5;
        padding:0 5px;
    }
</style>

<script type="module">
    var options = {
        rowHeight: 400,
        lightbox: true,
        ratioLimit: {
            min: .5,
            max: 2
        },
        photoSwipeOptions: {
            padding: { top: 20, bottom: 40, left: 10, right: 10 },
        },
        // photoSwipePluginsInitFn: (lightbox) => {
        //     const captionPlugin = new window.PhotoSwipeDynamicCaption(lightbox, {
        //         captionContent: '.title',
        //         // type: 'below',
        //     });
        // }
    };

    import {Natural} from './assets/natural-gallery-js/natural-gallery.js';
    import {setupDemo} from './assets/main.js';

    setupDemo(Natural, options);

</script>

{%- include gallery.html -%}