Minimal with Single Image View

With the default templates in MoreGallery (v1.5) and some very minimal CSS you can already create an appealing gallery, consisting of a 200px by 200px "grid" of thumbnails.

Clicking a thumbnail shows you the single image view, with a larger image and previous and next links.

<style type="text/css">
    .images {
        list-style-type: none;
        padding-left: 0;
    }
    .images li {
        display: inline-block;
        width: 200px;
        height: 200px;
        position: relative;
    }
    .images li a img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<ul class="images">
    [[!mgGetImages]]
</ul>

Result


  • Read more:
  • Minimal