simple-images-upload/views/pages/gallery.ejs

<main class="layout-maxed collection" id="gallery">
  <div class="grid gap-5 grid-cols-1 md:grid-cols-4 list hover">
    <%
    for ( let i = 0 ; i < page.images.length ; i += 1 ) {
      const image = page.images[i];
    %>
      <div
        class="item link imagesPreview"
        data-toggle="modal"
        id="item-<%= i %>"
        data-original="<%= image.originalFile %>"
        data-medium="<%= image.mediumFile %>"
        data-small="<%= image.smallFile %>"
        onclick="displayImageDetails('<%= i %>')"
      >
        <div>
          <img src="<%= image.smallFile %>" alt="Image <%= i %>">
        </div>
        <div>
          <small>
            Le <%= DateTime.fromMillis(image.time).setLocale('fr').toFormat('D à T') %>
          </small>
        </div>
      </div>
    <%
  }
  %>
  </div>

  <nav class="pagination" role="navigation" aria-label="Pagination">
    <ul class="pagination-list">
        <% if ( page.currentPage > 1 ) { %>
        <li>
            <a class="pagination-link" href="?page=1" aria-label="Aller à la première page">
              &laquo;
            </a>
        </li>
        <li>
            <a class="pagination-link" href="?page=<%= page.currentPage - 1 %>" aria-label="Aller à la page précédente">
              &lsaquo;
            </a>
        </li>
        <% } %>
        <% for ( let i = 1 ; i <= page.totalPages ; i += 1 ) { %>
          <% if (i < 2 || i > (page.totalPages - 1) || (Number(page.currentPage) - 1) <= i && Number(page.currentPage) + 1 >= i) { %>
            <li>
                <a class="pagination-link <%= i === page.currentPage ? 'is-current' : '' %>" href="?page=<%= i %>">
                  <%= i %>
                </a>
            </li>
          <% } %>
          <% if ((Number(page.currentPage) - 3 === i && Number(page.currentPage) - 2 > 1) || (Number(page.currentPage) + 2 === i && Number(page.currentPage) + 2 < page.totalPages - 1)) { %>
              <li>
                  <a class="pagination-link is-disabled">…</a>
              </li>
          <% } %>
        <% } %>

        <% if ( page.currentPage < page.totalPages ) { %>
        <li>
          <a class="pagination-link" href="?page=<%= page.currentPage + 1 %>" aria-label="Aller à la page suivante">
            &rsaquo;
          </a>
        </li>
        <li>
          <a class="pagination-link" href="?page=<%= page.totalPages %>" aria-label="Aller à la dernière page">
            &raquo;
          </a>
        </li>
        <% } %>
    </ul>
</nav>
</main>

<div class="modal">
  <div class="modal-background" onclick="closeModale()"></div>
  <div class="modal-card">
      <header>
          <div>Détails d'une image</div>
          <button aria-label="Fermer" class="close" onclick="closeModale()"></button>
      </header>
      <section>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
          <div class="image-preview">
            <img src="" id="previewImage" alt="Image">
          </div>
          <div>
            <%- include('../partials/file-links', {file: {}, index: 0}) %></div>
          <div>
        </div>
      </section>
      <footer>
          <button class="button is-primary"  onclick="closeModale()">Fermer</button>
      </footer>
  </div>
</div>