
<body style="background-color: #0d0d0d;">
    <div class="">
        <div class="photor">

            <div class="photor__viewport">

                <div class="photor__viewportLayer">

                    <!-- Add photos -->

                    @foreach($images as $image)
                        <img class="imageToReplace" src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big"  data-thumb="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=pixel">
                    @endforeach

                </div>

                <div class="photor__viewportControl">
                    <div class="photor__viewportControlPrev"></div>
                    <div class="photor__viewportControlNext"></div>
                </div>

            </div>

            <div class="photor__thumbs">
                <div class="photor__thumbsWrap"></div>
            </div>

        </div>

    </div>
    <link  href="/css/photor.min.css" rel="stylesheet"> <!-- 1.4 KB in gzip -->
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/photor.min.js"></script> <!-- 5 KB in gzip -->
    <script src="/js/lazyload.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.photor').photor();
            /*let images = document.querySelectorAll(".imageToReplace");
            var r = lazyload(images);
            console.log(r);*/
        });
    </script>

</body>
