python-gallery/gallery/templates/index.html

{% extends 'layout.html' %}

{% block nav_home %}navigation-item__selected{% endblock %}
{% block wrapper_class %}index-wrapper{% endblock %}

{% block content %}
    <div class="gallery">
        {% for image in images %}
            <a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}">
                <span class="gallery__item-info">
                    <p>{{ image['id'] }}</p>
                    <h2><span class="time">{{ image['created_at'] }}</span></h2>
                </span>
                <img
                    class="gallery__item-image"
                    data-src="{{ image['file_name'] }}"
                    onload="imgFade(this)"
                    style="opacity:0;"
                />
            </a>
        {% endfor %}
    </div>
{% endblock %}

{% block script %}
    <script>
        var images = document.querySelectorAll('.gallery__item-image');

        window.onload = function() {
            for (var i = 0; i < images.length; i++) {
                var image = images[i];
                if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
                    if (!image.src) {
                        image.src = `/api/uploads/${image.getAttribute('data-src')}/400`
                    }
                }
            }
        };

        window.onscroll = function() {
            for (var i = 0; i < images.length; i++) {
                var image = images[i];
                if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
                    if (!image.src) {
                        image.src = `/api/uploads/${image.getAttribute('data-src')}/400`
                    }
                }
            }
        };

        const urlParams = new URLSearchParams(window.location.search);
        const src = urlParams.get('src');

        if (src) {
            var imgOffset = document.getElementById('image-' + src).offsetTop;
            var imgHeight = document.getElementById('image-' + src).offsetHeight;
            var windowHeight = window.innerHeight;
            
            document.querySelector('html').style.scrollBehavior = 'auto';
            window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
            document.querySelector('html').style.scrollBehavior = 'smooth';
        }
    </script>
{% endblock %}