```
<body>
    <div class="tour">
        <div class="container">
            <div class="tour__head">
                <h2>3D TOUR</h2>
            </div>

            <div id="masonry">
                <div class="box"></div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
    <script src="{xiao:$site_template}js/panolens.min.js"></script>

    <script>
    const panorama = new PANOLENS.ImagePanorama('https://www.edlv.edu.mo/data/upload/image/201601/d9297d4516dd0a4da565c857b2aaa5dd.jpg');
    let imageContainer = document.querySelector('.box')

    const viewer = new PANOLENS.Viewer({
        container: imageContainer,
        autoRotate: true,
        autoRotateSpeed: 0.3,
        controlBar: true,
    });

    viewer.add(panorama);
    </script>
</body>
</html>
```

```
<div id="masonry" class="container-fluid YLlightbox">
                                        <div class="box" style="display: block;"><img src="/data/upload/image/20210226/1614321373578562.jpg"><br>
                    <p>校門口</p></div>
                                        <div class="box" style="display: block;"><img src="/data/upload/image/20210226/1614326587132485.jpg"><br>
                    <p>學校外牆</p></div>
                                        <div class="box" style="display: block;"><img src="/data/upload/image/20210226/1614326552758383.jpg"><br>
                    <p>校門外牆</p></div>
                                        <div class="box" style="display: block;"><img src="/data/upload/image/20210226/1614326255675039.jpg"><br>
                    <p>會客室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614326239804045.jpg"><br>
                    <p>會客室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614326221860917.jpg"><br>
                    <p>會客室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614326142125948.jpg"><br>
                    <p>教堂</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614324663280826.jpg"><br>
                    <p>教堂</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325227668990.jpg"><br>
                    <p>綜合活動室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/4119c373f46a468007da7a46e2e42d1e.jpg"><br>
                    <p>5樓會議室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/ddc2e7c56789f3b87fc542a6299c7176.jpg"><br>
                    <p>課室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325304260702.jpg"><br>
                    <p>音樂室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325340324669.jpg"><br>
                    <p>鮑思高花園</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/26252a6a0378c42abd3c22f6eef883df.jpg"><br>
                    <p>電腦室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/b7314db3cb5597adf82775483b3d3fa9.jpg"><br>
                    <p>醫療室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/a495a65d608093927df0f06a80990975.jpg"><br>
                    <p>實驗室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/304e193e195d09f2f01b13fd994d2f6c.jpg"><br>
                    <p>4樓課室走廊</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/e7b4e4f557105d86db9a4be5b6280b2d.jpg"><br>
                    <p>3樓會議室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/176b12947d5527d64aac8fdcef9d557b.jpg"><br>
                    <p>3樓課室走廊</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325449829529.jpg"><br>
                    <p>禮堂</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325715873198.jpg"><br>
                    <p>飯堂</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325752757586.jpg"><br>
                    <p>綜合康樂室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/201601/d0f291d7f0f91b8ba2bf53c35cc47817.jpg"><br>
                    <p>樂隊室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325795775037.jpg"><br>
                    <p>健身室</p></div>
                                        <div class="box" style="display: none;"><img src="/data/upload/image/20210226/1614325991807005.jpg"><br>
                    <p>足球場</p></div>
                                    </div>
```

I want to integrate the 360 images from my <div id="masonry" ...> into the Panolens viewer I've set up in the first code snippet.

Get all images from my masonry div
Create a panorama for each image
Add each panorama to the viewer and replace the <img> correspondingly
Keep the title information from my original structure