Как отобразить тот же источник ссылки с модальным, как с изображением? - PullRequest
Новая
       13

Как отобразить тот же источник ссылки с модальным, как с изображением?

0 голосов
/ 04 октября 2019

Я создаю веб-страницу сборки галереи на ejs, и, хотя я могу правильно отображать изображения с помощью метода .forEach, при попытке открыть модальное изображение для текущего изображения оно работает только для первого изображения.

Я пытался разделить код - поместил метод .forEach для изображений и модальных, но он дал тот же результат - одно и то же изображение было на каждом модальном

Так вот мой EJS: 

<%galleryImg.forEach((i) => { %>
    <div class="gallery-item">
        <%let link = i.url%>
            <img class="gallery-img" src="<%= link %>"/>

            <div class="img-hover">
                <div class="text">
                    <button data-toggle="modal" data-target="#gallery-modal">See more</button>
                </div>
            </div>        
    </div>

    <div class="modal fade bd-example-modal-lg" id="gallery-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content ">

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-9">
                                <img class="gallery-img" src="i.urlModall"/>
                            </div>
                            <div class="col md-3">
                                <h4 class="float-center"><strong>Title</strong></h4>

                                <p>
                                    Lorem ipsum 
                                </p>

                                <div class="modal-footer justify-content-center">
                                    <button type="button">
                                        <span><i class="fas fa-shopping-basket"></i></span> SHOP
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <%})%>

А также здесь есть объект app.js, в котором я в настоящее время храню исходные ссылки (с дополнительными ссылками): 

    const galleryImg = [
    {url: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg", 
urlModal: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg",
    }

Я ожидаю, что на модальной стороне будет отображаться то же изображение, что и на веб-странице. Надеюсь, вы понимаете меня и можете помочь мне с этим:)

1 Ответ

1 голос
/ 05 октября 2019

Прошло много времени с тех пор, как я использовал Bootstrap, но если я не ошибаюсь, ваша ошибка происходит из-за модальности ... вам нужно передать соответствующий идентификатор. 

<button data-toggle="modal" data-target="#gallery-modal SOME_ID">See more</button>
<div class="modal fade bd-example-modal-lg" id="gallery-modal SOME_ID" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
```.
...