@extends('template.front')


@section('header')
<link rel="stylesheet" href="{{ asset('back/assets/libs/magnific-popup/magnific-popup.css') }}"/>
@stop
@section('container')

<section >

    <div class="max-w-6xl mx-auto container py-20">
        <h1 class="font-bold text-4xl text-center text-transparent mb-20">Gallery Foto</h1>

        <div class="grid md:grid-cols-4 grid-cols-2 gap-4 mt-10">
            @foreach($gallery as $k => $img)
                <div class="h-44 text-center" >
                    <a href="{{ $img->image_path }}" class="popup-link" title="{{ $img->description }}"><img alt="" loading="lazy" src="{{ $img->image_path }}" class="h-44 object-contain mx-auto" /></a>
                </div>
            @endforeach
        </div>
    </div>

</section>

@stop


@section('footer')
{{-- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> --}}
<script type="text/javascript" src="{{ asset('back/assets/libs/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
<script>
    $(function() {
        $('.popup-link').magnificPopup({
            type: 'image',
            image: {
                titleSrc: 'title'
            },
            gallery:{
	    		enabled:true
    		},
        });

        // $('.grid-mn').masonry({
        //     itemSelector: '.grid-item',
        //     columnWidth: 200
        // });
    })
</script>

@stop