Реализация добавления изображения из галереи в избранное, которое отображается на отдельной странице// DJANGO/JS

По сути, я создаю веб-галерею на Django/JS для проекта, однако проект должен иметь CRUD-функциональность. В настоящее время у меня есть функционирующий модал при нажатии на изображение в галерее, а также кнопка "Добавить в избранное", когда пользователь вошел в систему. Я пытаюсь придумать способ динамически добавлять эти изображения на HTML-страницу избранного. Я не уверен, как это проще сделать - с помощью JS или Django.

Вот мой текущий JS код:

$(function() {
    $('.myImg').each(function() {
        $(this).click(function() {
            $('#myModal').css('display', 'block')
            $('#imgModal').attr('src', this.src)
            $('.navbar').css('display', 'none')
        })
        /* Favourite image functionality */
        var favouriteImages = []
        
        imgSrc = $(this).attr('src', this.src);
        $('#favourites-btn').click(function () {
            favouriteImages.push(imgSrc)
        })
    })
    $('.close').each(function() {
        $(this).click(function() {
            $('#myModal').css('display', 'none')
            $('.navbar').css('display', 'flex')
        })
    })
})

favouriteImages.forEach(function() {
    $('#favourites-gal').append(<img class='myImg'/>)
})

Внизу, в функции favoriteImages.forEach, я не знаю, как включить src конкретного изображения, которое добавляется после нажатия кнопки Добавить в избранное.

Для справки: В реальной галерее изображений структура кода HTML такова:

<div class="gal">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy1.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy2.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy3.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy4.webp' %}" alt="">



                <img class="myImg" src="{% static 'img/artsy-gallery/artsy5.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy6.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy7.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy8.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy9.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy10.webp' %}" alt="">

                <img class="myImg" src="{% static 'img/artsy-gallery/artsy11.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy12.webp' %}" alt="">
                <img class="myImg" src="{% static 'img/artsy-gallery/artsy13.webp' %}" alt="">
            </div>

Галерея избранного будет иметь ту же структуру, только на этот раз изображения будут добавляться в div gal динамически, после того как пользователь добавит их в избранное с помощью кнопки "Добавить в избранное".

ЕСЛИ ЭТА ИНФОРМАЦИЯ НЕОБХОДИМА, ВОТ HTML СТРУКТУРА МОДАЛА, КОТОРЫЙ СОДЕРЖИТ КНОПКУ ИЗБРАННОГО:

<div id="myModal" class="modal text-center" tabindex="-1" role="dialog">
        <img class="modal-content" id="imgModal">
        {% if user.is_authenticated %}
        <button id="favourites-btn" class="uppercase btn btn-primary overlay-btn">Add to Favourites</button>
        {% endif %}
        <span class="close">&times;</span>
</div>

Я совсем запутался, что делать, и не уверен, что использую подходящую технологию для этого, это кажется немного слишком сложным, и я не уверен, что это можно было бы сделать проще, используя только Django.

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