<?php $galleryimages = get_post_meta( get_the_id(), 'ombresliderimgs', true ); ?>
<?php $galleryautoplay = get_post_meta( get_the_id(), 'ombrepactivateauto', true ); ?>
<?php $galleryautoplayduration = get_post_meta( get_the_id(), 'ombrepautoplaypause', true ); ?>
<?php $activatecolorbox = get_post_meta( get_the_id(), 'ombrepactivatecolorbox', true ); ?>
<?php if (!empty($galleryimages)) { ?>
<div id="ombre-carousel-<?php the_ID(); ?>" class="owl-carousel grid-carousel pf-gallery-carousel">
    <?php foreach ($galleryimages as $image => $link) { ?>
    <div class="ombre-carousel">
        <?php $fullimage = wp_get_attachment_image_src( $image, 'full' ); ?>
        <?php $attachment = get_post($image); ?>
        <?php if ($activatecolorbox == 'on') { ?>
        <a href="<?php echo esc_url($fullimage['0']); ?>" class="o-gallery photo" data-title="<?php echo esc_attr($attachment->post_excerpt); ?>">
        <?php } ?>
        <img src="<?php echo esc_attr($fullimage['0']); ?>" alt="">
            <?php if ($activatecolorbox == 'on') { ?>
        </a>
        <?php } ?>
    </div>
    <?php } ?>
</div>
<?php } ?>   
<script type="text/javascript">
    jQuery("#ombre-carousel-<?php the_ID(); ?>").css('opacity', 0);
    jQuery(window).on('load', function () {
        jQuery("#ombre-carousel-<?php the_ID(); ?>").owlCarousel({
            <?php if (is_rtl()) { echo esc_js("rtl:true,"); } ?>
            items: 1,
            autoplay: <?php if ($galleryautoplay == 'on') { echo esc_js('true'); } else { echo esc_js('false'); } ?>,
            autoplayTimeout: <?php if(!empty($galleryautoplayduration)) { echo esc_js($galleryautoplayduration); } else { echo esc_js('4'); } ?>000,
            autoplayHoverPause: true,
            dots: true,
            autoHeight: true,
            <?php if (!is_rtl()) { ?>
            margin: 100,
            <?php } else { ?>
            margin: 0,
            <?php } ?>
            mouseDrag: false,
            smartSpeed: 800,
            navText: ['', ''],
            nav: false,
            loop: true,
            lazyLoad: false<?php if (!is_rtl()) { ?>,
            animateIn: 'zoomIn',
            animateOut: 'zoomOut'
            <?php } ?>
        });
        jQuery("#ombre-carousel-<?php the_ID(); ?>").css('opacity', 1);
    });
    jQuery(document).ready(function () {
        jQuery("#ombre-carousel-<?php the_ID(); ?> a").colorbox({
            title: function () {
                return jQuery(this).data('title');
            },
            maxWidth: '100%',
            maxHeight: '100%'
        });
    });    
</script>