Загрузка изображения только при открытии модального в Laravel - PullRequest
Новая
       9

Загрузка изображения только при открытии модального в Laravel

0 голосов
/ 21 апреля 2020

Описание

У меня есть маленькая превью-картинка, и при нажатии на нее открывается модальное изображение большего размера. 

<a onClick="ToggleImage()" class="toggle-img-btn">
<img class="about-img" src="{{asset("storage/images/about_170.jpg")}}" /></a>

@include('inc.imageModal')

И модальное изображение: 

<div class="img-modal-background" id="img-modal-background">
  <div class="img-modal-content">
    <input type="checkbox" class="img-close" onClick="ToggleImage()" />
    <a class="img-close-cross"></a>
    <img class="modal-img" src="{{asset("storage/images/about.jpg")}}">
  </div>
</div>

И функция JavaScript для открытия / закрытия модального режима: 

function ToggleImage() {
    const modalBG = document.getElementById("img-modal-background");
    const modalIMG = document.querySelector(".modal-img");
    if (modalBG.style.display === "flex") {
        modalBG.style.opacity = "0";
        setTimeout(() => {
            modalBG.style.display = "none";
            modalIMG.style.display = "none";
        }, 500);
    } else {
        modalBG.style.display = "flex";
        modalIMG.style.display = "inherit";
        setTimeout(() => {
            modalBG.style.opacity = "1";
        }, 10);
    }
}

Вопрос

Я хочу загрузить только изображение в модале, когда пользователь открывает модал.

Как мне этого добиться?

Я использую Laravel 7 и обычный JS.

Вы можете найти репо здесь

Спасибо за ваше время:)

1 Ответ

0 голосов
/ 21 апреля 2020

вы можете указать путь к изображению в переменной js и установить атрибут img sr c в зависимости от модального состояния, например: 

function ToggleImage() {
const modalBG = document.getElementById("img-modal-background");
const modalIMG = document.querySelector(".modal-img");
const img = "storage/images/about.jpg";

if (modalBG.style.display === "flex") {
    modalBG.style.opacity = "0";
    modalIMG.setAttribute("src", "");
    setTimeout(() => {
        modalBG.style.display = "none";
        modalIMG.style.display = "none";
    }, 500);
} else {
    modalBG.style.display = "flex";
    modalIMG.style.display = "inherit";
    modalIMG.setAttribute("src", img);
    setTimeout(() => {
        modalBG.style.opacity = "1";
    }, 10);
}

}

...