<?php $__env->startSection('content'); ?>
   <div class="gallery-page">
        <section class="bg-base page-section">
            <div class="container">
                <h2 class="h1 text-center" id="activeName"><?php echo e($gallery->name); ?></h2>
                <div id="gallery-wrap" class="gallery-wrapper">
                    <div class="primary-gallery gallery" id="gallery-slideshow">
                        <?php foreach($gallery->images as $image): ?>
                            <div class="slide">
                                <img src="<?php echo e($image->url); ?>" alt="<?php echo e($image->name); ?>">
                                <?php if(isset($image->caption)): ?>
                                    <p class="caption">
                                        <?php if(isset($image->link)): ?>
                                            <a href="<?php echo e($image->link); ?>"><?php echo e($image->name); ?></a><span> - </span>
                                        <?php else: ?>
                                            <span><?php echo e($image->name); ?> - </span>
                                        <?php endif; ?>
                                        <?php echo e($image->caption); ?>

                                    </p>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                        <a class="cycle-next cycle-nav" href="#"><img src="/images/arrow-next.png" srcset="/images/arrow-next2x.png 2x, /images/arrow-next3x.png 3x" alt="Next"></a>
                        <a class="cycle-prev cycle-nav" href="#"><img src="/images/arrow-prev.png" srcset="/images/arrow-prev2x.png 2x, /images/arrow-prev3x.png 3x" alt="Next"></a>
                    </div>
                    <div class="loading-overlay">
                        <img src="/images/loading.gif" alt="loading"/>
                    </div>
                </div>

            </div>
        </section>
        <section class="bg-accent page-section">
           <div class="container">
               <h3 class="h2 text-center">View Another Gallery</h3>
               <div class="row alternate-galleries">
                    <?php foreach($galleries as $index=>$gallery): ?>
                       <div class="col-sm-4 col-lg-4">
                           <div class="thumbnail <?php if($index==0): ?> active <?php endif; ?>" data-gallery-id="#gallery-<?php echo e($index); ?>" data-gallery-name="<?php echo e($gallery->name); ?>">
                               <img src="<?php echo e($gallery->thumbnail); ?>" alt="<?php echo e($gallery->name); ?>"/>
                               <div class="thumbnail-caption">
                                   <p class="text-center">
                                       <?php echo e($gallery->name); ?>

                                   </p>
                               </div>
                           </div>
                       </div>
                       <script id="gallery-<?php echo e($index); ?>" type="text/template" data-name="GalleryName">
                           <?php foreach($gallery->images as $image): ?>
                               <div class="slide">
                                   <img src="<?php echo e($image->url); ?>" alt="<?php echo e($image->name); ?>">
                                   <?php if(isset($image->caption)): ?>
                                       <p class="caption">
                                           <?php if(isset($image->link)): ?>
                                               <a href="<?php echo e($image->link); ?>"><?php echo e($image->name); ?></a><span> - </span>
                                           <?php else: ?>
                                               <span><?php echo e($image->name); ?> - </span>
                                           <?php endif; ?>
                                           <?php echo e($image->caption); ?>

                                       </p>
                                   <?php endif; ?>
                               </div>
                           <?php endforeach; ?>
                       </script>
                    <?php endforeach; ?>
               </div>
           </div>
        </section>
   </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('footerargs'); ?>
    <script src="<?php echo e(asset('/js/jquery.cycle2.swipe.min.js')); ?>"></script>
    <script src="<?php echo e(asset('/js/jquery.cycle2.min.js')); ?>"></script>

    <script>
        var galleryWrapper, gallery, galleryName, thumbnails, activeThumbnail;

        jQuery(document).ready(function(){
            galleryName = $('#activeName');
            gallery = $('#gallery-slideshow');
            galleryWrapper = $('#gallery-wrap');
            thumbnails = $('.thumbnail');
            activeThumbnail = $('.thumbnail.active');
            initGallery();
            thumbnails.on('click',function(){
                handleThumbnailClick($(this));
            });
        });
        jQuery(window).load(function(){
            galleryWrapper.addClass('loaded');
            setGalleryHeight();
            $(window).resize(function(){
                setGalleryHeight();
            });
        });
        function setGalleryHeight(){
            var height = gallery.outerHeight();
            galleryWrapper.css('min-height',height);
        }
        function handleThumbnailClick($el){
            if (! $el.hasClass('active')){
                activeThumbnail.removeClass('active');
                $el.addClass('active');
                activeThumbnail = $el;
                switchGallery($el,hideloader());
            }
        }

        function switchGallery($el){
            galleryWrapper.removeClass('loaded');
            galleryName.html($el.data('gallery-name'));
            scrollToGallery();
            gallery.cycle('destroy');
            gallery.find('.slide').remove();
            var slides = $($el.data('gallery-id')).html();
            gallery.append(slides);
            var tmp = $('img',gallery).first();
            if (tmp[0].complete){
                hideloader();
            }
            else{
                tmp[0].on('load',function(){
                    hideloader();
                });
            }
            initGallery();

        }
        function hideloader(){
            galleryWrapper.addClass('loaded');
        }
        function scrollToGallery(){
            $('html, body').animate({
                scrollTop: galleryName.offset().top-50
            }, 200);
        }

        function initGallery(){
            gallery.cycle({
                slides: '.slide',
                log: false,
                swipe: true,
            });
        }
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>