Codyhouse.co 变形图像模态 - 如何将数据放入模态

Question

Ive been playing around with this: https://codyhouse.co/ds/components/app/morphing-image-modal , yet i cant put in the information inside modal. From what i understood from component site, the datas are stored somewhere, but those are not in html. Either im getting blank page with zoomed in img, or the text is invisible. If I duplicate <div class="morph-img-modal__info js-morph-img-modal__info"> within the same modal the first one will show only once and then disappear while the duplicated one will stay the same. Point is to have each photo with different text as shown on component site.
Any suggestions?

JS

    var morphModal = document.getElementsByClassName('js-morph-img-modal')[0]
MorphImgModal({
    element: morphModal,
    searchData: function (target, cb) {
        var imgInfoPath = target.getAttribute('data-morph-url')
        var xhttp = new XMLHttpRequest()
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                cb(this.responseText)
            }
        }
        xhttp.open('GET', imgInfoPath, true)
        xhttp.send()
    },
})

HTML

<ul class="grid gap-xs">
            <li class="col-12 col-4@sm">
                <figure class="cursor-pointer" aria-controls="morph-modal-id" data-morph-img="1">
                    <img src="./assets/img/img-1.jpg" data-modal-src="./assets/img/img-1.jpg" alt="Image Description">
                </figure>
            </li>

            <li class="col-12 col-4@sm">
                <figure class="cursor-pointer" aria-controls="morph-modal-id" data-morph-img="2">
                    <img src="./assets/img/img-2.jpg" data-modal-src="./assets/img/img-2.jpg" alt="Image Description">
                </figure>
            </li>

            <li class="col-12 col-4@sm">
                <figure class="cursor-pointer" aria-controls="morph-modal-id" data-morph-img="3">
                    <img src="./assets/img/img-3.jpg" data-modal-src="./assets/img/img-3.jpg" alt="Image Description">
                </figure>
            </li>
        </ul>

        <div class="morph-img-modal modal modal--animate-fade flex flex-center bg-black bg-opacity-90% js-morph-img-modal js-modal" id="morph-modal-id">
            <div class="morph-img-modal__content modal__content max-width-lg bg inner-glow shadow-md opacity-0 js-morph-img-modal__content" role="alertdialog" aria-label="Image modal window">
                <figure>
                    <img class="morph-img-modal__img js-morph-img-modal__img" src="" alt="Image Preview">
                </figure>

                <div class="morph-img-modal__info js-morph-img-modal__info">
                    <h2>halo</h2>
                </div>
            </div>

            <div class="morph-img-bg bg is-hidden js-morph-img-bg" aria-hidden="true"></div>
            <div class="morph-img-clone is-hidden js-morph-img-clone" aria-hidden="true"></div>

            <button class="reset morph-img-close-btn js-tab-focus js-morph-img-close-btn">
                <svg class="icon icon--sm" viewBox="0 0 24 24">
                    <title>Close modal window</title>
                    <g fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="3" y1="3" x2="21" y2="21" />
                        <line x1="21" y1="3" x2="3" y2="21" />
                    </g>
                </svg>
            </button>
        </div>