TDH_2/themes/demo/partials/home_n_new_media.htm

==
<?php
function onStart(){
    $this['gallery'] = Admin\Photos\Models\Photo::orderBy("date", "desc")->limit(3)->get();
    $this['videos'] = Admin\Videos\Models\Video::orderBy("date", "desc")->limit(3)->get();
}
?>
==
<!-- Media =========================================================== -->
<section class="media_part" id="media_section">
    <div class="auto_container">
        <div class="media_part-wrap">
            <div class="media_part-box">
                <div class="media_photo">
                    <a href="{{'gallery'|page}}" class="title">
                        <span>
                            {{'Фоторепортаж'|_}}
                        </span>
                        <spam>
                            <img src="{{ 'assets/images/arrow-right.svg'|theme }}" alt="">
                        </spam>
                    </a>
                    {% for key, item in gallery %}
                        <div class="media_photo-item {{key == 0 ? 'big' : ''}} wow fadeIn" data-wow-duration=".5s" data-wow-delay=".1s">
                            <div class="media_photo-item-pic modBtn" onclick="openImageModal({{ item.getImages() }})">
                                <img src="{{key == 0 ? item.image[0].thumb(1080, 400) : item.image[0].thumb(520,320)}}" alt="photo">
                            </div>
                            <div class="media_info">
                                <h6>
                                    {{ item.title }}
                                </h6>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                 <div class="media_video">
                    <a href="{{'videos'|page}}" class="title">
                        <span>
                            {{'Видеорепортаж'|_}}
                        </span>
                        <spam>
                            <img src="{{ 'assets/images/arrow-right.svg'|theme }}" alt="">
                        </spam>
                    </a>
                    {% for item in videos %}
                        <a class="media_video-item wow fadeIn" data-wow-duration=".5s" data-wow-delay=".1s" data-fancybox="video-gallery-{{ item.id }}" href="{{item.video[0].path}}">
                            <img src="{{item.image[0].thumb(480, 235)}}" alt="video-poster" />
                            <div class="media_info">
                                <h6>
                                    {{ item.title }}
                                </h6>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Media end ======================================================= -->

<!-- Colleage website =============================================== -->
<section class="web">
    <div class="auto_container">
        <div class="web_wrap wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".1s">
            <div class="web_box">
                <div class="title">
                    <span>
                        {{'Сайты коллег'|_}}
                    </span>
                </div>

                <div class="web_slider-2">
                    {% for item in colleagues %}
                        <a href="{{item.url}}" target="_blank" class="web_item">
                            <div class="web_item-photo">
                                <img src="{{ item.image.path }}" alt="web_item-photo">
                            </div>

                            <h4 class="web_item-title">
                                {{ item.title }}
                            </h4>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Colleage website end =========================================== -->

<script>

    function openImageModal(images){
        let media_wrapper = document.getElementById('media_section');

        let modalItems = [];
        for (let i = 0; i < images.length / 12; i++) {
            let modal_images = [];
            images.slice(i*12,(i+1)*12).forEach(function(image, index) {
                    let img =
                    `
                     <a class="fancybox modal_gal-item" href="${image.path}" data-fancybox="gallery">
                        <img src="${image.path}" alt="" />
                    </a>
                    `
                    modal_images += img;
                });
             let modalItem =
                    `
                    <div class="modal_gal-group">
                        <div class="box">
                        ${modal_images}
                        </div>
                    </div>
                    `;
            modalItems += modalItem;
        }
        let gallery_modal =
                `<div class="modal modal-photo mod modClose active" id='image-modal' >
                    <div class="modal_gal">
                        <div class="modal_gal-box owl-carousel owl-theme">
                            ${modalItems.toString()}
                        </div>
                    </div>
                </div>
                `;

       media_wrapper.insertAdjacentHTML('afterEnd', gallery_modal);

       $('.owl-carousel').owlCarousel({
                lazyLoad:true,
                loop: false,
                margin: 10,
                nav: true,
                items: 1,
                dots: false,
            });


        $('.fancybox.modal_gal-item').fancybox({
            loop: true,

            thumbs: {
                autoStart: true,
                axis: 'x',
            },
            buttons: [
                "close"
            ],

            afterShow: function () {
                $('.fancybox-toolbar').appendTo('.fancybox-slide--current > div');
            },

            'beforeClose': function () {
                $('.modal-photo').removeClass("disable");
            },

        })

        $('.to-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 100);
        });
    }

    window.addEventListener('click', function(e){

        if (document.getElementById('image-modal') != undefined) {
            if (document.getElementById('image-modal').contains(e.target) && !e.target.closest('.modal_gal') && !e.target.closest('.owl-nav')) {
                document.getElementById('image-modal').remove();
            }
        }

       let media_modal = document.getElementById('image-modal')
        if (media_modal != undefined) {
            if (document.getElementById('image-modal').contains(e.target) && !e.target.closest('.modal_gal') && !e
                .target.closest('.owl-nav')) {
                document.getElementById('image-modal').remove();
            }
        }
    });


</script>

<!-- Modal gallery ============================================ -->