CODEWITHSUNDEEP
javascripthtmlnode.jsejs
Rafal
Rafal

Reputation: 53

How to display the same link source with modal as with image?

I'm creating a webpage of gallery build on ejs and while I'm able to display images properly with .forEach method, when I try to open modal for current image it only works for the first image.

I've tried separating the code - putting .forEach method for images and modal but it brought the same result - same image was on every modal

So here is my 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>
    <%})%>

And also here is the app.js object, where I currently store the source links (with additional links):

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

I expect to display the same image on modal as seen on the webpage. Hope you understand me and you can help me with it :)

Upvotes: 0

Views: 71

Answers (1)

Kirasiris
Kirasiris

Reputation: 550

It's been a long time since I used Bootstrap but if I'm not mistaken your error comes from the modal...you need to pass the corresponding ID.

<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">
```.

Upvotes: 1

Related Questions