@extends('guest.layout')

@section('content')
<section class="page-title page-title-4 bg-secondary">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3 class="uppercase mb0">{{$gallery->title}}</h3>
            </div>
            <div class="col-md-6 text-right">
                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{url('/')}}">Accueil</a>
                    </li>
                    <li>
                        <a href="{{url('/gallery')}}">Galleries</a>
                    </li>
                    <li class="active">Gallery #{{$gallery->position}}</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="projects">
    <div class="container">
        <div class="masonry-loader mt64">
            <div class="col-sm-12 text-center">
                <div class="spinner"></div>
            </div>
        </div>
        <div class="row masonry masonryFlyIn" id="gallery">
            @foreach($gallery->getMedia('web_gallery') as $img)
            <div class="{{$galleries_count==12?'col-md-offset-3 ' : ''}} col-sm-{{$galleries_count}} masonry-item project" data-filter="People" data-src="{{$img->getUrl()}}">
                <div class="image-tile hover-tile text-center">
                    <a href="{{$img->getUrl()}}">
                        {!! $img->img('', ['class'=>'ligthbox gallery']) !!}
                    </a>
                    {{-- <div class="hover-state">
                        <a href="{{ url('gallery/' . $gallery->id) }}">
                            <h3 class="uppercase mb8">{{$gallery->title}}</h3>
                        </a>
                    </div> --}}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- <section class="ftco-section bg-light">
    <div class="container pt-5">
        <div class="row" id="gallery">
            @foreach($gallery->getMedia('web_gallery') as $img)
            <a href="{{$img->getUrl()}}" class="col-lg-3 col-md-4 col-xs-6 thumb ftco-animate" style="padding:5px;" >
                {!! $img->img('thumb_200', ['class'=>'ligthbox gallery']) !!}
                <div class="demo-gallery-poster">
                    <img src="https://sachinchoolur.github.io/lightGallery/static/img/zoom.png">
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section> --}}
@endsection

@section('head')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.css" integrity="sha256-LvrAcvFsV6d8qTupmF/43JY8J0gB1hKVs8Hm2rAlcHc=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lg-transitions.css" integrity="sha256-ofT6s9AmhHCsvgqLxOpdYY9ztFTIQm3kUA4c5QYu4Ts=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lg-fb-comment-box.css" integrity="sha256-6UUDK8HWITSsxMDN5TzgkdveAvWcdOhzcg5p+CaTwto=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://sachinchoolur.github.io/lightGallery/static/css/justifiedGallery.min.css" />
    {{-- <link rel="stylesheet" href="https://sachinchoolur.github.io/lightGallery/static/css/main.css" /> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="https://sachinchoolur.github.io/lightGallery/static/js/prettify.js"></script>
    <script src="https://sachinchoolur.github.io/lightGallery/static/js/transition.js"></script>
    <script src="https://sachinchoolur.github.io/lightGallery/static/js/collapse.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.js"></script>

    <style>
    </style>
    <script>
        $(document).ready(function(){
            $('#gallery').lightGallery({
                thumbnail: true,
                animateThumb: true,
                showThumbByDefault: true
            });
        });
    </script>
    <style>
        .lg-sub-html {
            display: none;
        }
        #gallery > a:hover .demo-gallery-poster > img {
            opacity: 1;
        }
        #gallery > a .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: background-color 0.15s ease 0s;
            -o-transition: background-color 0.15s ease 0s;
            transition: background-color 0.15s ease 0s;
        }
        #gallery > a .demo-gallery-poster > img {
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            -webkit-transition: opacity 0.3s ease 0s;
            -o-transition: opacity 0.3s ease 0s;
            transition: opacity 0.3s ease 0s;
        }
        #gallery > a:hover .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.5);
        }
        #gallery > a > img {
            -webkit-transition: -webkit-transform 0.15s ease 0s;
            -moz-transition: -moz-transform 0.15s ease 0s;
            -o-transition: -o-transform 0.15s ease 0s;
            transition: transform 0.15s ease 0s;
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            height: 100%;
            width: 100%;
        }
        #gallery > a:hover > img {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }
        #gallery > a:hover .demo-gallery-poster > img {
            opacity: 1;
        }
        #gallery > a .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: background-color 0.15s ease 0s;
            -o-transition: background-color 0.15s ease 0s;
            transition: background-color 0.15s ease 0s;
        }
        #gallery > a .demo-gallery-poster > img {
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            -webkit-transition: opacity 0.3s ease 0s;
            -o-transition: opacity 0.3s ease 0s;
            transition: opacity 0.3s ease 0s;
        }
        #gallery > a:hover .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.5);
        }
        .demo-gallery .video .demo-gallery-poster img {
            height: 48px;
            margin-left: -24px;
            margin-top: -24px;
            opacity: 0.8;
            width: 48px;
        }
        #gallery > a {
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        .gallery {

        }
    </style>
@endsection