{% extends "main.html" %}

{% block content %}
<!-- grid -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- lightbox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>

<!-- todo: center grid -->

<h1 style="text-align: center;">Community Nodes</h1>

<div id="gallery">
    <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 410 }'>
        <div class="grid-item">
            <a href="../assets/images/gallery/image32.jpg">
                <img src="../assets/images/gallery/image32.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image01.jpg">
                <img src="../assets/images/gallery/image01.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image02.jpg">
                <img src="../assets/images/gallery/image02.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image03.jpg">
                <img src="../assets/images/gallery/image03.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image04.jpg">
                <img src="../assets/images/gallery/image04.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image05.jpg">
                <img src="../assets/images/gallery/image05.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image06.jpg">
                <img src="../assets/images/gallery/image06.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image07.jpg">
                <img src="../assets/images/gallery/image07.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image08.jpg">
                <img src="../assets/images/gallery/image08.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image09.jpg">
                <img src="../assets/images/gallery/image09.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image10.jpg">
                <img src="../assets/images/gallery/image10.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image11.jpg">
                <img src="../assets/images/gallery/image11.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image12.jpg">
                <img src="../assets/images/gallery/image12.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image13.jpg">
                <img src="../assets/images/gallery/image13.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image14.jpg">
                <img src="../assets/images/gallery/image14.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image15.jpg">
                <img src="../assets/images/gallery/image15.jpg" width="400"/>
            </a>
        </div>
        <div class="grid-item">
            <a href="../assets/images/gallery/image08.jpg">
                <img src="../assets/images/gallery/image08.jpg" width="400"/>
            </a>
        </div>
    </div>
</div>

<script>
    Fancybox.bind("#gallery a", {
    groupAll: true,
    });
</script>


<!--
<link type="text/css" rel="stylesheet" href="https://unpkg.com/browse/lightgallery@2.7.2/css/lightgallery-bundle.css"/>
<script src="https://unpkg.com/browse/lightgallery@2.7.2/lightgallery.umd.js"></script>
<script src="https://unpkg.com/browse/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.umd.js"></script>
<script src="https://unpkg.com/browse/lightgallery@2.7.2/plugins/zoom/lg-zoom.umd.js"></script>
<div id="lightgallery">
    <a href="../assets/images/gallery/image01.jpg" data-lg-size="100-100">
        <img alt="img1" src="../assets/images/gallery/image01.jpg" />
    </a>
    <a href="../assets/images/gallery/image02.jpg" data-lg-size="1024-800">
        <img alt="img2" src="../assets/images/gallery/image02.jpg" />
    </a>
</div>
<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
        licenseKey: "0000-0000-000-0000",
    });
</script>
-->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/jquery.nanogallery2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/css/nanogallery2.min.css" rel="stylesheet">

<div id="nanogallery2"
    data-nanogallery2 = '{
          "thumbnailHeight":  300,
          "thumbnailWidth":   "auto"
        }' >
    <a href="../assets/images/shit.png"></a>
    <a href="../assets/images/gallery/image01.jpg"></a>
    <a href="../assets/images/gallery/image02.jpg"></a>
    <a href="../assets/images/gallery/image03.jpg"></a>
    <a href="../assets/images/gallery/image04.jpg"></a>
    <a href="../assets/images/gallery/image05.jpg"></a>
    <a href="../assets/images/gallery/image06.jpg"></a>
    <a href="../assets/images/gallery/image07.jpg"></a>
    <a href="../assets/images/gallery/image08.jpg"></a>
    <a href="../assets/images/gallery/image09.jpg"></a>
    <a href="../assets/images/gallery/image10.jpg"></a>
    <a href="../assets/images/gallery/image11.jpg"></a>
    <a href="../assets/images/gallery/image12.jpg"></a>
    <a href="../assets/images/gallery/image13.jpg"></a>
    <a href="../assets/images/gallery/image14.jpg"></a>
    <a href="../assets/images/gallery/image15.jpg"></a>
    <a href="../assets/images/gallery/image16.jpg"></a>
    <a href="../assets/images/gallery/image17.jpg"></a>
    <a href="../assets/images/gallery/image18.jpg"></a>
    <a href="../assets/images/gallery/image19.jpg"></a>
    <a href="../assets/images/gallery/image20.jpg"></a>
    <a href="../assets/images/gallery/image21.jpg"></a>
    <a href="../assets/images/gallery/image22.jpg"></a>
    <a href="../assets/images/gallery/image23.jpg"></a>
    <a href="../assets/images/gallery/image24.jpg"></a>
    <a href="../assets/images/gallery/image25.jpg"></a>
    <a href="../assets/images/gallery/image26.jpg"></a>
    <a href="../assets/images/gallery/image27.jpg"></a>
    <a href="../assets/images/gallery/image28.jpg"></a>
    <a href="../assets/images/gallery/image29.jpg"></a>
    <a href="../assets/images/gallery/image30.jpg"></a>
    <a href="../assets/images/gallery/image31.jpg"></a>
</div>
-->
{% endblock %}