Lazy Image Gallery

By combining Single Page Website and Image Lazy Load methods we can create gallery without use of JavaScript.

Here you can take a look at example: https://doumanash.github.io/#Waifu

It uses targets for both sub-page and image navigation. Due to that it loads iframe as it is difficult to combine so many targets.

It requires rather complex CSS to make it work. And it is very difficult to do without relying on html templates (e.g. Jade).

Default image HTML:

<div id="52" class="default sub_page flex">
<a href="#51">«</a>
<div class="current">
    <div style="background-image: url('https://i.imgur.com/fUdhqqv.png')" class="img"></div>
    <div class="description">
        <p class="title">Tiara</p>
        <p class="details">Elegant, serious and beautiful waifu. Perfect lady for your knightly soul :)</p>
    </div>
</div>
<a href="#1">»</a></div>

sub_page class uses target selectors as described in CSS Target Selector Again, we need to place our default image at the end and every other image before it.

Since div.current is a flex container and has flex-flow: column our image will take available space horizontally. We're only left with setting height for which i decided to go with 500px. While flex scales our image horizontally, it can do nothing about vertical spacing. We need to rely on media query to adapt our images to small screens.

CSS:

div.gallery
    & > h1
        margin: 2rem

    & > div.sub_page
        align-items: center

        & > a
            flex: 4
            font-size: 100px
            margin: .2em
            text-align: center
            text-decoration: none
            opacity: 0.5
            transition: all .2s ease-in-out
            color: black

            &:visited
                color: black

            &:hover
                opacity: 1
                transform: scale(1.2)

        & > div.current
            display: flex
            flex-flow: column

            flex: 5 0 50%
            background: #333
            box-shadow: 3px 3px 3px 4px rgba(0, 0, 0, 0.4)

            & > div.description
                width: 70%
                display: flex
                flex-direction: column
                text-align: center
                color: white
                padding: 1rem
                align-self: center
                & > p.title
                    font-weight: 900
                    font-size: 1.2em
                & > p.details
                    text-align: center
                    font-weight: 100
                    word-wrap: break-word

                @media screen and (max-height: 800px), screen and (max-width: 800px)
                    font-size: .7em

            & > div.img
                height: 500px
                margin-top: 20px

                @media screen and (max-height: 800px), screen and (max-width: 800px)
                    height: 300px