Кнопка Django show image не работает с циклом for loop

Мой сайт позволяет пользователям загружать объемные изображения. Проблема в том, что когда пользователь находится на мобильном устройстве, ему потенциально приходится прокручивать 100 изображений. Я хочу реализовать кнопку "Показать больше".

Я нашел эту демонстрацию в Интернете, которую я заставил работать

html:

<div class="container">
    <div class="grid">
            <div class="cell">
                <img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" />
            </div>
            <div class="cell">
                <img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" />
            </div>
        </div>
    </div>            
    
    <button onclick={showMore()}>Show all books</button>
    
    <script>
        const showMore = () => {
        document.querySelectorAll('.cell').forEach(c => c.style.display = 'block')
        }
    </script>

css:

@media screen and (min-width: 600px) {
.container{
    overflow: auto;
    height: (70vh);
}
.grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.cell {
    width: calc(50% - 2rem);
}
}


.cell {
margin: 1rem;
}

button {
display: none;
}

@media screen and (max-width: 600px) {
.cell {
    display: none;
}

.cell:first-child {
    display: block;
}

button {
    display: inline-block;
}
}

Однако, когда я использую тот же код, только с циклом for для отображения, он не работает и просто отображает все изображения.

<div class="container">
    <div class="grid">
        {% for images in postgallery %}

        <div class="cell">
            <img src="{{ images.images.url }}" class="book" />
        </div>

        {% endfor %}
    </div>
</div>
<button onclick="{showMore()}">Show all books</button>

<script>
    const showMore = () => {
        document.querySelectorAll(".cell").forEach((c) => (c.style.display = "block"));
    };
</script>

Вернуться на верх